基于GitHub Actions工作流实现前端项目部署

本文介绍如何使用 GitHub Actions 配合 Docker 实现前端项目独立 / 持续部署在华为云服务器。

• GitHub Actions 官方文档

前言

项目基于 Docker Nginx / OpenJDK / MySQL8 容器部署，通过 docker-compose 统一编排管理/弹性扩展微服务容器。

了解 Github Actions

GitHub Actions 是一种持续集成和持续交付 (CI/CD) 平台，可用于自动执行生成、测试和部署管道。 您可以创建工作流程来构建和测试存储库的每个拉取请求，或将合并的拉取请求部署到生产环境

工作流：工作流是一个可配置的自动化过程，它将运行一个或多个作业。 工作流程在存储库的 .github/workflows 目录中定义，并在存储库中的事件触发时运行。

事件：事件是存储库中触发工作流程运行的特定活动。有关可用于触发工作流的事件的完整列表，请参阅 触发工作流的事件。

作业：作业是工作流中在同一运行器上执行的一组步骤。 步骤按顺序执行，并且相互依赖。

操作：操作是用于 GitHub Actions 平台的自定义应用程序，它执行复杂但经常重复的任务。 使用操作可帮助减少在工作流程文件中编写的重复代码量。 详情请参考官方文档。

运行程序：运行程序是触发工作流时运行工作流的服务器，如 Ubuntu Linux、Microsoft Windows 和 macOS ， 每个运行器一次可以运行一个作业。

使用 Github Actions

配置 GitHub Actions 信息

1. 头像 / Settings / Developer settings / Personal access tokens / Tokens；
2. 点击 Generate new token ( classic )，填写 Note 信息，在 Select scopes 中勾选 repo ，生成 token ；
   
3. 进入需要使用 GitHub Actions 的存储库，在存储库中填入相关配置。具体操作：
   • Settings / Secrets and Variables / Actions ；
   • 点击 New repository secret ，添加项目所需要的 secrets ；
   • HOST：远程服务器 IP ；USERNAME：服务器用户名；PASSWORD：服务器密码；Token：步骤2中生成的 token 复制过来。
     

创建 yml 文件

1. 选择 Actions 菜单，根据需要选择 workflows ，我选择 Node.js，此时，会生成一个 yml 文件模板，可按需修改~
   

2. 当然，也可以在项目根目录下手动创建 .github/workflows 目录；

3. 工作流触发后，就可以在 GitHub Actions 中查看日志。
   yml 文件

# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs

name: Node.js CI

on:
  push:
    branches: [ "master" ]
  pull_request:
    branches: [ "master" ]
env: 
  path: /root/workspace/mentor/nginx/html/
  
jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v3
    - name: Use Node.js
      uses: actions/setup-node@v3
      with:
        node-version: "16.x"
    - run: npm ci
    - run: npm run build --if-present
    
    - name: delete
      uses: appleboy/ssh-action@master
      with:
        host: ${{ secrets.HOST }}
        username: ${{ secrets.USERNAME }}
        password: ${{ secrets.PASSWORD }}
        envs: path
        script: rm -rf ${{ env.path }}*
        
    - name: copy file
      uses: appleboy/scp-action@master
      with:
        host: ${{ secrets.HOST }}
        username: ${{ secrets.USERNAME }}
        password: ${{ secrets.PASSWORD }}
        source: "dist/"
        envs: path
        target: ${{ env.path }}
        strip_components: 1