GitHub Actions 部署前端项目

简介: 先把代码 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/


相关实践学习
2分钟自动化部署人生模拟器
本场景将带你借助云效流水线Flow实现人生模拟器小游戏的自动化部署
7天玩转云服务器
云服务器ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,可降低 IT 成本,提升运维效率。本课程手把手带你了解ECS、掌握基本操作、动手实操快照管理、镜像管理等。了解产品详情: https://www.aliyun.com/product/ecs
相关文章
|
2月前
|
编解码 Oracle Java
java9到java17的新特性学习--github新项目
本文宣布了一个名为"JavaLearnNote"的新GitHub项目,该项目旨在帮助Java开发者深入理解和掌握从Java 9到Java 17的每个版本的关键新特性,并通过实战演示、社区支持和持续更新来促进学习。
82 3
|
2月前
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时,生成的可执行文件体积较大,通常接近 100 MB,而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时,使其能够在目标设备上独立运行,无需额外安装依赖。尽管体积较大,但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法,可以优化可执行文件的体积。
126 3
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
|
16天前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
|
24天前
|
前端开发 Unix 测试技术
揭秘!前端大牛们如何高效管理项目,确保按时交付高质量作品!
【10月更文挑战第30天】前端开发项目涉及从需求分析到最终交付的多个环节。本文解答了如何制定合理项目计划、提高团队协作效率、确保代码质量和应对项目风险等问题,帮助你学习前端大牛们的项目管理技巧,确保按时交付高质量的作品。
33 2
|
2月前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
2月前
|
JavaScript API 开发工具
使用GitHub Actions自动发布electron多端安装程序
使用GitHub Actions自动发布electron多端安装程序
43 8
|
19天前
|
前端开发 JavaScript 安全
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第7天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤。包括项目准备、安装 `javascript-obfuscator`、配置 Vite 构建以应用混淆,以及最终构建项目进行混淆。通过这些步骤,可以有效提升前端代码的安全性,防止被他人轻易分析和盗用。
|
2月前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
430 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
2月前
|
缓存 前端开发 JavaScript
前端架构思考:代码复用带来的隐形耦合,可能让大模型造轮子是更好的选择-从 CDN 依赖包被删导致个站打不开到数年前因11 行代码导致上千项目崩溃谈谈npm黑洞 - 统计下你的项目有多少个依赖吧!
最近,我的个人网站因免费CDN上的Vue.js包路径变更导致无法访问,引发了我对前端依赖管理的深刻反思。文章探讨了NPM依赖陷阱、开源库所有权与维护压力、NPM生态问题,并提出减少不必要的依赖、重视模块设计等建议,以提升前端项目的稳定性和可控性。通过“left_pad”事件及个人经历,强调了依赖管理的重要性和让大模型代替人造轮子的潜在收益
|
2月前
|
前端开发 JavaScript 开发工具
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(三)
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(三)
36 0