GitHub Actions 部署前端项目

本文涉及的产品
云服务器 ECS,每月免费额度200元 3个月
云服务器ECS,u1 2核4GB 1个月
简介: 先把代码 npm run build,把生成的 dist 拿来,登录服务器,到指定目录页面,打开 ftp,手动上传 dist 中的文件

我要部署一个项目,我大喊!!


怎么做?


先把代码 npm run build,把生成的 dist 拿来,登录服务器,到指定目录页面,打开 ftp,手动上传 dist 中的文件


其中你要开启你的 nginx 服务


你每一次想部署项目,就要先在本地打包,然后登录服务器,再打开 ftp 服务,再手动上传,这一来一回太麻烦,而且这种情况不利于多人开发,依赖的环境也许受操作系统的影响等等


总之,这不便于开发者以及不科学


我们需要持续集成


在公司中我们可以搭建 GitLab 亦或是 用 Jenkins,但是对个人,独立开发者或者只有五人以下的小公司来说,有什么可以帮我们实现自动化工作流的呢?


Github 推出了 Github Actions


GitHub Actions 是什么



GitHub Actions[1] 是 GitHub 的持续集成服务[2],于 2018 年 10 月推出[3]


持续集成由很多操作组成,比如抓取代码、运行测试、登录远程服务器,发布到第三方服务等等。GitHub 把这些操作就称为 actions


GitHub 做了一个官方市场[4],可以搜索到他人提交的 actions。另外,还有一个 awesome actions[5] 的仓库,也可以找到不少 action。


基本概念



GitHub Actions 有一些自己的术语。


(1)workflow (工作流程):持续集成一次运行的过程,就是一个 workflow。


(2)job (任务):一个 workflow 由一个或多个 jobs 构成,含义是一次持续集成的运行,可以完成多个任务。


(3)step(步骤):每个 job 由多个 step 构成,一步步完成。


(4)action (动作):每个 step 可以依次执行一个或多个命令(action)。


具体可以前往 阮一峰的这篇  GitHub Actions 入门教程[6] 了解一二


实操



我们的目的,通过 Github Action 把一个单页面应用部署到 云服务器上


具体可参考 使用  使用 Github Action 部署项目到云服务器[7]  中的操作,我讲讲在使用这位大哥写的 SFTP-Deploy-Action@v1.0 action 时遇到的坑


常见问题:



首先遇到 Load key "../private_key.pem": invalid format 的错误。


解决方案 ssh-keygen -m PEM 生成 新 key


我遇到类似的问题,以为要更新我的私钥,后来发现不是,是因为我的私钥是 openssh,改成 rsa 就没报这个错误了


错误二:Permission denied (publickey,gssapi-keyex,gssapi-with-mic,password).


免登录问题


具体步骤较多,简单来说,就是 .ssh 文件下新建一个 authorized_keys 文件,将公钥放到其中


并去 /etc/ssh/sshd_config 中修改一些配置,实现免登录


这里不细讲,具体可以 Google 查一下


错误三:


Warning: Permanently added '_\*\*' (ECDSA) to the list of known hosts.
sftp> put -r ./build/_ /home/johan/www/react-app
Multiple paths match, but destination "/home/johan/www/react-app" is not a directory


文件路径不对


错误四:


Couldn't canonicalize: No such file or directory
Unable to canonicalize path "/home/johan/www/react-app/static"


找不到 static 文件,新生成的 static 文件不能放入项目中,那就新建一个


去项目目录下 mkdir static


再编译,成功


image.png


附上 Github 地址:React-Deploy[8]


参考资料



  • GitHub Actions 入门教程[9]


  • 使用 Github Action 部署项目到云服务器[10]


  • 手把手教你用 Github Actions 部署前端项目[11]


  • 使用 GitHub Actions 实现博客自动化部署[12]


[1] GitHub Actions: https://github.com/features/actions


[2] 持续集成服务: https://www.ruanyifeng.com/blog/2015/09/continuous-integration.html


[3] 推出: https://github.blog/changelog/2018-10-16-github-actions-limited-beta/


[4] 官方市场: https://github.com/marketplace?type=actions


[5] awesome actions: https://github.com/sdras/awesome-actions


[6] GitHub Actions 入门教程: http://www.ruanyifeng.com/blog/2019/09/getting-started-with-github-actions.html


[7] 使用 Github Action 部署项目到云服务器: https://zhuanlan.zhihu.com/p/107545396


[8] React-Deploy: https://github.com/johanazhu/React-Deploy


[9] GitHub Actions 入门教程: http://www.ruanyifeng.com/blog/2019/09/getting-started-with-github-actions.html


[10] 使用 Github Action 部署项目到云服务器: https://zhuanlan.zhihu.com/p/107545396


[11] 手把手教你用 Github Actions 部署前端项目: https://segmentfault.com/a/1190000039818913


[12] 使用 GitHub Actions 实现博客自动化部署: https://frostming.com/2020/04-26/github-actions-deploy/


相关实践学习
一小时快速掌握 SQL 语法
本实验带您学习SQL的基础语法,快速入门SQL。
7天玩转云服务器
云服务器ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,可降低 IT 成本,提升运维效率。本课程手把手带你了解ECS、掌握基本操作、动手实操快照管理、镜像管理等。了解产品详情: https://www.aliyun.com/product/ecs
相关文章
|
21小时前
|
存储 应用服务中间件 持续交付
使用GitHub Actions和Nginx实现自动化部署
使用GitHub Actions和Nginx实现自动化部署
11 4
|
2天前
|
Kubernetes JavaScript 前端开发
OpenSource项目Github Trending一周回顾
OpenSource项目Github Trending一周回顾
|
2天前
|
监控 前端开发 应用服务中间件
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽(2)
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽
16 1
|
2天前
|
负载均衡 前端开发 应用服务中间件
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽(1)
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽
19 1
|
6天前
|
前端开发 微服务 Python
轻松搜寻GitHub宝藏!掌握这些技巧快速找到理想项目
轻松搜寻GitHub宝藏!掌握这些技巧快速找到理想项目
告别龟速,从GitHub快速下载项目的技巧分享,简单又高效!
告别龟速,从GitHub快速下载项目的技巧分享,简单又高效!
|
8天前
|
Shell 开发工具 git
如何将本地项目上传到github上
如何将本地项目上传到github上
|
16天前
|
JavaScript 前端开发 应用服务中间件
蓝易云 - dockerfile部署前端vue打包的dist文件实战
这样,你的Vue应用就会在Docker容器中运行,你可以通过访问[http://localhost:8080](http://localhost:8080/)来查看你的应用。
109 0
|
18天前
|
算法 程序员 开发工具
GitHub上新!14个Python项目详细教程(附完整代码)
Python作为程序员的宠儿,越来越得到人们的关注,使用Python进行应用程序开发的也越来越多。 今天给小伙伴们分享的这份项目教程完整代码已上传至GitHub,你可以选择跟着这份教程一段一段的手敲出来这几个项目,也可以直接从GitHub上copy下来。
|
19天前
|
JavaScript 前端开发 Java
基于SpringBoot+Vue+uniapp的在线开放课程的Web前端的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的在线开放课程的Web前端的详细设计和实现(源码+lw+部署文档+讲解等)