传统的前端发包部署通过本地打包后，使用ftp工具或者直接登录服务器将文件放到指定的目录内；新一代的前端工程化模式下通过jenkins、docker等一系列工具进行自动化部署。
前者步骤重复繁琐，后者对大部分前端同学来说上手又需要学习成本，今天这篇文章只需要几步，让各位实现免费且好用的前端自动化部署。
这里我们使用github提供的actions工作流来实现我们的需求
切换至Actions,点击按钮添加我们的第一个工作流
这里直接贴main.yml文件，大家可以直接复制过去，修改参数成自己的即可使用
# ci.yml
name: Vue3 Template Cli CI # 工作流名称
on: # on指的是触发工作流的条件
push: # 我们这里触发条件设定为push推送代码时触发，同时也可以设为数组[push,pull_request]
branches: # 限定分支
- main # 指定为main分支，只有在main分支推送代码才会去触发
jobs: # 我们的工作流主体
build-and-deploy: #job_id 可在同级指定多个任务
# 这里有未曾列举的参数
# needs: job_id_2 指运行job_id_2后再去执行当前任务
# name: 任务的相关说明
concurrency: ci-${{ github.ref }} # 使用并发
runs-on: ubuntu-latest # 运行的虚拟机环境 必须
steps: # 每个任务所执行的步骤
- name: Checkout ️ # 将代码拉取到虚拟机
uses: actions/checkout@v3 # 使用的插件
- name: Install and Build # 安装依赖、打包，如果提前已打包好无需这一步
run: |
npm install # 装包
npm run build # 打包
- name: copy dist fil with scp
uses: wlixcc/SFTP-Deploy-Action@v1.2.4 # 所需的ftp工具，将打包内容进行服务器上传
with: # 这里是上传服务器所需的一些参数
server: ${{ secrets.REMOTE_HOST }} # 服务器ip地址
username: 'root' # 账号
password: ${{ secrets.REMOTE_PASSWORD }} # 密码
port: 22 # 端口号
local_path: './vue3-template-cli' # 需要进行上传的文件夹
remote_path: '/usr/share/nginx/html' # 文件上传所在目录
sftp_only: true # 只允许sftp上传
可以看到服务器上传时需要将地址、账号密码以及目录相关信息写在配置文件中，这显然是不合理的，别人可以很轻易的获取我们服务器的信息。这里我们将重要信息通过github提供给Actions使用的密钥进行配置。
在这里进行一些重要信息的存储，通过${{}}的方式进行使用即可。
完成以上就可以进行保存了
点击Commit Changes
开始执行工作流
稍等片刻可以看到我们的任务执行成功
登录服务器可以看到前端包也进行过了更新，至此我们的部署流程全部实现啦！！！
如果觉得对自己有用，不妨点个赞吧！
