关于nodejs+npm+vue服务webpack打包到线上服务器部署的一些坑
本文主要介绍vue+webpack打包部署到nginx服务器。node.js+npm+vue+webpack+nginx前端项目打包部署到服务器
vue/express+node.js+mongodb
因为可以需要依赖node.js,所有需要先安装node.js,步骤如下：
一、环境准备
1.首先下载安装node.js和nginx（nginx略）
Node.js安装包及源码下载地址为：https://nodejs.org/en/download/
下载解压 然后做软连接 ln -s node和npm 到/usr/bin/ 注意两者缺一不可
别忘了将node.js和npm加入到环境变量下。npm是我们要用到的包管理工具，一会vue需要用到npm命令。
2.换国内仓库源（linux很多软件yum、pip、Openstack、docker和Android等源都在国外）
由于许多npm的源都是在国外的地址，用npm安装vue和webpack特别慢，所以我们这里利用淘宝的镜像服务器。
执行命令为：
npm install -g cnpm --registry=https://registry.npm.taobao.org然后回车等待命令结束。
3.接着安装全局的vue-cli脚手架,用于帮助搭建所需的Vue的开发模板框架
命令为：
cnpm install -g vue-cli
回车，等待安装
安装完后，可以输入：
vue -V
然后回车，如果出现vue的客户端版本信息，则说明安装成功了。
4.用 npm 安装 Webpack
命令为：
cnpm install webpack -g
此时 Webpack 已经安装到了全局环境下，可以通过命令行 webpack -h 试试。
5.用 npm 安装 Gulp
命令为：
cnpm install gulp -g
6.手工创建工程项目目录或者直接git clone 你已开发好的项目
命令为：
vue init webpack vue-testgit clone https://github.com/uername/xiangmu.git7.启动调试
cd xiangmu
cnpm install(这里需要等待)
npm run dev（这个是debug部署命令）出现端口，则表示启动成功，端口监听的就是所显示的端口号，此端口号，可以在项目目录/config/index.js文件里修改。
8..至此，开发环境就搭建好了，在浏览器访问http://localhost:8080(步骤7里配置的端口号)，就可以显示vue的页面
也可以在npm install完之后，直接运行node app.js（server.js）无需步骤7然后可以通过浏览器进行访问。
二、编译部署
1、假设你在vue下开发好了前端页面，现在开始打包部署到服务器上，先在路径vue-test下输入命令：
npm run build
编译完成后会发现在vue-test文件夹下多出一个dist文件夹这里面就是编译好的文件了。
（本地已开发好的项目）
2、网上下载nginx,下载地址http://nginx.org/en/download.html，解压下载的nginx文件，然后编译安装或者yum直接安装。
安装过程略，各位自行度娘。
3、配置部署，编辑nginx/conf 下的nginx.conf，修改如下：
三、webpack 打包以及线上部署
使用webpack打包nodejs服务，并部署到线上。
1、webpack 打包
webpack 在前端领域的模块化和代码构建方面有着无比强大的功能，通过一些特殊的配置甚至可以实现前端代码的实时构建、ES6/7新特性支持以及热重载，这些功能同样可以运用于后台 nodejs 的应用，让后台的开发更加顺畅，服务更加灵活，怎么来呢？往下看。
先梳理下我们将要解决的问题：
- node端代码构建
- ES6/7 新特性支持
- node服务代码热重载
const path = require("path")
const fs = require("fs");
const nodeModules = {};
fs.readdirSync("node_modules")
.filter(function(x) {
return [".bin"].indexOf(x) === -1;
})
.forEach(function(mod) {
nodeModules[mod] = "commonjs " + mod;
});
module.exports = {
mode: 'production',
entry: './server.js',
output: {
path: path.resolve(__dirname, "dist"),
filename: "musicServer.js",
chunkFilename: "[name].chunk.js",
libraryTarget: "commonjs"
},
node: {
fs: 'empty',
child_process: 'empty',
tls: 'empty',
net: 'empty'
},
target: "node",
externals: nodeModules,
};
externals 是不许设置的。因为 这样打包的话，一些 npm 中的模块也会被打包进这个 musicServer.js，还有 node 的一些原生模块，比如 fs/path 也会被打包进来，这明显不是我们想要的。所以我们得告诉 webpack，你打包的是 node 的代码，原生模块就不要打包了，还有 node_modules 目录下的模块也不要打包了。
2、线上部署使用pm2能自动守护进程。
一般在linux是部署，常用 nohup command > out.log 2>&1 & 进行部署，但是用在nodejs服务上时，关掉终端terminal后，nodejs 服务就自动关掉。
（nohup命令：如果你正在运行一个进程，而且你觉得在退出帐户时该进程还不会结束，那么可以使用nohup命令。& ： 指在后台运行）常用解决的方案有一些，见参考文章。本初使用 pm2进行管理，使用方法见参考文章。另外screen也可以解决但重启之后服务消失。或者写了个简单的sh脚本，把npm start命令放入。然后 nohup /root/test.sh做为启动脚本也可以。
安装pm2
npm install -g pm2 记得安装完毕之后做软连接不然系统命令无法识别ln -s /opt/node/bin/pm2 /usr/bin/
pm2 monit 启动监控进程
这样以 pm2 启动项目后，退出 Xshell/putty等终端后，项目就依然可以正常访问了。
由于nodejs服务，依赖一些modules，所以需要安装相应的modules，使用modules有两种如下两种方式：
1.使用局部modules（通常方式）
首先安装 局部modules
进入项目包含 package.json 目录，执行命令：
npm install
然后启动服务：
pm2 start server.js
关闭终端后，服务仍正常运行。
pm2 list
可以查看pm2 启动的并正在运行的服务。
2 使用全局modules
查看全局modules
npm list -g --depth 0
不加 --depth 0 会显示更多层级。
设置环境变量，以便能搜索到modules （这一步会给docker部署增加复杂度）
export NODE_PATH=/usr/local/lib/node_modules
注：只在该shell终端有效。
node_modules 的路径在不同系统上可能会有差别，请根据实际情况配置。同时可以将该配置加入到 profile中，使其一直生效。
启动服务
pm2 start server.js
vue项目中连接mogonDB数据库（mysql方法类似）
1、进入到到项目文件目录中，并且执行npm init -y
2、继续执行cnpm install koa --save，安装koa2
3、新建这三个文件（名称自取）
4、打开index.js文件，并且写入如下代码，测试koa是否安装成功(可用)
const Koa = require('koa');
const App = new Koa();
App
.use(async(ctx)=>{
ctx.body = "hello koa2
";
})
.listen(3000,()=>{
console.log("3000端口启动成功!");
})
5、在控制台中输入node index.js，在浏览器中输入127.0.0.1:端口号,出现下图，则说明koa2成功
6、安装mongoose,控制台输入cnpm install --save mongoose
7、进入init.js文件，输入如下代码，连接数据库，测试是否可用
const mongoose = require("mongoose");
const db = "mongodb://localhost/smile-db";
exports.aaa = ()=>{
mongoose.connect(db);//连接数据库
//增加数据库监听事件
mongoose.connection.on("disconnected",()=>{//监听数据库重连
console.log("数据库断开连接，正在重新连接...");
mongoose.connect(db);//连接数据库
});
mongoose.connection.on("error",()=>{//监听数据库错误
console.log("数据库错误，正在重新连接...");
mongoose.connect(db);//连接数据库
});
mongoose.connection.once("open",()=>{//监听数据库打开的时候
console.log("数据库连接成功！")
})
//增加数据库监听事件
}
8、在index.js文件中，补充完成如下代码
const Koa = require('koa');
const App = new Koa();
const {aaa} = require("./database/init");
(async ()=>{
await aaa();
})()
App
.use(async(ctx)=>{
ctx.body = "hello koa2
";
})
.listen(3000,()=>{
console.log("3000端口启动成功!");
})
控制台中输入node index.js，看返回信息，显示连接对的，则数据库连接成功。
PS：node服务代码热重载
webpack 极其牛叉的地方之一，开发的时候，实时的构建代码，并且，实时的更新你已经加载的代码，也就是说，不用手动去刷新浏览器，即可以获取最新的代码并执行。
这一点同样可以运用在 node 端，实现即时修改即时生效，而不是 pm2 那种重启的方式。
首先，修改配置文件，如下：
entry: [
'webpack/hot/poll?1000',
'./app.js'
],
// ...
plugins: [
new webpack.HotModuleReplacementPlugin()
]这个时候，如果执行 webpack --watch & node app.js ，你的代码修改之后就可以热重载而不用重启应用，当然，代码中也要做相应改动，如下：
var hotModule = require('./hotModule');
// do something else
// 如果想要 hotModule 模块热重载
if (module.hot) {
module.hot.accept('./hotModule.js', function() {
var newHotModule = require('./hotModule.js');
// do something else
});
}
思路就是，如果需要某模块热重载，就把它包一层，如果修改了，webpack 重新打包了，重新 require 一遍，然后代码即是最新的代码。
当然，如果你在某个需要热重载的模块中又依赖另一个模块，或者说动态的依赖了另一个模块，这样的模块并不会热重载。
练手项目：Vue-Mall Vue全家桶+Node后端服务实现的商城 - https://segmentfault.com/a/1190000015005746
参考文章：
- xshell一退出，nodejs项目就停止 https://segmentfault.com/q/1010000004590993
- pm2常用的命令用法介绍 https://blog.csdn.net/chengxuyuanyonghu/article/details/74910875
- 用 webpack 构建 node 后端代码，使其支持 js 新特性并实现热重载 https://zhuanlan.zhihu.com/p/20782320
- 用Nginx做NodeJS应用的负载均衡 - https://blog.csdn.net/chszs/article/details/43203127
- 使用pm2躺着实现负载均衡 - https://blog.csdn.net/qq_17475155/article/details/53823862