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-server-bundle.json文件！

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

npm start

正常执行后，可以看到项目已经运行，当然端口号在server.js中自行设置（多为8080端口）

当然不是所有的流程都这么顺利····我第一次启动时，报了一个cross-env的错，如图：

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

当我们执行npm start时，就要用到cross-env；如图我们设置了NODE_ENV=production；至于为什么开发过程中执行npm run dev不会报错也可以看到原因了，因为根本就没用到cross-env

报错的解决办法就是在本地安装cross-env，

npm install --save-dev cross-env

正确安装之后，重新执行npm start 运行正常；

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

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

npm install

如果你的node_modules文件夹未删除，直接放到了服务器，那么可省略该步骤
（PS：以上的步骤需要一个大前提，就是服务器上必须全局安装了node，关于linux系统如何全局安装node，自行查看
如果你在执行npm install时报错，首先请排查一下你的服务器是否可以联网，可执行以下命令： wget 'http://baidu.com' 出现以下提示，表示可以联网

4）接下来就是在服务器启动项目了，执行 npm start
当然此时又报错了，还是cross-env的错，还需要再服务器上全局安装cross-env

npm install -g cross-env

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

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

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

systemctl stop firewalld

service  iptables stop

• 然后排查服务器是否对外暴露了8080端口，如果没有请修改配置文件，过程很麻烦，自行搜索
• 8080端口对外暴露成功，然而依然访问不了，还是更换端口吧，直接再服务器里面修改server.js文件的端口号，我是改成了tomcat对外暴露的端口

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

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