nuxt基于ubuntu18.04服务器下的部署

最近这几年前端三大框架横行，包括本人也一直在用Vue这个框架，但由于spa的缘由，若是只是单单作系统之类的还好，可是在作门户类等须要SEO的站点时候，每每不尽人意，这时候就该上nuxt.js了。
这篇教程是基于ubuntu 18.04 系统下的nuxt部署方法。
搭建nginx+node+npm+pm2环境
nginx版本1.14.0
pm2版本3.5.1
node版本v10.11.0
npm版本6.4.1

一、安装nginx

更新源

sudo apt-get update
复制代码

安装

sudo apt-get install nginx
复制代码

若是忘记了nginx程序目录，能够执行：

whereis nginx
复制代码

Nginx若是指定默认加载/etc/nginx/nginx.conf的配置文件。若是要查看加载的是哪一个配置文件，能够用这个命令sudo nginx -t或者ps -ef | grep nginx

nginx的使用方法

sudo service nginx {start | stop | restart | reload | force-reload | status | configtest | rotate | upgrade }
复制代码

二、安装node+npm

下载node

cd /usr/local/src/
复制代码

wget https://nodejs.org/dist/v10.11.0/node-v10.11.0-linux-x64.tar.xz
复制代码

解压

xz -d node-v10.11.0-linux-x64.tar.xz
复制代码

tar -xvf node-v10.11.0-linux-x64.tar
复制代码

重命名

mv node-v10.11.0-linux-x64 node
复制代码

环境变量
打开文件后键盘输入 i 便可开始编辑

vim ~/.bash_profile
复制代码

PATH=$PATH:$HOME/bin:/usr/local/src/node/bin
复制代码

改完按键盘左上角Esc键并输入 :wq （冒号+w+q，不要掉了冒号）
最后编译刚刚修改的文件 

source ~/.bash_profile
复制代码

安装完成测试

node -v
复制代码

npm -v
复制代码

三、安装pm2

npm i -g pm2
复制代码

自启动

pm2 startup
复制代码

pm2 save
复制代码

四、设置nginx代理

nginx代理设置

server {
	listen 80;
	server_name test.rdf.banjiajia.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://127.0.0.1:3333; #反代理地址，端口是nuxt项目所用到的端口
    }
}
复制代码

五、nuxt打包上传

npm run build
复制代码

把 nuxt.config.js package.json static .nuxt 上传到服务器项目文件夹 列入: /var/www/nuxt
进入项目目录安装依赖

cd /var/www/nuxt
复制代码

npm i
复制代码

用pm2运行项目

cd /var/www/nuxt
复制代码

pm2 start npm --name "my-nuxt" -- run start
复制代码

pm2管理项目命令
pm2 list # 查看当前正在运行的进程
pm2 start all # 启动全部应用
pm2 restart all # 重启全部应用
pm2 stop all # 中止全部的应用程序
pm2 delete all # 关闭并删除全部应用
pm2 logs # 控制台显示全部日志

pm2 start 0 # 启动 id为 0的指定应用程序
pm2 restart 0 # 重启 id为 0的指定应用程序
pm2 stop 0 # 中止 id为 0的指定应用程序
pm2 delete 0 # 删除 id为 0的指定应用程序

pm2 logs 0 # 控制台显示编号为0的日志
pm2 show 0 # 查看执行编号为0的进程
pm2 monit jsyfShopNuxt # 监控名称为jsyfShopNuxt的进程

这样以后就能够愉快的去玩耍了！！^.^!

通常更新维护流程

进入文件目录，中止和删除项目，遍历文件，删除内容

pm2 list
pm2 delete id
rm -r node_modules nuxt.config.js package.json package-lock.json static
复制代码

从新上传新打包的文件而后，安装依赖并开启项目'rdf-nuxt''

npm i
pm2 start npm --name "rdf-nuxt" -- run start
复制代码

如下关于集群的内容转自：

https://www.jianshu.com/p/39e0fa9f1739
复制代码

关于集群

pm2 的 cluster模式能够支持同一个端口，集群多个实例（一个核心起一个实例，若是是单核的服务器就无法了）

在项目根目录 pm2 init  发现生成了一个 ecosystem.config.js

vi ecosystem.config.js

module.exports = {
    
      apps : [{
    
        name: 'nuxt-app',
    
        script: './node_modules/nuxt/bin/nuxt.js',  // 不能用npm run start 的命令，会报错端口占用
    
        args: 'start',
    
        // Options reference: https://pm2.io/doc/en/runtime/reference/ecosystem-file/
    
        instances: 2, // 几个实例也能够填 'max' 服务器最大支持的实例
    
        exec_mode: 'cluster',
    
        autorestart: true,
    
        watch: false,
    
        max_memory_restart: '1G', // 个人服务器是1g内存，当超过1g内存，会重启
    
        env: {
    
          NODE_ENV: 'development'
    
        },
    
        env_production: {
    
          NODE_ENV: 'production'
    
        }
    
      }]

};
复制代码

编辑保存完以后，pm2 start， 使用pm2 list 查看当前状态

测试，如何测试两个实例都在正常工做， 咱们pm2 list, 能够看到当前的node进程状态，如今咱们发现有两个，0 和 1，此时咱们试着pm2 stop 0 ，关掉第一个，看还能不能访问，一样的方法关掉1，打开0，若是都是正常的，那就说明咱们部署成功了。