NuxtJs 服务器部署 && pm2 的简单使用

摘要： Nuxt.js普通的vue单页面应用渲染都是从服务器获取所需js、css，在客户端解析成html挂在到根DOM元素上，这样会造成网站的首屏加载过慢。对于一些内容性网站来说，不利于搜...

Nuxt.js

普通的vue单页面应用渲染都是从服务器获取所需js、css，在客户端解析成html挂在到根DOM元素上，这样会造成网站的首屏加载过慢。对于一些内容性网站来说，不利于搜索引擎专区网站内容，也就是不利于SEO。Nuxt.js是一个基于Vue.js的通用应用框架，预设了利用 Vue 开发服务端渲染的应用所需要的各种配置，完美的解决了vue的这两个缺点，页面都是通过服务端渲染生成后输出给客户端，直接以静态资源的形式输出给搜索引擎。下面就简单的介绍一下如何讲Nuxt.js项目部署到服务器。

1、服务器环境

node -v
npm  -v
pm2 -v
nginx -v

2、项目打包

npm run build

打包完成后，讲

.nuxt
static
nuxt.config.js
package.jsos

上传到服务器放置项目的文件夹内。

3、在服务器上运行

npm install    // 安装依赖包
npm start      // 运行

4、nginx配置

假如Nuxt.js项目的端口是3000，那nginx配置如下：

upstream nodenuxt {
    server 127.0.0.1:3000; #nuxt项目 监听端口
    keepalive 64;
}
server {
    listen 80;
    server_name yoursite.com;    
    location / {
        proxy_http_version 1.1;        
        proxy_set_header Upgrade $http_upgrade;  
        proxy_set_header Connection "upgrade";        
        proxy_set_header Host $host;        
        proxy_set_header X-Nginx-Proxy true;        
        proxy_cache_bypass $http_upgrade;        
        proxy_pass http://nodenuxt; #反向代理
    }
}

5、最后可以在浏览器访问yoursite.com了

6、PM2开启进程守护

项目总是会挂掉，浏览器就不能正常访问网站，那我们就使用PM2，当进程死掉，就会自动重启

pm2 start npm -- run start

PM2

PM2 是node的进程管理工具，可以性能监控、自动重启、负载均衡，使用的方法也很简单。

1、安装

npm install -g pm2

2、常用命令

// 启动服务
pm2 start app.js                //启动app.js应用
pm2 start app.js --name demo    //启动应用并设置name
pm2 start app.sh                //脚本启动

// 启动的参数说明
--watch：监听应用目录的变化，一旦发生变化，自动重启。如果要精确监听、不见听的目录，最好通过配置文件。
-i --instances：启用多少个实例，可用于负载均衡。如果-i 0或者-i max，则根据当前机器核数确定实例数目。
--ignore-watch：排除监听的目录/文件，可以是特定的文件名，也可以是正则。比如--ignore-watch="test node_modules "some scripts""
-n --name：应用的名称。查看应用信息的时候可以用到。
-o --output <path>：标准输出日志文件的路径。
-e --error <path>：错误输出日志文件的路径。
--interpreter <interpreter>：the interpreter pm2 should use for executing app (bash, python...)。比如你用的coffee script来编写应用。

eg：
pm2 start app.js --watch -i 2    // 开启自动重启、2个进程

// 停止服务
pm2 stop all               //停止所有应用
pm2 stop [AppName]        //根据应用名停止指定应用
pm2 stop [ID]             //根据应用id停止指定应用

// 删除应用
pm2 delete all               //关闭并删除应用
pm2 delete [AppName]        //根据应用名关闭并删除应用
pm2 delete [ID]            //根据应用ID关闭并删除应用

// 创建开机自启
pm2 startup

// 更新PM2
pm2 updatePM2
pm2 update

// 监听模式
pm2 start app.js --watch    //当文件发生变化，自动重启

// 重新启动
pm2 restart app.js        //同时杀死并重启所有进程。短时间内服务不可用。生成环境推荐使用reload

// 静态服务器
pm2 serve ./dist 9090        //将目录dist作为静态服务器根目录，端口为9090

// 自动负载均衡
pm2 start app.js -i 3 # 开启三个进程
pm2 start app.js -i max # 根据机器CPU核数，开启对应数目的进程

// 查看启动列表
pm2 list

// 查看每个应用程序占用情况
pm2 monit

// 显示应用程序所有信息 
pm2 show [Name]      //根据name查看
pm2 show [ID]        //根据id查看

// 日志查看
pm2 logs            //查看所有应用日志
pm2 logs [Name]    //根据指定应用名查看应用日志
pm2 logs [ID]      //根据指定应用ID查看应用日志

// 保存当前应用列表
pm2 save

// 重启保存的应用列表
pm2 resurrect

// 清除保存的应用列表
pm2 cleardump

// 保存并恢复PM2进程
pm2 update

// 生成示例配置文件
pm2 ecosystem        //生成一个示例JSON配置文件
pm2 init