nuxt.js 部署

1、服务器安装node

因为最后要靠 node 才能启动

2、安装pm2

pm2是nodejs的一个带有负载均衡功能的应用进程管理器的模块

npm install -g pm2

可能需要建立软连接

ln -s 你的nodejs的目录一般情况下/bin/pm2 /usr/local/bin

建议把 nodejs 目录下的bin目录直接添加到环境变量，更方便

3、部署

• 本地运行npm run build打包，然后把.nuxt、static、nuxt.config.js、package.json、package-lock.json上传到服务器

最后服务器项目目录里面就是这几个文件
.nuxt
static
nuxt.config.js
package.json
package-lock.json

上传好后，运行npm install安装依赖（建议npm install --unsafe-perm=true --allow-root）
最后运行npm run start启动项目

• 另外一种方法在服务器上打包上传整个项目到服务器上，当然像node_modules、.idea之类的除外，接着依次运行：

npm install
npm run build
npm run start

如果有node-sass模块，安装过程可能会报错，运行npm install node-sass --unsafe-perm --save-dev来单独安装这个模块就好了。建议直接npm install --unsafe-perm=true --allow-root

使用pm2守护进程运行项目

刚才已经安装了pm2，在项目上传后，进入项目目录，用pm2执行运行命令

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

pm2 start npm --name "nuxt" -- run start表示在项目目录执行 npm run start,
但是 pm2 的写法就是 pm2 start npm --name "nuxt" -- run start 中间要有 --
然后--name "nuxt" 表示pm2给这个项目起个名称

pm2还有很多命令，常用的

pm2 list // 查看任务列表
pm2 stop app_name|app_id // 停止指定name或者id的任务
pm2 stop all // 停止所有任务
pm2 delete app_name|app_id // 删除指定name或者id的任务
pm2 delete all // 删除所有任务
pm2 logs // 查看日志
pm2 kill // 杀死pm2进程

Nginx配置

#t-backend是自定义后台的名字，下面会用到这个。
# 这里的【127.0.0.1:9002】是后台接口地址
# upstream test-backend {
#    server 127.0.0.1:9002;    
# }

# nuxt项目监听
upstream nodenext {
    server 127.0.0.1:9000; #next项目 监听端口
    keepalive 64;
}

## test-peoject虚拟服务器配置
server {
    ## 监听端口
    listen 80;
    ## 服务名称
    server_name xxxx.com; # 域名或者IP
    
    # 文件访问控制
    autoindex on;
    autoindex_exact_size off;
    autoindex_localtime on;
    ## 字符集编码
    charset utf-8;
    ## 访问日志
    # access_log logs/test-peoject.access.log main;
    ## 错误日志
    # error_log logs/test-peoject.error.log main;
    # 客户端请求体最大值
    client_max_body_size 500m;
    # 黑名单配置
    # deny 192.53.163.212;

   
    gzip on;
    gzip_types application/javascript text/css image/jpeg image/png;


    ## 原型图
    location /work {
        root /root/resources/;
    }

    # 文件服务器
    location /little-monsters-file {
        root /N-cbcwm/;
    }

    # api请求
    location /api {
        proxy_pass   http://127.0.0.1:8082;
        add_header Access-Control-Allow-Methods *;
        add_header Access-Control-Max-Age 3600;
        add_header Access-Control-Allow-Credentials true;
        add_header Access-Control-Allow-Origin $http_origin;
        add_header Access-Control-Allow-Headers $http_access_control_request_headers;

        # 如果是请求类型是 OPTIONS 就直接返回 200
         if ($request_method = OPTIONS ) {
            return 200;
        }
     }

      # 访问nuxt项目 bbsgo-view
     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://nodenext; #反向代理
         gzip on;
         gzip_types application/javascript text/css image/jpeg image/png;
      }



    ## 代理前端图片，缓存时间长一点
    # location ~ ^(/static/).+\.(jpg|jpeg|gif|png)$ {
    #    access_log off;
    #    root html/test-project;
    #    expires 15d;
    # }
    ## 通过客户端请求头信息
    proxy_pass_request_headers on;
    ## 保留客户端的真实信息
    proxy_set_header Host $host;
    proxy_set_header X-Real_IP $remote_addr;
    proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
    ## 转发后台请求，这个用到了test-backend（前面已定义的）
    #  location /test-pro {
    #    proxy_pass http://test-backend;
    # }
}

转载并参考

nuxt部署
next.js、nuxt.js等服务端渲染框架构建的项目部署到服务器，并用PM2守护程序