Firebase功能：Hosting

步驟1：設定 Firebase 專案

前往 Firebase Console：
- 打開 Firebase Console。
- 點擊「新增專案」（Add Project），輸入專案名稱（例如 my-vite-react-app），然後按「繼續」。
- 如果不需要 Google Analytics，可以關閉此選項，然後點擊「建立專案」。
註冊 Web 應用程式：
- 在 Firebase Console 的專案總覽頁面，點擊「Web」圖標（看起來像 </>）。
- 輸入應用程式名稱（例如 my-app），然後點擊「註冊應用程式」。
- 你會看到一組 Firebase 配置資訊（firebaseConfig），請先複製並保存，稍後會用到。範例如下：
```
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};
```

步驟 2：安裝 Firebase CLI

Firebase CLI 是用來管理 Firebase 專案和部署的工具。請按照以下步驟安裝：

在終端機中，全域安裝 Firebase CLI：
```
npm install -g firebase-tools
```
登入 Firebase 帳號：
- 這會開啟瀏覽器，要求你使用 Google 帳號登入。請使用與 Firebase 專案相同的帳號。
- 成功登入後，終端機會顯示「Success」訊息。

步驟 3：在專案中初始化 Firebase

在你的 Vite + React 專案根目錄中，輸入以下指令來初始化 Firebase：
按以下步驟回答 Firebase CLI 的問題：
- Which Firebase features do you want to set up?
  - 使用方向鍵移動到「Hosting: Configure files for Firebase Hosting」，按「空格鍵」選取（會出現 * 標記），然後按「Enter」。
- Please select an option:
  - 選擇「Use an existing project」，然後從列表中選取你剛剛在 Firebase Console 建立的專案（例如 my-vite-react-app）。
- What do you want to use as your public directory?
  - 輸入 dist（因為 Vite 的建置輸出資料夾是 dist），然後按「Enter」。
- Configure as a single-page app (rewrite all URLs to /index.html)?
  - 輸入 Yes，因為 React 是單頁應用（SPA），需要將所有路由重定向到 index.html。
- Set up automatic builds and deploys with GitHub?
  - 如果你不使用 GitHub Actions，可以選擇 No。
- File dist/index.html already exists. Overwrite?
  - 選擇 No，避免覆蓋現有檔案。

初始化完成後，專案根目錄會生成以下兩個檔案：

firebase.json：設定 Firebase Hosting 的配置。
.firebaserc：記錄你的 Firebase 專案資訊。

檢查 firebase.json，內容應類似以下：

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

步驟 4：建置 Vite 專案

Firebase Hosting 需要部署建置後的靜態檔案，因此你需要先建置你的 Vite 專案。

在專案根目錄執行以下指令：
```
npm run build
```
- 這會生成一個 dist 資料夾，包含你的 React 應用程式的靜態檔案（例如 index.html、CSS 和 JavaScript 檔案）。
確認 dist 資料夾是否正確生成，裡面應該包含 index.html 和其他資源。

步驟 5：部署到 Firebase Hosting

在專案根目錄執行以下指令來部署：
```
firebase deploy
```
部署完成後，Firebase CLI 會提供一個 Hosting URL（例如 https://my-vite-react-app.web.app）。你可以在瀏覽器中開啟這個 URL，檢查你的 React 應用程式是否成功上線。

步驟 6：更新和重新部署

當你修改了 React 專案的程式碼後，需要重新建置並部署：

修改程式碼後，重新執行建置：
```
npm install firebase
```
再次部署：
```
firebase deploy
```

常見問題與錯誤處理

錯誤：找不到 dist 資料夾
- 確保你已經執行 npm run build，並檢查 dist 資料夾是否生成。
- 確認 firebase.json 中的 public 欄位是否設為 dist。
部署後頁面空白
- 檢查 firebase.json 中的 rewrites 是否正確設定為：
```
"rewrites": [
  {
    "source": "**",
    "destination": "/index.html"
  }
]
```
- 確保你的 React 應用程式使用了 react-router-dom（如果有路由需求），並正確配置。
Firebase API Key 暴露問題
- Firebase 的 API Key 可以安全地放在前端程式碼中，因為 Firebase 的安全性依賴於後端的「安全規則」（Security Rules）。請確保你的 Firebase 資料庫或儲存桶已設定適當的規則。

步驟1：設定 Firebase 專案​

步驟 2：安裝 Firebase CLI​

步驟 3：在專案中初始化 Firebase​

步驟 4：建置 Vite 專案​

步驟 5：部署到 Firebase Hosting​

步驟 6：更新和重新部署​

常見問題與錯誤處理​

步驟1：設定 Firebase 專案

步驟 2：安裝 Firebase CLI

步驟 3：在專案中初始化 Firebase

步驟 4：建置 Vite 專案

步驟 5：部署到 Firebase Hosting

步驟 6：更新和重新部署

常見問題與錯誤處理