我要部署一个项目,我大喊!!
怎么做?
先把代码 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
再编译,成功
附上 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/