Github Action实现前端项目自动化部署

Github Action实现前端项目自动化部署

实现背景

在做自己的个人项目时，想要对每次提交到仓库的代码（相当于某个功能的里程碑）进行自动化部署，以便他人能快速查看效果，于是便有了这篇文章

技术选型

使用Jenkins

本人之前尝试使用过Jenkins实现前后端分离部署，但Jenkins有个弊端就是部署其成本较大，可能还需涉及Shell脚本的编写，为了提高项目上线的进度，放弃该方案

使用Vercel

去过哈利波特魔法学院进修过的同学可以尝试使用Vercel相关的在线托管平台，类似的还有Replit、Cloudflare Worker等 ，由于网络不稳定原因，放弃该方案

使用Github Action

通过提交到远程仓库的代码触发自动构建，无需部署【Jenkins】或依赖其他平台【Vecrel等】，故选择该方案

技术实现

服务器 × 1（装有nginx或openresty）

创建 Action secrets

在你远程仓库上找到Settings，对该仓库进行设置，在左侧找到 Security > Secrets and variables > Action

在下方添加相应的密钥

• DESTINATION_PATH：生成dist文件夹目标路径
• PORT：服务器scp端口号（与ssh端口相同），这里为22
• SERVER_HOST：服务器主机地址
• SERVER_USER：登录服务器用户名（建议新建一个用户，用root登录有一定风险）
• SSH_PRIVATE_KEY：ssh密钥，用于登录服务器

配置服务器密钥 SSH_PRIVATE_KEY

在自己电脑上打开中终端，生成ssh密钥

ssh-keygen -t rsa -b 4096 -C "Github Action"

注意生成密钥的路径（这里演示的是在桌面生成）

将生成的密钥（不带.pub）写入仓库里的secrets变量 SSH_PRIVATE_KEY

将公钥（带有.pub）追加到服务器的 ~/.ssh/authorized_keys 文件内（没有该文件则自己新建）

配置 nginx

创建相应的静态网站，打开静态资源路径，设置 DESTINATION_PATH

如：/opt/1panel/apps/openresty/openresty/www/sites/xxx/index/dist

我这里使用1Panel进行管理，使用的是Openresty，默认生成的路径只有到index，最后的dist是github action打包后会生成dist，推送到服务器后自动解压文件，于是有了dist这个目录，后面需要修改opentrsty静态资源配置

这里可在本地打包成dist上传服务器部署查看效果

修改配置，添加dist目录

配置 Github Action

在项目根目录下新建.github文件夹，创建相关部署脚本deploy.yml

官方文档：GitHub Actions 文档 - GitHub 文档

name: Deploy to Server

on:
  push:
    branches:
      - main    # 注意是main分支还是master分支

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

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: "18"  # 注意你项目的node版本

      - name: Install dependencies and build
        run: |
          npm install
          npm run build

      - name: Deploy to Server
        uses: appleboy/scp-action@v0.1.5
        # see https://github.com/appleboy/scp-action/tree/v0.1.5/
        with:
          host: ${{ secrets.SERVER_HOST }}
          username: ${{ secrets.SERVER_USER }}
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          port: ${{ secrets.PORT }}
          source: "dist/*"
          target: ${{ secrets.DESTINATION_PATH }}

提交到远程仓库后会即可自动触发Action构建