手把手教你如何利用 Github Actions 部署前端项目

1. 为什么使用 Github Actions ？
2. Github Actions 是什么？
3. 开始：部署自己的前端项目
• 1、选择 Github 项目仓库
• 2、新建工作流，配置 Actions
• 3、常见的 Actions 配置
• 打版本标签 Create Tag Release
• 创建 Github Pages 站点
• 多人协作开发，云端代码检测
• 4、搭配 docker
• 4.1 项目根目录新建 Nginx 配置
• 4.2 项目根目录新建 Dockerfile 文件
• 4.3 配置容器镜像服务
• 4.3.1 第一步
• 4.3.2 第二步
• 4.3.3 第三步
• 4.4 如何跟 Actions 联动
• 5、完整的 Actions
• 6、测试流程，查看日志
4. 总结

为什么使用 Github Actions ？

众所周知，前端部署无非就是把打包之后的代码丢到 nginx html 目录下就完事了，但是每逢产品频繁改需求，甚至只是让你改线上一个字的时候，你总要重复一遍遍以下动作：修改，打包，登录服务器，上传代码，重启服务器。久而久之，别说是你受不了了，搁我旁边看着都受不了。这个时候，有没有想过有个机器人，能帮我们完成以上这些重复又没技术含量的活。没错，你猜对了，Github Actions 就是我们需要的那个机器人。

Github Actions 是什么？

大家知道，持续集成由很多操作组成，比如拉取最新代码、运行测试、登录服务器、部署服务器等，GitHub 把这些操作统一称为 Actions 。

总结

到此我们自动化部署成功，再也不要每次修改代码，手动更新线上了，后面迁移也会更方便，当然还有更多的自动化部署方式，比如直接使用 Github + 阿里云镜像仓库的触发器一样可以做到，容器服务也不仅限于阿里云，腾讯云等其他云服务厂商同样也是一样的使用方式。以上是我个人使用 Actions 的一些总结，如有错误，劳烦指正修改。当然对更多 Actions 玩法感兴趣的同学欢迎一起交流学习。当然这个仅限于个人的项目玩法，公司内部的项目有更加成熟完善的自动化方案。

原文链接：传送门