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

FE情报局

发布于 2023-01-31 11:26:23

1.8K2

发布于 2023-01-31 11:26:23

文章被收录于专栏：FE情报局

背景

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

这片文章将详细的带你将你的项目部署到你的机器上，机器默认是新机器，项目默认是老项目，代码维护在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是你自己的项目名称，自此，终于没问题了，测试了几遍发现都更新了