使用 GitHub Actions 自動化您的構建

先決條件

完成本指南的所有前幾節，從容器化 Vue.js 應用程式開始。

您還必須擁有

一個 GitHub 賬戶。
一個 Docker Hub 賬戶。

概述

在本節中，你將使用 GitHub Actions 設定 CI/CD 管道，以自動

在 Docker 容器中構建你的 Vue.js 應用程式。
在一致的環境中執行測試。
將生產就緒映象推送到 Docker Hub。

將您的 GitHub 倉庫連線到 Docker Hub

要讓 GitHub Actions 能夠構建和推送 Docker 映象，您需要將 Docker Hub 憑據安全地儲存在新 GitHub 倉庫中。

步驟 1：生成 Docker Hub 憑證並設定 GitHub Secrets

從 Docker Hub 建立個人訪問令牌 (PAT)
1. 轉到您的 Docker Hub 賬戶 → 賬戶設定 → 安全。
2. 生成一個具有讀/寫許可權的新訪問令牌。
3. 將其命名為類似 docker-vuejs-sample 的名稱。
4. 複製並儲存令牌 — 您將在步驟 4 中用到它。
在 Docker Hub 中建立倉庫
1. 轉到您的 Docker Hub 賬戶 → 建立倉庫。
2. 對於倉庫名稱，請使用具有描述性的名稱，例如：vuejs-sample。
3. 建立後，複製並儲存倉庫名稱 — 您將在步驟 4 中用到它。
為你的 Vue.js 專案建立一個新的 GitHub 倉庫。

將 Docker Hub 憑據新增為 GitHub 倉庫機密

在您新建立的 GitHub 倉庫中

導航到：設定 → 機密和變數 → 操作 → 新建倉庫機密。
新增以下機密

名稱	值
`DOCKER_USERNAME`	您的 Docker Hub 使用者名稱
`DOCKERHUB_TOKEN`	您的 Docker Hub 訪問令牌（在步驟 1 中建立）
`DOCKERHUB_PROJECT_NAME`	您的 Docker 專案名稱（在步驟 2 中建立）

這些秘密允許 GitHub Actions 在自動化工作流期間安全地與 Docker Hub 進行身份驗證。

將您的本地專案連線到 GitHub
透過在專案根目錄執行以下命令，將你的本地專案 docker-vuejs-sample 連結到你剛剛建立的 GitHub 倉庫
$ git remote set-url origin https://github.com/{your-username}/{your-repository-name}.git
重要
將 {your-username} 和 {your-repository} 替換為您的實際 GitHub 使用者名稱和倉庫名稱。
要確認您的本地專案已正確連線到遠端 GitHub 倉庫，請執行
$ git remote -v
您應該看到類似於以下的輸出
origin https://github.com/{your-username}/{your-repository-name}.git (fetch) origin https://github.com/{your-username}/{your-repository-name}.git (push)
這確認您的本地倉庫已正確連結並準備好將原始碼推送到 GitHub。
將你的原始碼推送到 GitHub
按照以下步驟將您的本地專案提交併推送到您的 GitHub 倉庫
1. 暫存所有檔案以進行提交。
  $ git add -A
  此命令暫存所有更改——包括新建、修改和刪除的檔案——為提交做準備。
2. 提交暫存的更改並附上描述性訊息。
  $ git commit -m "Initial commit"
  此命令建立一個提交，其中包含帶有描述性訊息的暫存更改快照。
3. 將程式碼推送到 main 分支。
  $ git push -u origin main
  此命令將您的本地提交推送到遠端 GitHub 倉庫的 main 分支，並設定上游分支。

完成後，您的程式碼將在 GitHub 上可用，並且您配置的任何 GitHub Actions 工作流程都將自動執行。

注意
瞭解有關此步驟中使用的 Git 命令的更多資訊
Git add – 暫存更改（新建、修改、刪除）以進行提交
Git commit – 儲存暫存更改的快照
Git push – 將本地提交上傳到您的 GitHub 倉庫
Git remote – 檢視和管理遠端倉庫 URL

步驟 2：設定工作流程

現在，您將建立一個 GitHub Actions 工作流程，用於構建您的 Docker 映象、執行測試並將映象推送到 Docker Hub。

轉到您在 GitHub 上的倉庫，並在頂部選單中選擇Actions選項卡。
出現提示時選擇Set up a workflow yourself。
這將開啟一個內聯編輯器以建立新的工作流程檔案。預設情況下，它將儲存到：.github/workflows/main.yml
將以下工作流程配置新增到新檔案

name: CI/CD – Vue.js App with Docker

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
    types: [opened, synchronize, reopened]

