VUE SSR项目部署

VUE项目中个人感觉还是使用vue官方提供的vue-cli脚手架来构建项目的人比较多,相关的文档也总结了很多,而我的项目是采用vue-ssr即服务器端渲染,项目架构来源与尤大在git-hub上的开源项目——vue-hackernews-2.0,想了解的自行在git-hub上搜索
本篇主要来记录一下项目部署的流程:
1.项目在本地开发完成后,需要打包编译,执行以下命令

npm run build

正常执行后会在项目中生产一个dist文件夹,目录结构如下:

dist中会生产很多静态文件,包括js、css、图片资源等,以及vue-ssr-bundle.json文件!

2.先在本地部署一下,执行

npm start

正常执行后,可以看到项目已经运行,当然端口号在server.js中自行设置(此处设3000端口)

先来介绍一下cross-env:
是什么——就是一个脚本!
干什么——运行跨平台设置and使用环境变量 !
可以看一下package.json文件中script中的配置:

 

当我们执行npm start时,就要用到cross-env;如图我们设置了NODE_ENV=production;开发过程中执行npm run dev,根本就没用到cross-env。

如果没有安装cross-env,就会报错。解决办法就是在本地安装cross-env:

npm install --save-dev cross-env

正确安装之后,重新执行npm start 运行正常;

注意: 如果你的eslint版本设置为4.x以上,会存在兼容问题,所以,一般会将eslint版本设置为3.x。

 

3.本地已经搞定,接下来就是服务器部署了!

此时要注意一个问题,vue ssr的项目打包之后生产的dist文件夹跟使用vue-cli构建的项目不太一样,vue-cli项目打包之后,在dist目录中会生产一个index.html的文件,部署时直接将dist文件夹扔到服务器上即可,然后访问到dist目录中的index.html

但是vue ssr项目打包之后没有类似与index.html的入口文件,部署也不是单纯的把dist目录扔上去;
1)首先可以把工程目录里面的node_modules和src文件夹干掉,以便于压缩和部署到服务器(当然也可以整个项目打包,只是耗费的时间会更多) 由于服务器是linux系统,所以将项目压缩成了project.zip文件
2)将打包之后的project.zip直接放到服务器的某个目录下,这个目录没有什么要求,可放到了tomcat目录下面,执行 解压到当前目录

unzip project.zip

由于本地已经将node_modules依赖删除,此时需要在服务器重新初始化,执行

npm install

如果你的node_modules文件夹未删除,直接放到了服务器,那么可省略该步骤。

(PS:以上的步骤需要一个大前提,就是服务器上必须全局安装了node,关于linux系统如何全局安装node,自行查看
如果你在执行npm install时报错,首先请排查一下你的服务器是否可以联网,可执行以下命令: ping 'http://baidu.com' ,如果能拿到数据,表示可以联网。
4)接下来就是在服务器启动项目了,执行 npm start

当然此时又报错了,还是cross-env的错,还需要再服务器上全局安装cross-env

npm install -g cross-env

安装成功之后,再一次启动 npm start ,很好,项目启动成功了。

PS:当然不会那么顺利,此时去访问地址时,页面访问失败。。。
排查记录:

  a.首先排查一下服务器是否设置了防火墙,执行以下命令关闭

systemctl stop firewalld

service  iptables stop

  b.然后排查服务器是否对外暴露了3000端口,如果没有请修改配置文件,过程很麻烦,自行搜索。

  c.3000端口对外暴露成功,如果依然访问不了,还是更换端口吧,直接再服务器里面修改server.js文件的端口号,改成了tomcat对外暴露的端口。

最后大功告成,执行 npm start ,项目启动成功,页面访问正常!

补充一点:
当项目开发完成,真正部署到客户服务器端时:
单纯的使用npm start 启动项目是不行的,因为端口会随着shell端口的关闭而关闭;
需要使用nohup npm start 来启动项目!
项目启动完成后,地址可以永久访问。
当需要重新部署时,要杀掉当前占用端口的进程,关于杀进程的指令:
1.首先查询占用端口的进程:lsof -i:18081

2.然后杀掉进程: kill -9 11073

参考:https://blog.csdn.net/LKFOOD/article/details/88836427

posted @ 2019-08-13 11:23  czl11  阅读(1007)  评论(0编辑  收藏  举报