Vue-SSR : 项目部署
抱歉这篇文章距离上篇很久,一方面是项目有点忙,一方面玩的也很用力。上次发了几个钓鱼的文章主题联想,我在朋友圈也发了一遍,很多人(假装有很多)想看vue ssr相关的东西,可能从零到一的东西太多了,也不需要我再重复发一遍。
ssr项目的部署也是困扰过我一段时间
非SSR项目部署
在做这个项目之前,前端的部署都是极为简单的,流程就是
npm run build
编译打包- 将打包出来的
dist
包单独放到一个库里,这里有好多个项目,push
到放项目编译包的远程仓库 - 登陆服务器,在服务器上把包
pull
下来 - 如果代码托管了七牛,会登陆七牛刷新一下资源
当然,这个步骤里面省略了 nginx 配置,默认认为你的 nginx 已经配好,域名解析也做好了。
SSR项目部署
在做之前也是网上搜了不少大神的文章,看了很多别人的项目代码,讲到部署的少之又少,我所能理解的就是 npm run build
然后 npm run start
,但是问题是我又不能把整个项目都放到服务器上,生产环境我只需要把打包后的文件放到服务器上,nginx还是要配的,假设你nginx配好了,注意nginx配置的端口要跟node的端口一致,不知道部署的时候,百思不得其解,想明白了其实就是部署一个node的项目,我以前也没有发布过node的项目,迷糊了一些时间。
流程如下:
npm run build
编译打包- 【睁大眼睛】👀 要将1⃣️打包出来的
dist/
文件夹 2⃣️package.json
3⃣️server.js
4⃣️public/
文件夹 这四样东西拿出来,放到某个远程仓库 - 登陆服务器,在服务器上把包
pull
下来 - 在服务器上
npm install
,这一步需要 - 【👀】服务器下载 pm2 进程管理工具,你可以用或者不用,
pm2 start < 项目名 > --watch
请您提出疑问
我不知道如何描述的更清楚一些,如果你看到文章还是有疑问。不如在评论区留下你的疑问,我会根据您的提问来完善这个文章。
完!