Nuxt搭配Strapi前后端分离应用线上部署配置问题咨询

1. 文件夹结构是否需要调整 #

完全不需要合并前后端代码，两者是独立运行的服务，保持现有的分开文件夹结构即可，不管是部署在同一台服务器的不同目录还是两台独立服务器都可以正常运行。

2. 现有配置修改的错误纠正 #

你当前猜想的配置存在核心错误：host字段填写的是服务绑定的服务器网卡地址，不是对外访问的域名，填写域名会导致服务启动失败。不管是Nuxt还是Strapi，线上环境的host保持默认的0.0.0.0即可，代表监听服务器所有网卡的请求。

3. 线上访问逻辑说明 #

不建议直接用端口号对外提供服务，首先国内备案域名默认仅允许开放80/443端口，其次暴露业务端口有极高的安全风险。正确的做法是用Nginx做反向代理，通过不同域名/路径转发到本地运行的Nuxt和Strapi服务：

• 主域名https://my-app-hamid.com转发到服务器本地127.0.0.1:3800，对外提供前端访问
• 子域名https://strapi.my-app-hamid.com转发到服务器本地127.0.0.1:1337，访问https://strapi.my-app-hamid.com/admin即可进入Strapi管理面板
  不需要两台独立服务器，单台2核4G配置的云服务器足够同时运行两个服务。

4. 正确的配置文件修改 #

Nuxt 配置（nuxt.config.js） #

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      // 新增：填写你Strapi的线上对外访问地址
      strapiBaseUrl: 'https://strapi.my-app-hamid.com'
    }
  },
  server: {
    port: 3800,
    host: '0.0.0.0' // 保持0.0.0.0即可，不要填域名
  }
})

Strapi 配置（./config/server.js） #

module.exports = ({ env }) => ({
  host: env('HOST', '0.0.0.0'), // 保持0.0.0.0即可
  port: env.int('PORT', 1337),
  // 新增：填写Strapi对外的访问地址
  url: env('STRAPI_PUBLIC_URL', 'https://strapi.my-app-hamid.com'),
  admin: {
    // 新增：固定admin路径
    url: env('ADMIN_URL', '/admin'),
    auth: {
      secret: env('ADMIN_JWT_SECRET', '*******'),
    },
  },
});

Strapi 跨域配置（./config/middlewares.js） #

需要把前端域名加入跨域白名单，避免前端请求Strapi接口报错：

module.exports = [
  'strapi::errors',
  {
    name: 'strapi::cors',
    config: {
      origin: ['https://my-app-hamid.com', 'https://strapi.my-app-hamid.com'],
      credentials: true
    }
  },
  'strapi::security',
  'strapi::poweredBy',
  'strapi::logger',
  'strapi::query',
  'strapi::body',
  'strapi::session',
  'strapi::favicon',
  'strapi::public',
];

注意：所有敏感信息（如数据库密码、JWT密钥）不要硬写在配置文件中，线上单独配置.env文件读取即可。

5. 完整部署流程 #

前置准备 #

• 购买国内云服务器，安装CentOS/Ubuntu系统
• 完成域名备案，将域名解析到服务器公网IP
• 服务器安装对应版本的Node.js（和本地开发版本一致）、Nginx、MySQL/PostgreSQL（线上不要用SQLite数据库）、PM2（Node进程管理工具）

项目部署 #

1. 将Nuxt和Strapi代码分别上传到服务器的两个独立目录，例如/www/nuxt-app和/www/strapi-app
2. 部署Nuxt服务：
   • 进入Nuxt目录，执行npm install安装依赖
   • 执行npm run build完成项目构建
   • 执行pm2 start .output/server/index.mjs --name nuxt-app启动服务
3. 部署Strapi服务：
   • 进入Strapi目录，执行npm install安装依赖
   • 执行npm run build完成项目构建
   • 执行pm2 start npm --name strapi-app -- run start启动服务

Nginx 反向代理配置 #

添加两个站点配置，分别对应前端和Strapi后台：

前端站点配置

server {
    listen 80;
    server_name my-app-hamid.com;
    return 301 https://$host$request_uri;
}
server {
    listen 443 ssl;
    server_name my-app-hamid.com;
    ssl_certificate 你的SSL证书公钥路径.pem;
    ssl_certificate_key 你的SSL证书私钥路径.key;

    location / {
        proxy_pass http://127.0.0.1:3800;
        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;
    }
}

Strapi 站点配置

server {
    listen 80;
    server_name strapi.my-app-hamid.com;
    return 301 https://$host$request_uri;
}
server {
    listen 443 ssl;
    server_name strapi.my-app-hamid.com;
    ssl_certificate 你的SSL证书公钥路径.pem;
    ssl_certificate_key 你的SSL证书私钥路径.key;

    location / {
        proxy_pass http://127.0.0.1:1337;
        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_connect_timeout 600s;
        proxy_send_timeout 600s;
        proxy_read_timeout 600s;
        client_max_body_size 100M;
    }
}

配置完成后执行nginx -s reload重启Nginx即可正常访问。

内容的提问来源于stack exchange，提问作者hamid-davodi