jobs:
  build-test-deploy:
    name: Build, Test & Deploy
    runs-on: ubuntu-latest

    steps:
      # 1. Checkout the codebase
      - name: Checkout Code
        uses: actions/checkout@v4
        with:
          fetch-depth: 0

      # 2. Set up Docker Buildx
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3

      # 3. Cache Docker layers
      - name: Cache Docker Layers
        uses: actions/cache@v4
        with:
          path: /tmp/.buildx-cache
          key: ${{ runner.os }}-buildx-${{ github.sha }}
          restore-keys: |
            ${{ runner.os }}-buildx-

      # 4. Cache npm dependencies
      - name: Cache npm Dependencies
        uses: actions/cache@v4
        with:
          path: ~/.npm
          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-npm-

      # 5. Generate build metadata
      - name: Generate Build Metadata
        id: meta
        run: |
          echo "REPO_NAME=${GITHUB_REPOSITORY##*/}" >> "$GITHUB_OUTPUT"
          echo "SHORT_SHA=${GITHUB_SHA::7}" >> "$GITHUB_OUTPUT"

      # 6. Build Docker image for testing
      - name: Build Dev Docker Image
        uses: docker/build-push-action@v6
        with:
          context: .
          file: Dockerfile.dev
          tags: ${{ steps.meta.outputs.REPO_NAME }}-dev:latest
          load: true
          cache-from: type=local,src=/tmp/.buildx-cache
          cache-to: type=local,dest=/tmp/.buildx-cache,mode=max

      # 7. Run unit tests inside container
      - name: Run Vue.js Tests
        run: |
          docker run --rm \
            --workdir /app \
            --entrypoint "" \
            ${{ steps.meta.outputs.REPO_NAME }}-dev:latest \
            sh -c "npm ci && npm run test -- --ci --runInBand"
        env:
          CI: true
          NODE_ENV: test
        timeout-minutes: 10

      # 8. Log in to Docker Hub
      - name: Docker Hub Login
        uses: docker/login-action@v3
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}

      # 9. Build and push production image
      - name: Build and Push Production Image
        uses: docker/build-push-action@v6
        with:
          context: .
          file: Dockerfile
          push: true
          platforms: linux/amd64,linux/arm64
          tags: |
            ${{ secrets.DOCKER_USERNAME }}/${{ secrets.DOCKERHUB_PROJECT_NAME }}:latest
            ${{ secrets.DOCKER_USERNAME }}/${{ secrets.DOCKERHUB_PROJECT_NAME }}:${{ steps.meta.outputs.SHORT_SHA }}
          cache-from: type=local,src=/tmp/.buildx-cache

此工作流為你的 Vue.js 應用程式執行以下任務

在每次針對 main 分支的 push 或 pull request 時觸發。
使用 Dockerfile.dev 構建一個開發 Docker 映象，該映象已針對測試進行了最佳化。
在乾淨的容器化環境中，使用 Vitest 執行單元測試以確保一致性。
如果任何測試失敗，則立即停止工作流程 — 強制執行程式碼質量。
快取 Docker 構建層和 npm 依賴項，以加快 CI 執行速度。
使用 GitHub 倉庫機密安全地向 Docker Hub 進行身份驗證。
使用 Dockerfile 中的 prod 階段構建生產就緒映象。
使用 latest 和短 SHA 標籤標記最終映象並推送到 Docker Hub，以實現可追溯性。

注意
有關 docker/build-push-action 的更多資訊，請參閱 GitHub Action README。

步驟 3：執行工作流程

新增工作流程檔案後，是時候觸發並觀察 CI/CD 過程的實際運行了。

提交併推送您的工作流程檔案
- 在 GitHub 編輯器中選擇“Commit changes...”。
- 此推送將自動觸發 GitHub Actions 管道。
監控工作流程執行
- 轉到您的 GitHub 倉庫中的 Actions 選項卡。
- 點選工作流程執行以跟蹤每個步驟：構建、測試和（如果成功）推送。
在 Docker Hub 上驗證 Docker 映象
- 成功完成工作流程執行後，請訪問您的 Docker Hub 倉庫。
- 您應該在您的倉庫下看到一個新映象，其中包含
  - 倉庫名稱：${your-repository-name}
  - 標籤包括
    - latest – 表示最近一次成功的構建；非常適合快速測試或部署。
    - <short-sha> – 基於提交雜湊的唯一識別符號，有助於版本跟蹤、回滾和可追溯性。

提示
要保持程式碼質量並防止意外的直接推送，請啟用分支保護規則
導航到您的 GitHub 倉庫 → 設定 → 分支。
在分支保護規則下，點選新增規則。
將 main 指定為分支名稱。
啟用以下選項
在合併之前需要拉取請求.
在合併之前需要透過狀態檢查.
這確保只有經過測試和審查的程式碼才能合併到 main 分支中。

摘要

在本節中，你使用 GitHub Actions 為容器化的 Vue.js 應用程式設定了一個完整的 CI/CD 管道。

以下是您完成的工作

為您的專案建立了一個新的 GitHub 倉庫。
生成了一個安全的 Docker Hub 訪問令牌並將其作為機密新增到 GitHub。
定義了一個 GitHub Actions 工作流，它
- 在 Docker 容器中構建您的應用程式。
- 在一致的容器化環境中執行測試。
- 如果測試透過，則將生產就緒映象推送到 Docker Hub。
透過 GitHub Actions 觸發並驗證了工作流程執行。
確認您的映象已成功釋出到 Docker Hub。

透過此設定，你的 Vue.js 應用程式現已準備好進行跨環境的自動化測試和部署，從而提高信心、一致性和團隊生產力。

加深您對自動化和容器化應用程式最佳實踐的理解

GitHub Actions 簡介 – 瞭解 GitHub Actions 如何自動化您的工作流程
Docker 構建 GitHub Actions – 使用 GitHub Actions 設定容器構建
GitHub Actions 的工作流程語法 – 編寫 GitHub 工作流程的完整參考
Compose 檔案參考 – compose.yaml 的完整配置參考
編寫 Dockerfile 的最佳實踐 – 最佳化您的映象以提高效能和安全性

後續步驟

接下來，瞭解如何在部署前在 Kubernetes 上本地測試和除錯你的 Vue.js 工作負載。這有助於你確保應用程式在類似生產環境中按預期執行，減少部署期間的意外情況。