簡體   English   中英

將 React 項目部署到 Firebase 會導致顯示“Firebase 托管設置完成”的窗口

[英]Deploying React project to Firebase leads to window that says "Firebase Hosting Setup Complete"

我已經按照所有步驟初始化我的項目,我運行npm run build然后我運行firebase deploy並且它給我的 URL 引導我到一個默認的 firebase 網頁,上面寫着“Firebase Hosting Setup Complete”

謝謝您的幫助!

索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

完整演練

在開始任何事情之前,請確保您已經在 FireBase 中創建了您的項目,並且您已經在本地 React 項目文件夾中的firebase.js文件中使用了相同的 Firebase 配置火力地堡

  1. 使用以下命令創建構建文件夾:

    npm 運行構建

在 react.js 中創建構建文件夾

建立文件夾層次結構

這反過來將在項目文件夾的根目錄中創建一個構建文件夾。 基本上,構建文件針對生產進行了優化,代碼不會時不時地發生變化。

  1. 使用以下命令安裝 Firebase CLI 工具:

    npm 安裝 -g firebase-tools

-g標志在這里用於全局安裝它,因此可以從任何項目輕松訪問它。

  1. 登錄並初始化

    登錄

登錄時,您將被重定向到瀏覽器窗口,在那里您只需使用您的 FireBase 憑據登錄即可。

Firebase 初始化

firebase init

firebase init中,你會被問到很多問題,但別擔心,我會在這里指導你:

你准備好繼續了嗎?

輸入y ,因為我們要繼續。

您要為此目錄設置哪些 Firebase 功能? 按 Space 選擇功能,然后按 Enter 確認您的選擇。

在這里,您需要選擇項目中包含的所有功能,可能您不需要任何功能,只是將其用於免費托管。 :) 就我而言,我在我的項目中使用了 Firestore 和 Storage 並且還需要托管,所以我使用空格選擇這 3 個,然后按回車鍵。

正確的選項集

確保選擇 Firebase 托管,其中 Github 操作是可選的。(請參閱上圖中的綠色星星)。

當提示輸入 Firebase 規則和其他類似內容時,請使用默認選項。

Firebase 規則

要選擇公共目錄,請確保選擇構建文件夾

在 firebase reactjs 中選擇構建文件夾

選擇這些選項。 確保您沒有覆蓋buid/index.html

firebase初始化完成

  1. 部署我們的網絡應用程序

    火力基地部署

部署完成

就這樣我們完成了

已部署應用程序的鏈接將位於終端中

部署的網址

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM