前言

本教程主要介绍通过 Github Action 自动化部署前端项目，这里就不阐述什么是 Github Action，要了解的朋友可以参考GitHub Actions 入门教程

准备

1. 在服务器配置nginx指向前端静态资源

server {
    listen 80;
    server_name note.renjianzahuopu.store;
    location / {
        index index.html;
        root  /home/note/production/;
    } 
}

2. 服务器创建秘钥对

开始

1. 创建 Github Action

2. 配置秘钥

当需要使用一些不能公开的参数，比如 服务器ip，用户名等，我们可以通过 Actions secrets来创建。

3. 配置 Github Action

主要分了几部

• 1. 拉取master分支的最新代码。
• 2. 设置node版本号
• 3. 缓存依赖
• 4. 安装依赖
• 5. 打包
• 6. 上传资源到指定路径

name: note build
# 触发workflow的条件
on:
    push:
        # 只有master分支发生push事件时，才会触发workflow
        branches: [master]
    pull_request:
        branches: [master]

env:
    SERVER_PRIVATE_KEY: ${{ secrets.SERVER_PRIVATE_KEY }} # 服务器私钥
    SERVER_HOST: ${{ secrets.SERVER_HOST }} # 服务器IP地址
    USER_NAME: ${{ secrets.USER_NAME }} # 服务器用户名
    cache-name: note

# jobs表示执行的一项或多项任务
jobs:
    build: # 任务的job_id，具体名称自定义，这里build代表打包
        runs-on: ubuntu-latest # runs-on字段指定运行所需要的虚拟机环境。注意：这个是必填字段
        steps:
            - uses: actions/checkout@master

            - uses: actions/setup-node@v1
              with:
                  node-version: v14.17.0

            #缓存依赖
            - name: Cache nodemodules
              uses: actions/cache@v1
              env:
                  cache-name: cache-node-modules
              with:
                  # 需要缓存的文件的路径
                  path: ./node_modules 
                  # 对缓存的文件指定的唯一标识
                  key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./package.json') }} 
                  # 用于没有再找目标key的缓存的backup选项
                  restore-keys: |
                      ${{ runner.os }}-build-${{ env.cache-name }}-
                      ${{ runner.os }}-build-
                      ${{ runner.os }}-

            # 装依赖
            - name: Install
              run: yarn

            # 打包
            - name: Build
              run: yarn build

            # 上传打包资源
            - name: Deploy
              uses: easingthemes/ssh-deploy@v2.0.7
              env:
                  SSH_PRIVATE_KEY: ${{ env.SERVER_PRIVATE_KEY }}
                  ARGS: '-avz --delete'
                  SOURCE: 'dist/'
                  REMOTE_HOST: ${{ env.SERVER_HOST }}
                  REMOTE_USER: ${{ env.USER_NAME }}
                  TARGET: /home/note # 服务器目标路径

效果

1. 部署步骤

2. 是否使用依赖缓存对比

Github地址