PM2+Linux部署nuxt.js（超详细，保姆级教程）_docker pm2 运行 nuxtjs

PM2+Linux部署nuxt.js

开始我使用了docker部署我的springboot项目 ，链接在这里， 因为我是前后端分离项目，前端使用的nuxt.js框架，所以需要另外部署一下项目，以下是部署流程
1.将本地的nuxt项目打包

npm run build
#生成的dist在.nuxt文件夹中
2.部署linux服务器环境
 
1.将.nuxt，static，nuxt.config.js，package.json，package-lock.json放进自己创建的文件夹中，我这里的创建在/home/vue-front中 
#注意  在nuxt.config.js中要添加这个配置
server: {
 port: 8170, // default: 3000
 host: '0.0.0.0' // default: localhost
2.执行npm install方法构建环境 
npm install
这个图就代表成功 
3.配置nginx环境
 
我用的docker配置nginx 
#1.拉取镜像
 docker pull nginx
#2./home文件夹下新建docker文件夹，docker文件夹下新建nginx文件夹，nginx文件夹下新建conf.d文件夹，html文件夹，大致结构如下：
/home
    |---docker
           |----nginx
                  |----conf.d
                  |----html
#3.在conf.d文件夹下新建default.conf文件，内容如下：
upstream nuxt {
        # 这里就是上面配置的 Node ip + 端口号，之前默认是 localhost:3000
        server 172.19.1.180:8170;
        keepalive 64;
server {
        listen       8170;# 这里的端口服务器的端口
        server_name  114.55.238.50;# 服务器的域名
        location / {
            proxy_pass http://nuxt;# (这里的nuxt对应上面upstream xxx)
            index index.html index.htm;
            # try_files $uri $uri/ /index.html; #解决页面刷新404问题
#4.启动容器
docker run -d -p 80:80 -v /home/docker/nginx/conf.d:/etc/nginx/conf.d --name mynginx nginx
4.启动nuxt
 
npm run start 
这个页面就代表启动成功 
5.使用ip进行访问
 
#因为我nginx上使用的114.55.238.50这个域名，所以直接使用这个进行访问
114.55.238.50:8170
6.使用PM2进行nuxt项目的进程守护
 
因为如果仅仅使用npm run start只是在服务器上暂时开启这个服务，跟执行npm run dev一样，使用过npm run dev的童鞋都知道如果在运行中的时候讲命令行工具关闭或者结束进程，咱们的网站就访问不了了，同样在服务器端也存在这种问题，比如服务器进程中断了，都会导致网站无法访问，所以这个时候咱们就需要使用pm2来做一个进程守护，具体添加pm2的流程及配置见下文： 
1.使用pm2之前我们需要先进行安装pm2包，在我们本地开发也好，或者在服务器上操作都一样，打开终端命令行工具，输入以下命令：（Node环境下）
 
npm install -g pm2
安装好以后可以使用以下命令来查看pm2是否安装成功，能够返回版本号说明安装成功 
pm2 -v
2.在程序的根目录创建pm2.json,内容为下：
 
                "name": "项目名",
                "script": "npm run start",
                "env_dev": {
                        "NODE_ENV": "development"
                "env_production": {
                        "NODE_ENV": "production"
3.启动pm2
 
pm2 start pm2.json
7.PM2常用命令
 
pm2 list                      # 列表 PM2 启动的所有的应用程序
pm2 monit                     # 显示每个应用程序的CPU和内存占用情况
pm2 show [app-name]           # 显示应用程序的所有信息
pm2 logs                      # 显示所有应用程序的日志
pm2 logs [app-name]           # 显示指定应用程序的日志
pm2 flush                     # 清空所有日志文件
pm2 stop all                  # 停止所有的应用程
pm2 stop 0                    # 停止 id为 0的指定应用程序
pm2 restart all               # 重启所有应用
pm2 reload all                # 重启 cluster mode下的所有应用
pm2 delete all                # 关闭并删除所有应用
pm2 delete 0                  # 删除指定应用 id 0
pm2 startup                   # 创建开机自启动命令
pm2 save                      # 保存当前应用列表
				Nuxt是一个基于vue.js的应用框架，可以做到服务器端渲染，解决vue动态生成页面，难以SEO优化的难题。详情我这里不赘述了。想要了解的可以查看这里，Nuxt教程PM2是一个进程管理工具，用于启动、维护Node的应用程序。非常好用。关于PM2是什么的，可以查看这里，PM2教程官方文档提供了3种部署方法。想要了解更多的，请查看这里，Nuxt部署常用的是服务端渲染部署Nuxt的生成的package.json如下：
在package.json中提供了2个命令，用于服务端渲染部署1. nuxt build	利用
1 pm2startapp.js
2 pm2startapp.js--namemy-api      #my-api为PM2进程名称
3 pm2 start app.js -f --name my-api     # -f 参数重复启动一个脚本
4 pm2startapp.js-i...
				#####一、接前文
前文已经介绍过docker的安装以及启动一个inidex.html的简单操作。现在我们再结合我们实际项目进行一些操作 即部署一个前端nuxt前端静态项目。
为什么是nuxt，不是vue-cli？
因为当时公司要求实现静态化，有利于seo，还专门请了seo工程师。当时我们公司的方案是使用freemark（约2016年），我按照领导的要求一步一步的操作，在freemark方案下实现了。但是我的开发过程不是很痛快，没有开发普通vue工程化项目那么流畅。到现在了我看原来公司的网站架构还是当年的