Docker环境下如何让NextJS容器与主机共用同一URL访问后端？

你遇到的核心问题是NextJS的服务端渲染（SSR）和客户端运行环境不一致：

• 服务端渲染时，代码在frontend容器内执行，http://backend:3000可以通过Docker内部网络直接访问后端容器；
• 客户端代码在浏览器中运行（属于主机环境），无法识别Docker的容器域名backend，只能通过localhost:3000访问映射到主机的后端端口。

下面给出两种可行的解决方案：

方案1：用NextJS API路由做代理（推荐） #

这种方法无需修改Docker或系统配置，依托NextJS开发服务器转发请求，统一用相对路径访问后端。

步骤： #

1. 安装代理依赖（可选，也可直接用原生fetch转发）：

npm install http-proxy-middleware --save-dev

2. 创建代理路由：

• 若使用Pages Router，新建pages/api/proxy/[...path].js：

import { createProxyMiddleware } from 'http-proxy-middleware';

export default function handler(req, res) {
  const proxy = createProxyMiddleware({
    target: process.env.BACKEND_BASE_URI_INTERNAL, // 容器内部访问后端的地址
    changeOrigin: true,
    pathRewrite: {
      '^/api/proxy': '', // 移除代理前缀，转发到后端实际接口路径
    },
  });
  proxy(req, res);
}

// 禁用NextJS默认的body解析，避免代理时出现异常
export const config = {
  api: {
    bodyParser: false,
  },
};

• 若使用App Router，新建app/api/proxy/[...path]/route.js：

import { NextResponse } from 'next/server';
import { createProxyMiddleware } from 'http-proxy-middleware';

const handler = (req) => {
  return new Promise((resolve, reject) => {
    const proxy = createProxyMiddleware({
      target: process.env.BACKEND_BASE_URI_INTERNAL,
      changeOrigin: true,
      pathRewrite: {
        '^/api/proxy': '',
      },
      onProxyRes: () => resolve(NextResponse.next()),
      onError: (err) => reject(err),
    });
    proxy(req, NextResponse.next(), (err) => err && reject(err));
  });
};

export const GET = handler;
export const POST = handler;
export const PUT = handler;
export const DELETE = handler;

3. 修改docker-compose.yml中的环境变量：
   新增一个仅服务端使用的内部地址变量，同时把公开的后端地址设为代理路径：

environment:
  - NEXT_PUBLIC_BACKEND_BASE_URI=/api/proxy
  - BACKEND_BASE_URI_INTERNAL=http://backend:3000
  - NEXT_PUBLIC_CMS_URL=http://cms:1337

4. 前端代码中直接使用process.env.NEXT_PUBLIC_BACKEND_BASE_URI拼接接口路径即可，例如：

fetch(`${process.env.NEXT_PUBLIC_BACKEND_BASE_URI}/api/users`)

原理： #

• 服务端渲染时，NextJS直接将请求转发到Docker内部的http://backend:3000；
• 客户端运行时，请求先发送到NextJS开发服务器（localhost:8000），再由服务器转发到主机的localhost:3000（已映射到后端容器）。

方案2：修改主机hosts文件映射域名 #

通过修改主机hosts，让主机环境也能识别backend域名，从而统一使用http://backend:3000访问。

步骤： #

1. 打开主机的hosts文件：

• Windows：C:\Windows\System32\drivers\etc\hosts（需管理员权限编辑）
• macOS/Linux：/etc/hosts（用sudo命令编辑）

2. 添加一行域名映射：

127.0.0.1 backend

3. 保存文件后，重启浏览器以刷新DNS缓存。

4. 保持docker-compose.yml中的环境变量为：

environment:
  - NEXT_PUBLIC_BACKEND_BASE_URI=http://backend:3000
  - NEXT_PUBLIC_CMS_URL=http://cms:1337

原理： #

• 容器内部：Docker DNS会将backend解析为后端容器的IP；
• 主机环境：hosts文件将backend解析到127.0.0.1（主机自身），而主机的3000端口已映射到后端容器，因此能正常访问。

注意事项 #

• 方案1更适合团队协作，无需要求每个成员修改系统配置；
• 方案2操作更简单，但需要所有开发人员手动配置主机hosts；
• 若使用NextJS静态生成（SSG），服务端渲染场景较少，但仍可能遇到类似跨环境访问问题，方案1同样适用。

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