背景程序员在日常生活中总是有自己的项目。不管是博客，还是一些日常应用，或者是一些长期没有维护的奇葩创意，总需要一些前端页面来做一些应用展示。目前，前端工程化已经越来越普遍，需要进行打包、部署等一系列操作。本文将带你详细部署你的项目到你的机器上。机器默认为新机器，项目默认为旧项目。代码维护在github上。当然，如果你不能上github，也可以使用其他平台。方法类似。目前我的项目是用next开发的，里面包含了一些服务端渲染的内容。Next和其他项目有点不同，这里就不多说了。这个过程是相似的。无非是改了一些命令。该项目已经在github上了。服务器使用腾讯云，安装了宝塔。不知道宝塔可以自己用。百度要达到的效果是自动化，所以一切都要交给机器，包括打包。啊，上传等一系列操作，你只需要将代码推送到特定的分支，然后服务器会自动打包，部署，更新资源等操作，你只需要专注于开发去下载github项目到服务器自己的项目一般是不公开的，属于私有项目，所以第一步是在服务器上生成一个SSH公钥。生成之前，需要检查~/.ssh目录下是否已经生成。如果目录下有id_rsa.pub就说明这是你的公钥。如果没有，我们需要手动生成。在服务器端执行以下命令ssh-keygen-o。生成对应的key，然后我们查看id_rsa.pub文件，使用cat命令获取文件对应内容，粘贴到github对应位置并保存，去服务器克隆你的前端工程项目中，宝塔面板的部署没有任何阻碍。然后我们切换到宝塔面板中的网站选项卡。至于宝塔面板以及如何安装和登录宝塔，我就不赘述了。可以搜索很多教程，选择Node项目。如果面板提示缺少依赖，比如nginx、nodemanager、node版本，按照提示安装即可。完成后可以看到如下内容然后点击Addnodeproject，选择我们刚刚clone的前端项目，因为接下来的项目需要先构建然后启动，我们需要合并这两个命令，命名为prod并重新拉取项目，在项目配置中可以发现提交prod命令后，会安装对应的模块，即npminstall，完成后，项目就会运行。输入本机IP+3000端口进行验证。这个时候还是不能访问，因为腾讯云服务器限制了端口的外网权限。添加3000端口，再次访问就可以看到部署的内容了最好的办法是什么？必须有，WebHook可以帮你实现。在宝塔软件商店下载WebHook应用，然后添加WebHook脚本。这里我们简单的写#!/bin/bashecho""#Outputthecurrenttimedate--date='0daysago'"+%Y-%m-%d%H:%M:%S"echo"Start"#git项目路径gitPath="/www/wwwroot/HomePage"echo"网站路径：$gitPath"cd"$gitPath"gitpullyarnyarnrunprodecho"End"然后保存到github项目里面的设置里面，有一个Webhooks选项，点击添加一个Webhooks然后去服务器获取key并填写相应的信息即可完成，这样我们每次推送的时候都会忘记在相应的url上推送一条消息。我们收到这条消息后，就会执行相应的脚本。你可以在脚本里面写任何内容，这样就基本完成了我们的自动化部署过程。考试充满期待。测试了一下，推了一段代码，然后去github项目后台观察，发现项目真的没有更新，然后发现WebHook没有日志，很奇怪，所以找到了第一个github的WebHook推送记录失败，然后我们又推送了几个，发现又成功了。奇怪的是，这是一个小问题。目前虽然成功了，但是因为我们用nodenpm启动的项目，全局没有对应的命令，所以需要添加环境变量，让我们有node和npm等，再试的时候，发现脚本运行了，但是页面没有更新，打开包装，可以访问，但是资源不是最新的。发生了什么？经过一番排查，终于发现是因为目前3000端口一直在运行。虽然打包了最新的代码，但是还没有重启服务。本来以为重启就好了，可是脚本里怎么重启呢？如何停止？端口被占用了，杀掉当前端口所在的pid即可。抱着这种心态，查了下资料，发现在宝塔里面，有一个地方存放当前对应的pid，然后找到对应的。目录，我发现它真的令人惊讶与否。在这个过程中，我还找到了启动脚本。既然都有，那就换吧。#!/bin/bashecho""#输出当前时间date--date='0天前'"+%Y-%m-%d%H:%M:%S"echo"Start"#git项目路径gitPath="/www/wwwroot/HomePage"echo"网站路径：$gitPath"cd"$gitPath"gitpullrm-rf./.nextyarnkill-9$(cat/www/server/nodejs/vhost/pids/HomePage.pid')sh/www/server/nodejs/vhost/scripts/HomePage.shecho"End"就可以了，然后执行测试，达到了预期的效果。本以为就这样结束了，没想到的是，第二次更新的时候提示端口被占用了，没有办法重启？？？什么情况，我不是已经读取了对应的pid文件了吗？然后又查了资料，终于找到了一个宝塔bug。手动重启页面时，pid文件会更新，所以我通过命令方式执行HomePage.sh文件，并没有更新，文件中存储的pid不是最新的。我去kill的时候，并没有杀掉当前的pid。真是个坑。有办法解决吗？必须有，即需要获取当前项目的pid，修改killpid的方式kill-9$(ps-ef|grepHomePage|grep-vgrep|awk'{print$2}')其中HomePage是你自己项目的名字。从那以后，终于可以了。测试了几次后，我发现它已经更新了。总结之后，想更新这个项目，只需要推送相应的代码即可。自动部署重启，当然这只是一个对应的思路，大家可以在自己的项目中按照这个思路，一步步将自己的项目变成自动打包部署构建的模式，极大的解放生产力，如果你有任何问题，欢迎留言。如果项目中的配置不清楚，也可以关注公众号[FE情报局]留言，尽量帮你解决问题
