VUS-SSR项目部署

Posted on

Vue-SSR : 项目部署

抱歉这篇文章距离上篇很久，一方面是项目有点忙，一方面玩的也很用力。上次发了几个钓鱼的文章主题联想，我在朋友圈也发了一遍，很多人（假装有很多）想看vue ssr相关的东西，可能从零到一的东西太多了，也不需要我再重复发一遍。

ssr项目的部署也是困扰过我一段时间

非SSR项目部署

在做这个项目之前，前端的部署都是极为简单的，流程就是

  1. npm run build 编译打包
  2. 将打包出来的 dist 包单独放到一个库里，这里有好多个项目，push到放项目编译包的远程仓库
  3. 登陆服务器，在服务器上把包 pull 下来
  4. 如果代码托管了七牛，会登陆七牛刷新一下资源

当然，这个步骤里面省略了 nginx 配置，默认认为你的 nginx 已经配好，域名解析也做好了。

SSR项目部署

在做之前也是网上搜了不少大神的文章，看了很多别人的项目代码，讲到部署的少之又少，我所能理解的就是 npm run build 然后 npm run start ,但是问题是我又不能把整个项目都放到服务器上，生产环境我只需要把打包后的文件放到服务器上，nginx还是要配的，假设你nginx配好了，注意nginx配置的端口要跟node的端口一致，不知道部署的时候，百思不得其解，想明白了其实就是部署一个node的项目，我以前也没有发布过node的项目，迷糊了一些时间。

流程如下：

  1. npm run build 编译打包
  2. 【睁大眼睛】👀 要将1⃣️打包出来的 dist/ 文件夹 2⃣️ package.json 3⃣️ server.js 4⃣️ public/文件夹 这四样东西拿出来，放到某个远程仓库
  3. 登陆服务器，在服务器上把包 pull 下来
  4. 在服务器上npm install，这一步需要
  5. 【👀】服务器下载 pm2 进程管理工具，你可以用或者不用， pm2 start < 项目名 > --watch

请您提出疑问

我不知道如何描述的更清楚一些，如果你看到文章还是有疑问。不如在评论区留下你的疑问，我会根据您的提问来完善这个文章。

完！