共计 2782 个字符，预计需要花费 7 分钟才能阅读完成。
背景
程序员的日常，总有一个本人的我的项目，不论是博客，还是一些日常利用，还是良久都不保护的一些奇怪的想法，总是须要一些前端页面去做一些利用展现，目前前端工程化曾经逐步广泛，须要打包，部署等一系列的操作。
这片文章将具体的带你将你的我的项目部署到你的机器上，机器默认是新机器，我的项目默认是老我的项目，代码保护在 github 上，当然上不去 github 的能够用其它平台代替，形式办法都是相似的
筹备
以后我的我的项目是用 next 开发的，蕴含了一点服务端渲染的内容，next 和其它的我的项目还是有点区别的，然而这里我就不多说了，流程都是相似的，无非是改一些命令，我的项目曾经在 github 上
服务器用的是腾讯云，装置了宝塔相干，不晓得宝塔的可自行百度
要达到的成果
即然是自动化，那就什么都要交给机器，包含打包啊，上传等一系列的操作，你只须要往特定的分支上推送代码，而后服务器就会开始主动打包，部署，更新资源等操作，你只须要关注开发即可
将 github 我的项目下载到服务器
本人的我的项目个别都是不公开的，都是公有我的项目，所以首先第一步，须要在服务器上生成 SSH 公钥，生成之前，你须要在 ~/.ssh 目录下查看是否曾经生成，如果目录下有 id_rsa.pub 示意这个就是你的公钥，如果没有咱们须要手动生成，在服务器终端执行以下命令
ssh-keygen -o如果曾经存在，就提醒
如果没有，一路回撤，就能在 ~/.ssh 的目录下生成对应的密钥，而后咱们查看 id_rsa.pub 这个文件，应用 cat 命令，拿到文件对应的内容之后，将其粘贴到 github 对应的地位
而后保留，去服务器将你的前端工程项目 clone 下来，没有任何妨碍
宝塔面板部署
而后咱们在宝塔面板，切换到网站选项卡，至于宝塔面板以及宝塔怎么装置 登陆，就不赘述了，可能搜寻进去很多教程，选中 Node 我的项目，如果面板提醒你短少什么依赖，比方 nginx 啊，node 管理器以及 node 版本，依据提醒装置就行，实现之后你能看到以下内容
而后点击增加 node 我的项目，选中咱们方才 clone 下来的前端工程，因为 next 我的项目须要先 build 而后再 start，咱们须要将这两个命令进行合并，取名 prod
从新 pull 我的项目，能够在我的项目配置中发现 prod 命令
提交之后，会装置对应的模块，也就是 npm install，等实现之后，我的项目就会跑起来了
输出机器的 IP + 3000 端口验证，这个时候你还拜访不到，因为腾讯云服务器对端口的外网权限做了限度，增加 3000 端口，再次拜访就能够看到部署的内容了
主动获取新代码
下面只是部署一次流程，当咱们有代码更新的时候，不可能每次都 pull，而后执行 npm run prod 的操作，有没有什么好的方法呢？
必定是有的，WebHook 就能帮你实现，在宝塔的软件商店下载 WebHook 利用，而后增加 WebHook
脚本这里咱们先简略写一下
#!/bin/bash
echo ""
#输入以后工夫
date --date='0 days ago' "+%Y-%m-%d %H:%M:%S"
echo "Start"
#git 我的项目门路
gitPath="/www/wwwroot/HomePage"
echo "Web 站点门路：$gitPath"
cd "$gitPath"
git pull
yarn
yarn run prod
echo "End"而后保留
而后去 github 我的项目中的设置下，有一个 Webhooks 选项，点击增加一个 Webhooks
而后去服务器上获取密钥
填写对应的信息
即可实现，这样咱们每次 push 的时候就会忘对应的 url 上推送一条信息，咱们接管到这个信息之后就会执行对应的脚本，脚本你能够写任意内容，基本上就实现了咱们的自动化部署的流程
测试
满怀期待的进行了一下测试，推送了一段代码，而后去 github 我的项目后盾察看
发现我的项目并没有真正被更新，而后又发现 WebHook 没有日志，很奇怪，于是找到 github 的 WebHook 推送记录
第一条失败了，而后咱们多推送了几条，发现又胜利了，很奇怪
这是个小问题，目前尽管胜利了，然而因为咱们用的 node npm 启动的我的项目，全局没有对应的命令，须要增加环境变量
这样就有了 node 以及 npm 等
当我又从新试了一下之后，发现脚本跑了，然而页面并没有更新，打包也打了，也能拜访，然而资源并不是最新的，这是什么状况？
通过一番排查，最终发现，因为以后曾经有跑的 3000 端口，尽管曾经打包了最新的代码，然而并没有重启服务，我想着重启一下就能够了
想法很好，然而以后在脚本中怎么重启？怎么进行？端口被占用，那是不是将以后端口所在的 pid 杀掉就能够了，抱着这种心态，我查阅了材料，发现在宝塔外面，有个中央存了以后对应的 pid，而后就找对应的目录，发现真的有
惊不惊喜，在这个过程也发现了启动的脚本，既然都有，那就改一下
#!/bin/bash
echo ""
#输入以后工夫
date --date='0 days ago' "+%Y-%m-%d %H:%M:%S"
echo "Start"
#git 我的项目门路
gitPath="/www/wwwroot/HomePage"
echo "Web 站点门路：$gitPath"
cd "$gitPath"
git pull
rm -rf ./.next
yarn
kill -9 $(cat /www/server/nodejs/vhost/pids/HomePage.pid')
sh /www/server/nodejs/vhost/scripts/HomePage.sh
echo "End"没故障，而后测试执行，达到了想要的成果
我本认为就这样完结了，然而令人意想不到的是，我第二次再更新的时候，又提醒我端口被占用，没有方法重启？？？什么状况，我不是曾经读了对应的 pid 文件了么？
而后又是一番查阅材料，终于又发现一个宝塔 bug，当你手动去在页面执行重启操作的时候，这个 pid 文件才会更新，所以我通过命令的模式执行 HomePage.sh 这个文件并不会更新，导致文件存储的 pid 不是最新的，我去 kill 的时候并没有把以后的 pid kill 掉，真坑
坑归坑，那有没有方法解决呢？
必定是有的，那就是须要你获取以后我的项目的 pid 即可，批改一下杀掉 pid 的形式
kill -9 $(ps -ef | grep HomePage | grep -v grep | awk '{print $2}')
其中 HomePage 是你本人的项目名称，自此，终于没问题了，测试了几遍发现都更新了
总结
之后我要更新这个我的项目只须要推送对应的代码，就可能主动部署重启，当然这里只是一段对应的思维，大家在本人的我的项目中依照这个思路，一步一步将本人的我的项目变成主动打包部署构建的模式即可，极大解放了生产力，如果你有任何问题，欢送留言，我的项目中配置不明确的，也能够关注公众号【FE 情报局】留言，尽可能帮你解决问题