前端next工程自动化部署到你的宝塔

背景

程序员的日常，总有一个自己的项目，不管是博客，还是一些日常应用，还是好久都不维护的一些奇怪的想法，总是需要一些前端页面去做一些应用展示，目前前端工程化已经逐渐普遍，需要打包，部署等一系列的操作。

这片文章将详细的带你将你的项目部署到你的机器上，机器默认是新机器，项目默认是老项目，代码维护在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情报局】留言，尽可能帮你解决问题