小学生必看：如何通过GitHub Actions实现前端自动化部署

第一次接触自动化部署，做个笔记，自认为本篇笔记比较适合新手。

CI/CD = Continuous Integration / Continuous Deployment = 持续集成 / 持续部署，CI负责构建，CD负责部署。

以前我上线项目的时候，需要先git push后再本地打包项目，再手动登录服务器，通过FileZilla等scp工具将自己的本地dist下的文件拖拽到服务器对应目录下，刷新前端，生效！

# 打包项目
pnpm run build
# 将dist目录下的文件，上传到mydomain.top服务器的/www/html文件夹（也就是前端项目所在路径）
scp -r ./dist/ root@mydomain.top:/www/html 

其实没觉得流程多复杂，也可能是我业务不够复杂，只是好奇CICD的流程，实践了一番。

以Nginx服务器为例，域名设为 mydomain.top，端口80，前端项目Vue对应的服务器目录为/www/html。该网站的Nginx配置如下：

    server {
        listen       80;
        listen       [::]:80;
        server_name  localhost mydomain.top;
        root         /www/html;
        index        index.html;
        

        location / { 
            # 禁用缓存以便效果立即显现
            add_header Cache-Control "no-cache, no-store, must-revalidate";
            add_header Pragma "no-cache";
            add_header Expires 0;

            try_files $uri $uri/ /index.html; 
        }
    }

一、大致流程

本文通过Github Action实现自动化配置。GitHub 服务器可以监听仓库中的事件（如push、pull Request合并等），当事件发生时，会根据仓库中的 .github/workflows 目录下的 YAML 配置文件，启动对应的工作流。

如提交并推送改动到远程仓库时，github服务器能自动启动打包和部署流程，将打包后的文件复制到开发者服务器的指定目录中，实现自动部署。

二、配置密钥

既然github能将文件放在开发者服务器，github就一定得有访问开发者服务器的ssh权限。以前登录服务器需要像下面这样先ssh然后手动输入密码，但是自动化部署可不能手动啊，自动化讲究快速无感！

ssh user@mydomain.top
# 输入密码

SSH 密钥可以避免手动输入密码。传统的登录方式是“账号+一串密码”，而 SSH 密钥登录则是“一对文件”。给开发者服务器部署ssh公钥+给github仓库配置ssh私钥后，github可免密码登录开发者服务器。

# 生成 SSH 密钥对
ssh-keygen -t rsa -b 4096 -f github_actions_key -N ""
# 将生成的公钥上传开发者服务器
ssh-copy-id -i github_actions_key.pub user@mydomian.top

在本地电脑上执行以上2个命令，第一个可在本地生成公私密钥对文件；第二个可将公钥上传到开发者服务器。

公钥的模样：

本地有了私钥，服务器有了公钥，以后本地登录服务器时，如果携带私钥就可以不必输入密码了：

ssh -i github_actions_key root@mydomian.top

现在还仅仅是本地可免密登录，只要github配置了私钥，github也可以免密登录！

配置ssh密钥界面： https://github.com/settings/ssh 

这样就算配置好了ssh密钥了，github后期自动化时可直接访问开发者服务器了！

三、工作流脚本

在项目中写上 .github/workflows/deploy.yml：

name: Deploy to Server # 工作流名称：Deploy to Server

on:
  push:
    branches: [ main ] # 触发条件：push代码到main分支时执行

jobs:
  deploy: # 定义一个名为 deploy的任务
    runs-on: ubuntu-latest # 运行环境使用GitHub 提供的最新 Ubuntu 虚拟机

    steps: # 具体代码
      - name: Checkout code
        uses: actions/checkout@v4  # 从仓库拉取代码

      - name: Set up Node.js
        uses: actions/setup-node@v4 # 安装 Node.js 20
        with:
          node-version: '20'

      - name: Install dependencies
        run: npm install # 安装项目依赖

      - name: Build project
        run: npm run build # 构建项目，产生dist目录

      - name: Deploy to server
        uses: appleboy/scp-action@master
        with: # 通过 SCP 上传到服务器
        # 使用 SSH Key​ 登录服务器,把虚拟机 dist/目录,拷贝到服务器的 /www/html/目录下
          host: ${{ secrets.SERVER_HOST }}
          username: ${{ secrets.SERVER_USERNAME }}
          key: ${{ secrets.SERVER_SSH_KEY }}
          port: ${{ secrets.SERVER_PORT || 22 }}
          source: "dist/"
          target: "/www/html/"

      - name: SSH and set permissions
        uses: appleboy/ssh-action@master
        with: # 登录服务器，整理部署目录，并设置正确的文件权限
          host: ${{ secrets.SERVER_HOST }}
          username: ${{ secrets.SERVER_USERNAME }}
          key: ${{ secrets.SERVER_SSH_KEY }}
          port: ${{ secrets.SERVER_PORT || 22 }}
          script: |
            echo "Deploying to mydomain.top..."
            mv /www/html/dist/* /www/html/
            rm -rf /www/html/dist
            # 设置正确的权限
            chown -R $USER:$USER /www/html
            echo "Deployment completed successfully!"

这段配置用于当代码被推送到 main分支时，自动构建项目并部署到远程服务器。

其中的${{ secrets.SERVER_HOST }}、${{ secrets.SERVER_USERNAME }}、${{ secrets.SERVER_SSH_KEY }}、${{ secrets.SERVER_PORT || 22 }}4个变量，需要在github里提前配置，其中${{ secrets.SERVER_SSH_KEY }}已经在前面配置过了。

SERVER_HOST、SERVER_USERNAME、SERVER_PORT分别代表开发者ip、用户名、ssh端口，相比于明文更加安全。

上面的工作流等价于本地执行以下命令：

# 1. 拉取最新代码
git pull

# 2. 安装Node环境（本地其实不必执行）

# 3. 安装依赖
npm install

# 4. 构建打包（生成 dist）
npm run build

# 5. 把 dist 上传到服务器
scp -r -i github_actions_key dist/ root@mydomain.top:/www/html/

# 6. 登录服务器
ssh -i github_actions_key root@mydomain.top

# 7. 把 dist 里的文件移到根目录
mv /www/html/dist/* /www/html/

# 8. 删除多余的 dist 文件夹
rm -rf /www/html/dist

# 9. 设置权限
chown -R $USER:$USER /www/html

四、Githuib Action

github actions tab里可以看到虚拟机的详细工作日志。

有部分工作是在github虚拟机上进行，部分在开发者服务器上进行。

自动部署就能完成啦！