nuxt部署

• Nuxt项目通常使用PM2来管理进程

使用pm2

• 使用pm2进程守护Nuxt应用

  • pm2可以让nuxt应用服务一直在服务器中运行

• 在项目根目录创建ecosystem.config.js文件

  • pm2默认的配置文件

部署操作流程

bash

# 服务器中安装pm2
npm install pm2 -g
# 构建生产包
npm run build
# 启动服务
pm2 start ecosystem.config.js

nginx反向代理配置

为什么nuxt部署需要nginx反向代理？

• 服务端渲染（SSR）支持：Nuxt.js 默认使用服务端渲染技术，需要 Node.js 环境支持。通过 Nginx 反向代理，可以将客户端请求转发到运行 Nuxt.js 应用的 Node.js 服务器，从而实现服务端渲染功能

• API 路由转发：Nginx 可以将特定路径的请求（如 /app/）转发到本地的 Node.js 服务器或其他后端服务（如 Strapi），从而实现前后端分离的部署模式。例如，可以将 /app/draw/ 路径的请求转发到 Nuxt.js 服务端口，而 /app/draw-api/ 路径的请求转发到 Strapi 服务端口

• Nuxt默认运行在Node.js环境（如3000端口），但在生产环境中，直接暴露Node.js服务会存在安全问题

• 通过nginx来将请求转发到Nodejs端口

• Nginx可以作为安全层，提供SSL/TLS加密、防止DDoS攻击、隐藏服务器信息等

• 通过nginx反向代理可以隐藏内部服务暴露

相关配置问题

public目录

• 作为服务器根目录下的公共资源提供
• 打包时，pulick目录下的文件会被直接复制到输出目录下
  • 如.output/public

nginx配置

bash

 location /static/ {
           root  /data/www/nuxt-demo/public;
    }

• 会被映射为：http://your-domain.com/static/image.jpg

nginx配置代理转发

• nuxt的node服务是3000端口，通过nginx来将请求转发到Nodejs服务端口
• 在目录下执行pm2 start ecosystem.config.cjs
  • 可通过pm2的配置文件ecosystem.config.cjs来修改端口号，项目名等等

js

server {
  # 端口，默认是 80
  listen 80;
  # 服务名(写域名或者 ip 地址都可以)
  server_name example.com www.example.com;
  # server 根目录
  root /data/www/nuxt-demo;
  # 主入口文件
  index index.html;

    location / {
           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;
           # nuxt的node的服务默认是3000， 反向代理转发到node服务
           proxy_pass http://127.0.0.1:3000;
        }
}