nginx+pm2部署vue+node项目实战

[jackieli123723]

为什么要使用pm2

pm2可以热启动部署项目不在手动上传打包，可以通过0s热启动让项目0过渡不在做重复的部署工作

nginx.conf分三种情况（本实战以vue的history模式打包就是url去掉那难看的#路由）

网上的教程都很混乱，不是很好理解如果不懂后端知识和服务器，坑了我好久，经过不断摸索记录下自己的踩坑的解决方案

vue history打包后F5刷新解决 404 not found（502是资源没拿到会报错error）

三种方法（见下nginx.conf）

• 初始
• 静态资源指向
• pm2配合使用（推荐省事）

nginx.conf

   server {
        listen       80;
        #server_name  localhost;
        server_name mall.jackieli.com;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
         #初始
            #root   html;
            #index  index.html index.htm;

            #静态资源指向
            #root   html;
            #root   'E:\jackieli\longyuanWork\vue-longyuan-stroe-front\dist';
            #index  index.html index.htm;
            #error_page 404 /index.html;

            #pm2配合使用
            proxy_pass http://localhost:5000;
            index  index.html index.htm;
        }

    }

准备工作

• 启动mysql
• etc改写host
• pm2监听

//mysql
cmd
E:\wamp\bin\mysql\mysql5.6.17\bin
cd wamp\bin\mysql\mysql5.6.17\bin
mysql -h localhost -uroot -p

//host
# Localhost (DO NOT REMOVE) Start
127.0.0.1 localhost
0.0.0.0 localhost
127.0.0.1 mall.jackieli.com
# Localhost (DO NOT REMOVE) End

//host
# Localhost (DO NOT REMOVE) Start
127.0.0.1 localhost
127.0.0.1 mall.jackieli.com
# Localhost (DO NOT REMOVE) End

//pm2

pm2 start deploy.js --name longyuan-admin

//deploy.js--express版本

 /**
 *区别于上面的express
 * Created by jackieli on 10/10/2017.(vue-spa) 前端路由返回（前端路由表分别返回）nginx+pm2 代理转发
 */
var port = process.env.PORT || 5000;
var express = require('express');
var fs = require('fs');
var path = require('path');
var app = express();

app.use(express.static(path.join(__dirname, '/dist')));

//quick and dirty vue server-side routing
app.get('*', (req, res)=>{
    console.log(res);
    res.send(fs.readFileSync(path.join(__dirname, '/dist/index.html'),'utf8'));
})

app.listen(port, () => {
   console.log(`代码部署成功访问端口http://localhost:${port}`)
});

//dist目录里面的配置
另外一种无需要配置nginx

const path = require('path')
const history = require('connect-history-api-fallback');
const express = require('express')
const app = express();
const router = express.Router()

const indexRoute = router.get('/', (req, res) => {
  res.status(200).render('index')
})

app.set('views', path.join(__dirname, '../dist'))
app.set('view engine', 'html')
app.engine('html', require('ejs').renderFile)

app.use('/', express.static(path.join(__dirname, '../dist')))

app.use(history({
  rewrites: [
    { from: /.*/, to: '/' }
  ]
}))

app.get('/', indexRoute)

app.use((req, res) => {
  res.status(404).send('File not found!')
})

app.listen(9090, '127.0.0.1', () => {
  console.log('ther server is running at port ' + 9090)
})

//deploy.js (koa2版本)

 /**
  *区别于deploy.js(exprss构建)
  * Created by jackieli on 2017/12/08(vue-spa) 前端路由返回（前端路由表分别返回）nginx+pm2 代理转发
  * 静态资源可以nginx压缩和node压缩
  */

const port = process.env.PORT || 7000
const Koa = require('koa')
const Router = require('koa-router');
const serve = require('koa-serve')
const path = require('path')
const app = new Koa()
const router = new Router();
const historyApiFallback = require('koa2-history-api-fallback');

//压缩
//安全模块待添加

//解决spa路由匹配问题
//not found 
app.use(historyApiFallback());
//静态资源
app.use(serve('', path.resolve(__dirname, 'dist')))

app.listen(port, () => {
     console.log(`代码部署成功访问端口http://localhost:${port}`);
});