技術筆記 / JavaScript / TypeScript

好的，這就為您撰寫一篇全新的、採用 2025 年現代化工具與最佳實踐的 Blog 文章。

title: 【2025最新版】使用 Vite + React 搭配 GitHub Actions，自動部署網站到 Firebase Hosting

tags: [React, Vite, Firebase, GitHub Actions, CI/CD]

【2025最新版】使用 Vite + React 搭配 GitHub Actions，自動部署網站到 Firebase Hosting

想要打造一個 React 網站，並實現推送到 Git 就自動部署的流暢體驗嗎？本篇文章將帶您從零開始，使用當前最熱門的建置工具 Vite 來建立 React 專案，並設定 GitHub Actions，將您的網站自動化部署到 Firebase Hosting 的免費空間上。

這套組合拳的優勢：

跟著本篇教學，您將學會建立一個現代化的前端自動化部署流程。

第一步：前置準備

在開始之前，請確保您已具備以下帳號與工具：

  1. GitHub 帳號: 用於存放您的程式碼與觸發 Actions。

  2. Google 帳號: 用於登入 Firebase。

  3. Node.js 與 npm: 點此安裝。請確保版本在 v18 或以上。

第二步：建立 GitHub 專案與本地端設定

  1. 前往 GitHub 建立一個新的 repository，例如 my-vite-react-app。記下您的專案路徑，格式為 使用者名稱/專案名稱（例如 MyUserName/my-vite-react-app）。

  2. 在您的電腦上找一個合適的目錄，將這個空的專案 clone 下來：

    Shell

    git clone https://github.com/MyUserName/my-vite-react-app.git cd my-vite-react-app

第三步：使用 Vite 建立 React 專案

現在我們不再使用 create-react-app，而是擁抱更快速、更現代的 Vite。

  1. 在剛剛 cd 進入的專案目錄下，執行以下指令來建立專案：

    Shell

    ```

    注意後面的「.」代表在當前目錄下建立專案

    npm create vite@latest . -- --template react-ts ```

    react-ts 代表建立一個同時整合 TypeScript 的 React 專案。如果您只想用 JavaScript，可以換成 react。

  2. 安裝專案所需的依賴套件：

    Shell

    npm install

  3. 啟動開發伺服器，測試專案是否成功建立：

    Shell

    npm run dev

    您應該會看到類似以下的輸出，告訴您開發伺服器已啟動：

    ``` VITE v5.x.x ready in xxx ms

    ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ```

    打開瀏覽器進入 http://localhost:5173，您會看到 Vite + React 的預設歡迎頁面。

第四步：設定 Firebase Hosting

  1. 前往 Firebase Console，點擊「新增專案」，建立一個新的 Firebase Project。

  2. 回到您的專案終端機，安裝 Firebase 的命令列工具 (CLI)：

    Shell

    npm install -g firebase-tools

  3. 登入您的 Google 帳號：

    Shell

    firebase login

  4. 初始化 Firebase 專案，這一步是整個流程的關鍵：

    Shell

    firebase init

    接下來會出現一系列的互動式問答，請依照以下指引選擇：

    • Which Firebase features do you want to set up?

      使用方向鍵移動，並用 空白鍵 選取 Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys。

    • Please select an option:

      選擇 Use an existing project，並選取您剛剛在網頁上建立的 Firebase 專案。

    • What do you want to use as your public directory?

      非常重要！ Vite 的預設打包輸出目錄是 dist，而不是 build。請在這裡輸入 dist。

    • Configure as a single-page app (rewrite all urls to /index.html)?

      輸入 Yes。React 專案需要這個設定來處理路由。

    • Set up automatic builds and deploys with GitHub?

      輸入 Yes。這會讓 Firebase CLI 自動幫我們產生 GitHub Actions 的設定檔。

    • For which GitHub repository would you like to set up a GitHub workflow?

      輸入您在第二步記下的 使用者名稱/專案名稱。

    • Set up the workflow to run a build script before every deploy?

      輸入 Yes。

    • What script should be run before every deploy?

      輸入 npm run build。

    • Set up the workflow to merge on a pull request?

      輸入 Yes。

    • What is the name of the GitHub branch associated with your site's live channel?

      輸入 main（或是您用的主要分支名稱）。

    初始化完成後，您的專案會多出 .firebaserc、firebase.json 以及 .github/workflows 目錄。

第五步：優化 GitHub Actions Workflow

Firebase CLI 產生的 workflow 檔案已經很棒了，但我們可以根據最佳實踐對它進行一些優化，讓建置過程更穩定、更可靠。

打開 .github/workflows/firebase-hosting-merge.yml (或是 pull-request 的檔案)，並將其內容修改如下：

YAML

# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      # 1. 更新 actions/checkout 版本
      - uses: actions/checkout@v4

      # 2. 新增：設定 Node.js 版本，確保環境一致性
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20' # 可根據您的專案需求選擇版本

      # 3. 優化：使用 npm ci 更快、更穩定地安裝依賴
      - run: npm ci
      - run: npm run build

      # 4. 部署到 Firebase
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_MY_VITE_REACT_APP }}' # <-- 注意：這裡的 secret 名稱會依您的專案而不同
          channelId: live
          projectId: my-vite-react-app # <-- 您的 Firebase Project ID

主要優化點：

  1. actions/checkout@v4: 使用了較新的 action 版本。

  2. actions/setup-node@v4: 新增了此步驟來固定 Node.js 版本，避免未來因 GitHub 環境更新導致建置失敗。

  3. npm ci: 取代 npm install。npm ci 會嚴格按照 package-lock.json 安裝，確保每次建置的環境都完全一致，且速度更快。

第六步：推送程式碼，觸發自動部署

現在，所有設定都完成了。讓我們將所有變更推送到 GitHub。

Shell

git add .
git commit -m "feat: Setup Vite, Firebase and GitHub Actions CI/CD"
git push -u origin main

一旦您推送成功，就可以去 GitHub 專案的 Actions 頁籤，您會看到一個正在執行的 workflow。

點進去可以看到詳細的建置與部署日誌。

第七步：驗證成果

當 action 成功執行完畢後，回到您的 Firebase Console，點選左側的「Hosting」。

您會看到最新的部署紀錄，以及您的網站網域。點擊網域連結...

恭喜！ 您已成功將 Vite + React 網站部署上線！

從現在起，只要您有任何修改推送到 main 分支，GitHub Actions 就會自動幫您完成建置與部署，讓您能專注在開發上。

Enjoy your modern CI/CD workflow!

在 GitHub 看原文