在没有自动化部署的情况话，前端需要部署代码的流程可能是这样的：
1.yarn build:xxx build指定环境包
2.将打包文件给运维或者后台（前端有权限可省略这一步）
3.将打包文件放到服务器指定目录
亦或者是做了自动化脚本，但是每次需要后台人员手动执行脚本
可见每次都需要进行一定的沟通以及手动操作，解决这个问题，我们可以利用Github Actions实现自动化打包部署
很多时候，我们希望在提交代码，合并分支等操作的时候，需要做一些其他的操作，比如抓取代码、运行测试、运行打包、登录远程服务器、将文件上传到服务器等，而且这些操作很多时候都是类似的。基于用户的这个需求，Github推出了actions功能。
actions允许开发者将每个操作写成独立的脚本，存放到代码仓库，开发者可以将这些脚本发布，发布后的脚本可以被其他开发者引用。
有了actions,开发者不用自己写脚本，直接引用其他人的aciton即可（如果可以满足你的需求），然后整个持续集成的过程，就变成了多个actions的组合。
当你需要查找actions的时候，可以去Github Action市场搜索，点击需要的action，会进入该action的页面
点击右上角的Use latest version或者点击下拉选择版本，会弹出使用方法，点击复制使用即可
想要使用github action执行我们的脚本，需要在项目的根目录创建.github文件夹，在.github文件夹下创建workflow文件夹，在workflow文件夹下写我们的配置文件，配置文件为YAML格式，文件后缀名为.yml,workflow文件夹下可以有多个.yml文件，github会自动运行所有.yml文件。workflow文件的配置可以查看官方文档，下边贴上我的配置
name: 脚本名称 # 触发脚本的条件，develop分支push代码的时候 on: push: branches: - develop # 要执行的任务 jobs: # 任务名称 build: # runs-on 指定job任务运行所需要的虚拟机环境（必填） runs-on: ubuntu-latest # 任务步骤 steps: # 获取源码 - name: 迁出代码 # 使用action库 actions/checkout获取源码 uses: actions/checkout@master # 安装node - name: 安装node.js # 使用action库 actions/setup-node 安装node uses: actions/setup-node@v1 with: node-version: 10.16.3 # 安装依赖 - name: 安装依赖 run: npm install # 打包 - name: 打包 run: npm run build:xxx # 上传打包文件到远程服务器 - name: 上传文件到远程服务器 uses: zhenyuWang/Upload-File-Action@v1.0.1 with: username: "登录远程服务器的用户名" server: "远程服务器ip" port: "22" ssh_private_key: ${{ secrets.私钥}} # 要上传文件所在目录 local_path: "./dist/*" # 远程服务器目标路径 target_path: "/usr/local/nginx/html/xxx" 复制代码
上述脚本只需要cv到自己的文件里就好，需要注意的是私钥配置，过程如下
1.生成SSH key
ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f test -N "" 复制代码
会得到以下两个文件 (C盘用户目录下)
test.pub (public key) test (private key) 复制代码
2.配置私钥
打开github仓库，点击settings
然后点击左侧Secrets
然后点击右上角New repository secret
需要注意的是这里的私钥名称就是配置文件里的私钥名称
3.配置公钥
登录远程服务器，找到root/.ssh/authorized_keys文件，把公钥文件里的内容复制到该文件中
至此，我们的自动化打包部署就完成了，快去试下吧！
