前端 Node 项目（Vue）通过 GitHub Actions 流水线实现自动化构建部署

十一月 2, 2024 / 技术分享

> 本文主要讲的是如何将一个前端 Node 项目（Vue）通过 GitHub Actions 流水线构建自动化部署到服务器上，需要将代码部署到 GitHub，并拥有一台已经部署 Nginx 的服务器。

### 1. 新建流水线构建文件

在项目的根目录下新建 `.github/workflows` 文件夹并在文件夹下新建 `deploy.yml` 文件并 git 提交到项目仓库，文件内容如下：
```yaml
name: Deploy
on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]
jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [ 20.x ]
    steps:
      - uses: actions/checkout@v4
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
      - name: Build
        run: |
          npm install -g pnpm
          pnpm install
          pnpm run build
      - name: Delete files
        run: sshpass -p ${{ secrets.HOST_USER_PASSWORD }} ssh -o StrictHostKeyChecking=no ${{ vars.HOST_USER_NAME }}@${{ vars.HOST }} "cd ${{ vars.DEPLOY_PATH }} && rm -rf ${{ vars.DEPLOY_PATH }}/*"
      - name: Upload files
        run: sshpass -p ${{ secrets.HOST_USER_PASSWORD }} scp -r -o StrictHostKeyChecking=no ./dist/* ${{ vars.HOST_USER_NAME }}@${{ vars.HOST}}:${{ vars.DEPLOY_PATH }}
```

### 2. 设置项目 Secrets 和变量

打开 GitHub 项目仓库，然后点击【Settings】，如下图所示：
![](https://godcheese.com/file/raw/7258351668083820460)

接着在左侧菜单栏中点击 【Secrets and variables】 下的 【Actions】，如下图所示：
![](https://godcheese.com/file/raw/7258351001743132587)

然后再点击中下方的绿色按钮【New repository secret】新增 Secret，Secret 名为 `HOST_USER_PASSWORD` Secret 内容为服务器用户（如：root 或其它用户）的密码，以让构建脚本结束后将打包好的静态文件上传到服务器，此处设置的内容不会在 GitHub 构建时明文展示。
```
Secret 名：HOST_USER_PASSWORD
内容：123456（root 或其它用户密码）
```

接下来建立变量，点击【Variables】如下图所示：
![](https://godcheese.com/file/raw/7258358036031342509)

并点击中下方的绿色按钮【New repository variable】以新增变量（新增方式与 Secrets 类似）：
```
变量名：DEPLOY_PATH 
内容：/www/wwwroot/demo (服务器上的部署路径)

变量名：HOST
内容：0.0.0.0（服务器 IP）

变量名：HOST_USER_NAME
内容：root（用于部署的服务器用户名）
```
新增完后如下图所示：
![](https://godcheese.com/file/raw/7258368376219633597)

### 3. 提交构建并部署

将项目代码修改后提交到 main 分支，接着打开 GitHub 项目页面中的【Actions】，可以看到已有流水在自动化构建了，如下图：
![](https://godcheese.com/file/raw/7258362672821831602)

部署成功，如下图所示：
![](https://godcheese.com/file/raw/7258367337609299898)

### 4. 错误排查

1. 流水线提示 `ssh: connect to host 47.242.79.210 port 22: Connection timed out`，考虑是 22 端口未开，防火墙开下端口，然后重新触发构建。
![](https://godcheese.com/file/raw/7258363868823422899)

2. 流水线提示 `rm: cannot remove '/www/wwwroot/demo/example.html': Permission denied`，考虑是部署用户（非 root 用户）没有 demo 这个文件夹的 write 操作权限，root 用户登录服务器，执行命令`chomd 757 /www/wwwroot/demo`，然后重新触发构建。
![](https://godcheese.com/file/raw/7258365289492907956)

发表评论取消回复

0 条回应：“前端 Node 项目（Vue）通过 GitHub Actions 流水线实现自动化构建部署”

发表评论 取消回复

0 条回应：“前端 Node 项目（Vue）通过 GitHub Actions 流水线实现自动化构建部署”

发表评论取消回复