使用 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)
- 转到您的 Docker Hub 账户 → 账户设置 → 安全。
- 生成一个具有读/写权限的新访问令牌。
- 将其命名为类似
docker-vuejs-sample的名称。 - 复制并保存令牌 — 您将在步骤 4 中用到它。
在 Docker Hub 中创建仓库
- 转到您的 Docker Hub 账户 → 创建仓库。
- 对于仓库名称，请使用具有描述性的名称，例如：
vuejs-sample。 - 创建后，复制并保存仓库名称 — 您将在步骤 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 仓库
暂存所有文件以进行提交。
$ git add -A此命令暂存所有更改——包括新建、修改和删除的文件——为提交做准备。
提交暂存的更改并附上描述性消息。
$ git commit -m "Initial commit"此命令创建一个提交，其中包含带有描述性消息的暂存更改快照。
将代码推送到
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 工作负载。这有助于你确保应用程序在类似生产环境中按预期运行，减少部署期间的意外情况。