如何在同一服务器部署Next.js与Strapi并实现路由分工？

这个方案完全可行且合理，正好契合你减少运维成本、保留独立CMS后台的需求。Strapi负责API和后台管理，Next.js接管前端所有其他路由，同服务器部署不仅能避免跨域问题，还能降低服务器资源开销。

一、核心实现逻辑 #

通过反向代理（常用Nginx）做请求分流：

• 所有 /api、/admin 路径转发给Strapi服务
• 其余所有路径转发给Next.js服务

二、具体实现步骤 #

1. 本地项目配置调整 #

Strapi 端配置

修改 config/server.js（或 config/server.ts），设置允许外部访问的监听地址与端口：

module.exports = ({ env }) => ({
  host: '0.0.0.0', // 允许服务器内部及外部访问
  port: env.int('PORT', 1337), // 默认用1337，可自定义其他未占用端口
  app: {
    keys: env.array('APP_KEYS'),
  },
});

保持Strapi默认的API前缀 /api 和后台路由 /admin 即可，无需额外修改。

Next.js 端配置

在Next.js中请求Strapi API时，直接使用相对路径（同服务器部署无需跨域）：

// 组件内数据请求示例
async function getPosts() {
  const res = await fetch(`/api/posts`, { cache: 'no-store' });
  return res.json();
}

注意：不要在Next.js中定义 /api 开头的自定义路由，避免和Strapi的API路径冲突。

2. 服务器反向代理配置（以Nginx为例） #

编辑Nginx站点配置文件（通常路径为 /etc/nginx/sites-available/your-domain.conf）：

server {
  listen 80;
  server_name your-domain.com;

  # 转发Strapi后台与API请求
  location /admin {
    proxy_pass http://localhost: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;
  }

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

  # 其余所有请求转发给Next.js
  location / {
    proxy_pass http://localhost:3000;
    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;

    # Next.js 静态资源缓存优化（可选）
    proxy_cache_bypass $http_upgrade;
  }
}

配置完成后，测试并重启Nginx：

sudo nginx -t
sudo systemctl restart nginx

3. 服务进程管理 #

用PM2管理Strapi和Next.js的进程，确保服务稳定运行：

1. 安装PM2：

npm install pm2 -g

2. 启动Strapi服务（在Strapi项目根目录执行）：

pm2 start npm --name "strapi" -- run start

3. 启动Next.js生产服务（先在Next.js项目根目录执行npm run build构建生产包）：

npm run build
pm2 start npm --name "nextjs" -- run start

三、关键注意事项 #

• 端口冲突：确保Strapi和Next.js使用不同端口（比如默认1337和3000），避免端口占用。
• 环境变量：服务器上需配置好Strapi的数据库连接、APP_KEYS等环境变量；Next.js若有必要配置环境变量，直接用相对路径请求API即可，无需额外设置API_BASE_URL。
• 静态资源：Strapi的媒体文件默认存在public/uploads，需确保Nginx能正确访问该路径；Next.js的静态资源会自动由自身处理。
• 安全配置：给Strapi的/admin后台设置强密码，通过Nginx配置SSL证书（如Let's Encrypt）启用HTTPS，防止未授权访问。

内容的提问来源于stack exchange，提问作者Vladislav Komkov