CapRover
CI/CD 集成

从 GitHub 构建、测试并部署

直接从 GitHub 部署

本示例展示了一个带 PHP 后端的 Vue 3 应用，使用由 CapRover 社区维护的 GitHub Action 即可直接从 GitHub 构建、测试并部署到 CapRover。你可以克隆示例项目 PremoWeb/SDK-Foundation-Vue 来试一试，或用它作为你下一个应用的起点。

创建一个新应用

你在这里设置的名称会成为 APP_NAME 这个 secret 的值。

创建一个新应用

启用应用 Token

打开新应用的 "Deployment" 标签页，点击 Enable App Token 并复制该 token。这就是你的 APP_TOKEN secret。

启用应用 Token

添加 GitHub Secrets

添加 GitHub Secrets

创建一个 secret

对 APP_TOKEN 和 CAPROVER_SERVER 也重复上述流程。

注意：CapRover server 必须使用 https://captain.apps.your-domain.com 这种格式。你可以把 CAPROVER_SERVER 设置为 Global Secret，供所有私有和/或公开项目复用。

将文件添加到项目

使用该方法部署到 CapRover，至少需要两个文件。

第一个文件是 captain-definition，CapRover 部署时会用到它。另一个文件是 workflow 的 yaml 文件，GitHub Actions 会在部署前用它来处理你的项目。

把新的 Workflow 文件内容保存到 .github/workflows/deploy.yml：

name: Build & Deploy

