GitHub Actions实现代码自动部署与构建：从后端到前端的完整指南

创作时间:

2025-01-22 04:51:49

作者:

@小白创作中心

GitHub Actions实现代码自动部署与构建：从后端到前端的完整指南

使用GitHub Actions实现自动化部署，可以将代码从GitHub仓库的dev分支自动部署到开发服务器。这种方式可以确保每次在dev分支推送代码时，服务器上的代码会自动更新，为开发和测试带来极大的便利。

前置条件

在开始之前，请确保以下条件已经满足：

GitHub 仓库配置：仓库中需要一个名为dev的分支。
SSH 配置：需要一个SSH私钥用于登录到服务器，并将其配置为GitHub仓库的秘密变量（例如，SSH_PEM_KEY）。
服务器配置：服务器上已经配置了用于部署的用户（如www），并且该用户有权限更新代码。

配置服务器的相关信息到GitHub仓库

找到项目中的Settings -> General -> Security -> Actions点击New repository secret添加一个新的环境变量
Name写自己配置相关的名称(后面会配置到GitHub Action当中)
Secret则写Name相对应的值
我这里配置了三个值，分别为：
SERVER_ADDRESS 服务器地址
SERVER_USER 服务器登录用户名
SSH_PEM_KEY 登录使用的密钥文件内容

后端自动拉取工作流

在你的项目根目录下，创建.github/workflows/deploy-dev.yml文件，内容如下：

name: Deploy to Dev Server
on:
  push:
    branches:
- dev
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
- name: Checkout Code
        uses: actions/checkout@v3
- name: Add SSH Key
        run: |
          echo "${{ secrets.SSH_PEM_KEY }}" > deploy_key.pem
          chmod 600 deploy_key.pem
- name: Run deployment script over SSH
        uses: appleboy/ssh-action@master
        with:
            host: ${{ secrets.SERVER_ADDRESS }}
            username: ${{ secrets.SERVER_USER }}
            key_path: deploy_key.pem
            script_stop: true
            script: |
              sudo -u www bash -c '
              cd /www/test-project
              git pull origin dev'
    
- name: Cleanup
        run: rm -f deploy_key.pem

接下来，我们将对上述代码逐行进行详细解释。

配置文件结构

name: 定义工作流的名称。在 GitHub Actions 界面中显示为 “Deploy to Dev Server”。
on: 指定触发条件。这里配置为push到dev分支时触发工作流。

作业配置 (jobs)

deploy: 定义一个名为deploy的作业，表示执行实际的部署过程。
runs-on: 指定运行环境，ubuntu-latest表示使用最新的 Ubuntu 系统作为虚拟环境。

步骤配置 (steps)

每个步骤代表自动化任务中的一个执行单元，按顺序依次执行。

1.Checkout Code

- name: Checkout Code
  uses: actions/checkout@v3

作用：从 GitHub 仓库中检出代码。
说明：该步骤会将dev分支的代码拉取到 GitHub Actions 虚拟机中，为后续步骤做好准备。

2.Add SSH Key

- name: Add SSH Key
  run: |
    echo "${{ secrets.SSH_PEM_KEY }}" > deploy_key.pem
    chmod 600 deploy_key.pem

作用：将存储在 GitHub Secrets 中的 SSH 私钥写入文件deploy_key.pem中，并将文件权限设置为 600（只有文件拥有者有读写权限）。
说明：GitHub Secrets 存储的敏感信息可以通过${{ secrets. }}引用。这里的SSH_PEM_KEY包含服务器的私钥信息，用于后续的 SSH 连接。

3.Run deployment script over SSH

- name: Run deployment script over SSH
  uses: appleboy/ssh-action@master
  with:
      host: ${{ secrets.SERVER_ADDRESS }}
      username: ${{ secrets.SERVER_USER }}
      key_path: deploy_key.pem
      script_stop: true
      script: |
        sudo -u www bash -c '
        cd /www/test-project
        git pull origin dev'

作用：通过 SSH 连接到远程服务器并执行部署命令。
说明：
host：服务器地址，保存在 GitHub Secrets 中（如SERVER_ADDRESS）。
username：用于登录服务器的用户名（如SERVER_USER）。
key_path：私钥文件的路径，指定为刚才创建的deploy_key.pem。
script_stop：设置为true，表示如果 SSH 脚本执行中发生错误，会停止整个工作流。
script：SSH 会话中执行的具体命令。
sudo -u www bash -c ‘…’：切换到www用户执行脚本，以确保文件的所有者正确。
git pull origin dev：从远程仓库的dev分支拉取最新代码，更新服务器端代码。

4.Cleanup

- name: Cleanup
  run: rm -f deploy_key.pem

作用：删除 SSH 私钥文件，防止在后续步骤或其他作业中被意外泄露。
说明：安全性考虑，这一步非常重要，防止密钥文件在虚拟机中遗留。

自动化前端构建工作流

name: Deploy to Dev Server
on:
  push:
    branches:
- dev
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
- name: Checkout Code
        uses: actions/checkout@v3
- name: Add SSH Key
        run: |
          echo "${{ secrets.SSH_PEM_KEY }}" > deploy_key.pem
          chmod 600 deploy_key.pem
- name: Run deployment script over SSH
        uses: appleboy/ssh-action@master
        with:
            host: ${{ secrets.SERVER_ADDRESS }}
            username: ${{ secrets.SERVER_USER }}
            key_path: deploy_key.pem
            script_stop: true
            script: |
              sudo -u www bash -c '
              cd /www/test-project
              git pull origin dev
              npm install
              npm run build'
- name: Cleanup
        run: rm -f deploy_key.pem