云效+小皮（nginx） vue项目部署（保姆级）

云效+小皮（nginx） vue项目部署（保姆级）

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

nginx的部署是热部署，只需要替换文件即可实现部署，因此相比较后端就简单了许多。

---

一、云效

新建流水线

选用下图的模板即可

先选择要拉取的仓库以及分支，根据自己的情况选择不同的仓库地址

删除不需要的环节，主要使用的环节采用下图的即可，如果需要配置测试的话，可以自行配置，此处不进行讲解

nodejs的配置

主要需要进行修改的就是nodejs的版本以及node运行的代码

云效的nodejs初始化自带npm，cnpm和yarn，其他的包管理工具需要自行下载，上图所示我需要使用pnpm因此是自行下载，然后使用pnpm进行打包，
注：如果文件nodejs的打包太大的话，会出现内存溢出的现象，设置NODE_OPTIONS=–max-old-space-size=16384，如果还是内存溢出，推荐放弃使用流水线部署。

构建物上传，如果打包之后构建物不在根目录下，需要先cd进入到对应的目录内，因为是vue项目，打包之后一般都是dist文件夹，所以选择dist文件即可，因为我希望后面的包可以顶掉前面的包，我的包名称就采用了固定的名字，这样liunx的命令书写就简单了很多。

主机部署

选择制品名称的话，选择前面已经打包好的文件

主机组的配置

第一次部署的话，是没有主机组的，因此，需要先新建一个主机组
点击新建主机组回调转到对应的主机组页面

如无特殊需求，只修改名称让自己可以找到即可

新建新的主机
这个地方应该是支持，同时发布到多台服务器上，但是因为我这个地方就只有一台服务器，因此每个主机组内绑定一台主机即可

因为小皮是部署在自己的服务器上的，因此复制下面的文字，然后粘贴到自己小皮或者nginx所在的服务器上，直接运行即可，他会自己进行下载东西，等到运行完成之后，刷新之后，就可以看淡多出来一台主机

回到云效，即可选择刚才创建的主机组

下载路径（小皮）

路径为下方圈出的网站目录拼接上dist.tgz

以上图的网站目录为例，因为路径为/www/admin/localhost_82/wwwroot并且前面设置的打包文件名为dist
因此这个地方就可以填写 /www/admin/localhost_82/wwwroot/dist.tgz

下载路径（nginx）

一般nginx的文件都是放在nginx下的html文件夹下，自己根据自己的情况把上面的/www/admin/localhost_82/wwwroot路径替换到html路径下即可

部署脚本

因为上面的路径为/www/admin/localhost_82/wwwroot因此需要先进入到对应的文件夹，然后，删除dist.tgz外的其他文件，直接解压即可部署完成

cd   /www/admin/localhost_82/wwwroot
find . -mindepth 1 ! -name 'dist.tgz' -exec rm -rf {} \;
tar -xzf dist.tgz

而后直接运行即可