on:
  push:
    branches: [ "main" ]

  pull_request:
    branches: [ "main" ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [18.x]

    steps:
      - name: Check out repository
        uses: actions/checkout@v4
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
          cache: "npm"
      - run: npm ci
      - run: npm run build --if-present
      - run: npm run test --if-present

      - uses: a7ul/tar-action@v1.1.0
        with:
          command: c
          cwd: "./"
          files: |
            backend/
            frontend/dist/
            captain-definition
          outPath: deploy.tar

      - name: Deploy App to CapRover
        uses: caprover/deploy-from-github@v1.0.1
        with:
          server: '${{ secrets.CAPROVER_SERVER }}'
          app: '${{ secrets.APP_NAME }}'
          token: '${{ secrets.APP_TOKEN }}'

对以上内容做个快速拆解说明：

第一步是使用 NPM 拉取代码并构建应用的 Vue 3 前端部分。构建产物会输出到 frontend/dist/。如果项目配置了测试，那么在进入第二步前也会先执行测试。

第二步会把 backend/、frontend/dist/ 两个目录以及 captain-definition 文件打包进 deploy.tar。

最后一步会把 tarball 文件发送到 CapRover，以便 CapRover 开始部署你的应用。

提交代码更改以部署！

当你向项目仓库的 "main" 分支提交代码后，GitHub Actions 会开始执行该 Workflow。完成后，你会在几秒钟内看到应用部署到 CapRover！如果 GitHub 发现任何错误，会自动发送邮件通知你；没有收到邮件通常就表示部署成功。

替代方法（更高效）

另外，你也可以在 GitHub 上构建 Docker 镜像，然后只把构建产物部署到你的 CapRover 实例。这么做的好处是：构建镜像不会消耗 CapRover 实例上的 RAM 和 CPU。

要实现这一点，需要按以下步骤使用 GitHub Actions 构建 Docker 镜像，使用 GitHub Packages 存储，然后部署到 CapRover。

创建 GitHub Personal Access Token

你需要创建一个 GitHub Personal Access Token，并为它授予 packages 的写入权限。

如果你之前没创建过，GitHub 有一份很好的指南：创建 Personal Access Token。

创建一个新应用

如果你在 CapRover 上还没有应用，请按 这里 的说明创建一个。

如果你已经有应用了，可以跳过这一步。

启用应用 Token

如果你的应用还没有 app token，请按 这里 的说明创建一个。

如果已经有 app token，请先保存好，下一步会用到它。

添加 GitHub Secrets

你需要把以下信息添加到 GitHub Secrets：

  • App Name: CapRover 中的应用名称
  • App Token: 在上一步获取的 app token
  • CapRover Server URL: 你的 CapRover Server 的 URL
  • GitHub Token: 上一步创建的 GitHub Personal Access Token

可以按 这里 的说明添加 GitHub Secrets。

在 CapRover 中添加私有 Docker Registry

为了从 GitHub Packages 拉取镜像，你需要在 CapRover 中添加一个私有 Docker registry。如果你之前没做过，可以按 这里 的说明操作。

使用以下值：

  • Username: <your github username>
  • Password: <your github personal access token>
  • Domain: ghcr.io (no www, no http)
  • Image Prefix: <your github username or your org username> (if you're pulling images from an org different than your username)

如果 image prefix 使用的是你的 GitHub 用户名，那么该 prefix 必须为小写

创建 GitHub Action

GitHub Actions 是 GitHub 内置的 CI/CD 流水线。如果你不熟悉它，建议先阅读 GitHub 的 Understanding GitHub Actions 文档。

这里有一个 GitHub Action 示例：每次向 pull request 推送代码时构建一个 Docker 容器，并部署到 CapRover 服务器（适合开发环境的配置示例）。

name: Build and Deploy Docker Image

on: [pull_request]

jobs:
  build_and_deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Check out repository
      uses: actions/checkout@v4

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

    - name: Login to Container Registry
      uses: docker/login-action@v3
      with:
            registry: ghcr.io
            username: ${{ github.repository_owner }}
            password: ${{ secrets.GITHUB_TOKEN }}

    - name: Preset Image Name
      run: echo "IMAGE_URL=$(echo ghcr.io/${{ github.repository_owner }}/${{ github.event.repository.name }}:$(echo ${{ github.sha }} | cut -c1-7) | tr '[:upper:]' '[:lower:]')" >> $GITHUB_ENV

    - name: Build and push Docker Image
      uses: docker/build-push-action@v5
      with:
        context: .
        file: ./Dockerfile
        push: true
        tags: ${{ env.IMAGE_URL }}

    - name: Deploy Image to CapRrover
      uses: caprover/deploy-from-github@v1.1.2
      with:
        server: "${{ secrets.CAPROVER_SERVER }}"
        app: "${{ secrets.APP_NAME }}"
        token: "${{ secrets.APP_TOKEN }}"
        image: ${{ env.IMAGE_URL }}

下面是对该 action 中每一步的简要说明：

  1. Check out repository: 这一步使用 actions/checkout@v2，它是一个预定义的 GitHub Action，用于让 workflow 访问仓库内容。checkout 会把仓库克隆到 runner（GitHub Actions 执行 workflow 的虚拟环境）上，后续步骤就都可以在这个工作目录中操作。
  2. Set up Docker Buildx: 这一步使用 docker/setup-buildx-action@v1 来配置 Docker Buildx，从而支持更高级的容器构建能力。
  3. Login to Container Registry: 这一步使用 docker/login-action@v2 通过仓库所有者用户名以及 GitHub Token（GITHUB_TOKEN）登录 GitHub Container Registry（ghcr.io）。这个 token 必须事先保存到仓库的 secrets 中。
  4. Preset Image Name: 这是一个 shell 命令，用来拼接 Docker 镜像的 URL。它会用到 GitHub 仓库 owner、仓库名，以及当前提交的 SHA（截取前 7 位）来生成 URL，并把所有大写字符转为小写，然后写入 GITHUB_ENV，使其可在后续步骤中作为环境变量使用。
  5. Build and push Docker Image: 这一步使用 docker/build-push-action@v4 基于仓库中的 Dockerfile 构建镜像，并把它推送到上一步设置好的 GitHub Container Registry URL。context: . 表示构建上下文为当前目录（即仓库根目录）。
  6. Deploy Image to CapRover: 这一步使用 caprover/deploy-from-github@v1.1.2 将刚构建并推送的 Docker 镜像部署到 CapRover。CapRover server、应用名与访问 token 都从仓库 secrets 中读取；镜像 URL 则来自前面设置的环境变量。

部署！

完成以上改动后，把它们 commit + push 到你的仓库，然后就可以看到自动化流程开始运行了 🪄

需要帮助？

我们提供商业支持与社区支持。详情请访问 帮助与支持 页面。

CI/CD 集成

Previous Page

从 GitLab 部署

Next Page

On this page

直接从 GitHub 部署创建一个新应用启用应用 Token添加 GitHub Secrets将文件添加到项目提交代码更改以部署！替代方法（更高效）创建 GitHub Personal Access Token创建一个新应用启用应用 Token添加 GitHub Secrets在 CapRover 中添加私有 Docker Registry创建 GitHub Action部署！需要帮助？