同一项目中NextJS 13与Node应用部署问题求助

我有一个NextJS 13项目，内部包含一个置于server文件夹的Node后端。部署到生产环境时，当前Dockerfile配置如下：

FROM path-to-node16-runtime:latest

COPY node_modules ./node_modules
COPY index.js ./dist/index.js
COPY .next ./dist/.next

ARG PORT=8080
ENV PORT ${PORT}
EXPOSE ${PORT}
CMD ["npm", "start"]

部署后UI仅显示静态内容，无法获取server文件夹中Node项目提供的数据。本地开发时，我在NextJS中通过以下API调用获取数据：

export const apiDomain = 'http://localhost:5000';
const res = await fetch(`${apiDomain}/api/global`);

该API对应的服务来自server文件夹的Node项目，本地运行正常。目前我通过npm run build同时构建前后端，根目录package.json的构建脚本如下：

"scripts": {
    "build:next": "next build",
    "build": "npm run build-backend && npm run build-frontend",
    "start:server": "cd server && npm start",
    "start": "concurrently \"npm run start:server\" \"next start\"",
    "build-frontend": "npm install && npm run build:next",
    "build-backend": "cd server && npm install"
  },

我是否需要修改Dockerfile以纳入Node项目，使二者协同工作？本人对Docker及同项目部署概念不太熟悉，寻求相关指导。

更新：附上完整项目结构及入口文件代码
项目结构：

Project
  .github
  .next
  node_modules
  server (node project)
   node_modules
   index.js
   package.json
  src (nextjs project)
   app
   components
  Dockerfile
  index.js (入口文件，内容如下)
  package.json

入口文件代码：

const http = require('http');
const { parse } = require('url');
const next = require('next');

const app = next({ dev: false, dir: __dirname });
const handle = app.getRequestHandler();
const options = {};

options.agent = new http.Agent(options);
process.env.PORT = '8080';

const middleware = (req, res) => {
  const url = parse(req.url, true);
  handle(req, res, url);
};

(async () => {
  await app.prepare();
  http.createServer(options, middleware).listen(process.env.PORT);
})();

是的，你需要修改Dockerfile纳入Node后端，同时调整入口逻辑和API调用路径，确保容器内前后端能正常通信。以下是具体步骤：

1. 重构Dockerfile，完整打包前后端 #

当前Dockerfile仅复制了前端相关文件，完全未包含server文件夹内容。采用多阶段构建优化镜像体积：

# 构建阶段：安装依赖并编译前后端
FROM node:16-alpine AS builder

WORKDIR /app

# 先复制package.json缓存依赖层
COPY package*.json ./
COPY server/package*.json ./server/

# 安装根目录和后端依赖
RUN npm install
RUN cd server && npm install

# 复制所有项目文件
COPY . .

# 执行构建脚本
RUN npm run build

# 生产阶段：只保留运行必需文件
FROM node:16-alpine AS production

WORKDIR /app

# 从构建阶段复制依赖、产物和后端文件
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/server/node_modules ./server/node_modules
COPY --from=builder /app/server ./server
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/src ./src
COPY --from=builder /app/index.js ./
COPY --from=builder /app/package*.json ./

ARG PORT=8080
ENV PORT ${PORT}
# 添加后端端口环境变量，统一配置
ENV SERVER_PORT=5000

EXPOSE ${PORT} ${SERVER_PORT}

CMD ["npm", "start"]

2. 调整API调用路径，适配容器环境 #

本地用localhost:5000没问题，但容器内前后端同环境，推荐两种适配方案：

• 方案一：环境变量动态切换
  修改根目录package.json的启动脚本，添加环境变量：

  "scripts": {
    "start": "cross-env NEXT_PUBLIC_API_DOMAIN=http://localhost:5000 concurrently \"npm run start:server\" \"node index.js\""
  }
  

  然后API调用改为：

  export const apiDomain = process.env.NEXT_PUBLIC_API_DOMAIN || 'http://localhost:5000';
  const res = await fetch(`${apiDomain}/api/global`);
  

• 方案二：入口文件添加反向代理
  安装http-proxy依赖：npm install http-proxy，然后修改根目录index.js，把API请求转发到后端：

  const http = require('http');
  const { parse } = require('url');
  const next = require('next');
  const httpProxy = require('http-proxy');
  
  const app = next({ dev: false, dir: __dirname });
  const handle = app.getRequestHandler();
  const proxy = httpProxy.createProxyServer({});
  const options = {};
  
  options.agent = new http.Agent(options);
  process.env.PORT = process.env.PORT || '8080';
  const SERVER_PORT = process.env.SERVER_PORT || '5000';
  
  const middleware = (req, res) => {
    const url = parse(req.url, true);
    // 转发/api开头的请求到后端
    if (url.pathname.startsWith('/api')) {
      proxy.web(req, res, {
        target: `http://localhost:${SERVER_PORT}`,
        changeOrigin: true
      });
    } else {
      handle(req, res, url);
    }
  };
  
  (async () => {
    await app.prepare();
    // 启动后端服务
    require('./server/index.js');
    http.createServer(options, middleware).listen(process.env.PORT);
  })();
  

  之后前端API调用可简化为相对路径：

  const res = await fetch('/api/global');
  

3. 优化启动脚本 #

确保启动脚本同时拉起前后端，且生产环境使用自定义HTTP服务器入口：

"scripts": {
    "build:next": "next build",
    "build": "npm run build-backend && npm run build-frontend",
    "start:server": "cd server && npm start",
    "start": "concurrently \"npm run start:server\" \"node index.js\"",
    "build-frontend": "npm run build:next",
    "build-backend": "cd server && npm install"
  },

注：无需在build-frontend重复执行npm install，构建阶段已完成依赖安装。

4. 验证后端端口配置 #

确保server/index.js监听端口与环境变量一致：

// server/index.js示例
const express = require('express');
const app = express();
const port = process.env.SERVER_PORT || 5000;

app.get('/api/global', (req, res) => {
  res.json({ data: 'your backend data' });
});

app.listen(port, () => {
  console.log(`Backend running on port ${port}`);
});

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