【新手向】Nginx+pm2部署和发布Nuxt项目 实现服务端渲染

Nuxt项目完成了 剩下的就是部署到服务器上了
但是网上的教程多半含混不清 顺序混乱 对新手不太友好 索性自己写一个比较全的教程吧

介绍

Nuxt项目打包后发布在服务器上是前台运行的 启动后 若将窗口关掉则无法访问

使用pm2可以完美解决该问题
pm2是一个带有负载均衡功能的Node应用的进程守护工具 允许独立代码利用全部服务器上的所有CPU 并且能够保证进程永远活着(alive)
pm2有着0秒的重载 还能提供监控等功能 是个很实用的工具

环境准备

一、首先当然是安装Node了

安装pm2需要npm 包括Nuxt项目的下载模块同样也需要npm 因此Node必不可少

1、下载：

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

2.解压：

解压方式一(若失败请用方式二)：

tar -zxvf 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

3、重命名：

mv node-v10.11.0-linux-x64 node

4、设置环境变量：

vi ~/.bash_profile

里面默认有个PATH=$PATH:$HOME/bin
将其修改为：

PATH=$PATH:$HOME/bin:/usr/local/node/bin(根据自己的实际目录修改)

修改完之后 编译刚刚修改过的文件：

source ~/.bash_profile

5、测试是否安装成功：

node -v
npm -v

二、安装pm2

pm2的安装过程很简单

npm i pm2 -g

设为开机自启动：

pm2 startup
pm2 save

三、然后需要安装Nginx服务器

(如果已安装了请跳过)
安装步骤在我的另一篇博客：Linux环境下Nginx反向代理服务器的安装和配置

安装完之后 还需在nginx.conf进行配置：

(在这上个完整版的配置文件吧 可根据需要修改)

#user  nobody;
worker_processes  1;
error_log  logs/error.log;
error_log  logs/error.log  notice;
error_log  logs/error.log  info;
pid  logs/nginx.pid;

events {
  worker_connections  1024;
}

http {
  include       mime.types;
  default_type  application/octet-stream;
  sendfile        on;
  keepalive_timeout  65;
  #gzip  on;
    server {
        listen       80;
        server_name  test.com www.test.com;# 这里填写你的域名
        location / {
                proxy_redirect off;
                proxy_set_header Host               $host;
                proxy_set_header X-Real-IP          $remote_addr;
                proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto  $scheme;
                proxy_read_timeout 1m;
                proxy_connect_timeout 1m;
                proxy_pass http://127.0.0.1:3000; # nuxt项目的监听端口 启动在哪个端口这里就填写哪个端口
        }
    }
}

如果是SSL 要这么配置：

server {
    listen 443 ssl;
    server_name test.com www.test.com;
    ssl_certificate cert/xxxxxx.pem;   # 证书文件的路径
    ssl_certificate_key cert/xxxxxx.key;   # 证书密钥的路径
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;  #使用此加密套件
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;   #使用该协议进行配置
    ssl_prefer_server_ciphers on;

    location / {
      # =======================若要实现CORS跨域 则将下方的注解解开=======================
      #add_header 'Access-Control-Allow-Origin' $http_origin;
      #add_header 'Access-Control-Allow-Credentials' 'true';
      #add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
      #add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
      #add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
      #if ($request_method = 'OPTIONS') {
          #add_header 'Access-Control-Max-Age' 1728000;
          #add_header 'Content-Type' 'text/plain; charset=utf-8';
          #add_header 'Content-Length' 0;
          #return 204;
      #}
      # =======================若要实现CORS跨域 则将上方的注解解开=======================
      proxy_redirect off;
      proxy_set_header Host               $host;
      proxy_set_header X-Real-IP          $remote_addr;
      proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Proto  $scheme;
      proxy_read_timeout                  1m;
      proxy_connect_timeout               1m;
      proxy_pass                          http://127.0.0.1:3000;
    }
}

部署

现在已经万事俱备只欠东风了 我们需要将我们的Nuxt项目打包

等等 我们还需要稍微配置一下端口和ip：
在nuxt.config.js里 和head属性平级 添加server的配置

server: {
    port: 3000, // 默认3000 也可以改成其它的端口号
    host: '0.0.0.0', // 默认localhost
  },

注：这个host: '0.0.0.0'很重要 必须配置 否则无法直接访问Nuxt项目(当然 若使用Nginx进行反向代理 则无须进行此配置)

然后就是编译了
我的Nuxt项目是用脚手架构建的 因此已经自带了脚本命令：

在本地环境的项目根目录下输入npm run build开始编译 然后等待一会(如果你的项目比较大 那就不是等"一会"了 是等"好久"🤣)

编译完之后 我们会发现在项目的根目录下生成了一个名为.nuxt的文件夹
将项目的这四个文件和文件夹(.nuxt、static、nuxt.config.js、package.json)传到服务器上：
注：传到服务器上时 不一定要传到Nginx的html目录下 其它任意目录都可以

进入目录 输入npm i下载所需的模块：

模块安装完毕之后 用pm2启动：

pm2 start npm --name "my-nuxt-project" -- run start

(这里的my-nuxt-project可以是项目的package.json中的项目名 当然你也可以改成其它喜欢的)

启动后 输入pm2 list即可查看当前启动的项目了：

最后 在浏览器里即可成功访问啦

---

附：pm2命令大全

pm2 start app.js              # 启动app.js应用程序
pm2 start app.js -i 4         # cluster mode 模式启动4个app.js的应用实例 且4个应用程序会自动进行负载均衡
pm2 start app.js --name="api" # 启动应用程序并命名为 "api"
pm2 start app.js --watch      # 当文件变化时自动重启应用
pm2 start script.sh           # 启动 bash 脚本
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 gracefulReload all        # Graceful reload all apps in cluster mode
pm2 delete all                # 关闭并删除所有应用
pm2 delete 0                  # 删除指定应用 id 0
 
pm2 scale api 10              # 将名字叫api的应用扩展到10个实例
pm2 reset [app-name]          # 重置重启数量
pm2 startup                   # 创建开机自启动命令
pm2 save                      # 保存当前应用列表
pm2 resurrect                 # 重新加载保存的应用列表
pm2 update                    # 保存进程 结束pm2然后复原进程

---

结语：

其实我在部署的时候并没有一帆风顺
遇到了个大Bug 部署完毕访问的时候老是请求不到 前端页面上只显示一个An error occurred in the application and your page could not be served.
在日志里时而输入404时而输入500的：

 ERROR  Request failed with status code 404

  at createError (node_modules/axios/lib/core/createError.js:16:15)
  at settle (node_modules/axios/lib/core/settle.js:17:12)
  at Unzip.handleStreamEnd (node_modules/axios/lib/adapters/http.js:236:11)
  at Unzip.emit (events.js:187:15)
  at Unzip.EventEmitter.emit (domain.js:442:20)
  at endReadableNT (_stream_readable.js:1092:12)
  at process._tickCallback (internal/process/next_tick.js:63:19)

后来才发现我项目部署完毕是通过http请求访问的 然而在项目中Axios请求的接口地址又是https的 所以无法访问

关键是日志对错误信息的描述压根没有 只有个404谁知道呀 网上也没有相关的解决方法
忙活了一下午 总算在stackoverflow上看到了个相似的问题 折腾了一下最终解决了
不得不说 在问题解决完毕之后还是很爽的😎

没想到啊 连部署都有这么多麻烦事 果然SSR没这么容易(手动狗头)

---