Docker Compose连接NestJS与NextJS前后端问题（含AWS集群需求）

解决方案 #

1. 容器间通信：用服务名替代host.docker.internal/localhost #

Docker Compose会自动为所有服务创建默认网络，同一网络内的容器可以直接通过服务名互相访问。

• NextJS API内部调用后端时，将请求地址改为http://node-ytalo-backend:3000/grandetabela。node-ytalo-backend是Docker Compose中后端服务的名称，容器能直接解析这个域名，无需依赖host.docker.internal或localhost。

2. 前端浏览器端请求：解决CORS与地址问题 #

浏览器运行在宿主机而非容器内，无法直接通过服务名访问后端，可选择以下两种方案：

方案A：后端配置CORS允许前端来源

在NestJS后端中配置CORS，明确允许前端的访问来源（本地为http://localhost:3010，AWS部署时替换为线上域名）：

// main.ts
async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  // 配置CORS规则
  app.enableCors({
    origin: ['http://localhost:3010', '你的AWS线上前端域名'],
    credentials: true,
  });
  await app.listen(3000);
}
bootstrap();

配置完成后，前端可直接使用http://localhost:3000/grandetabela访问后端。

方案B：NextJS配置反向代理

在NextJS项目的next.config.js中配置反向代理，将前端API请求转发到后端，从根源避免CORS问题：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'http://node-ytalo-backend:3000/:path*', // 容器内用服务名转发
      },
    ];
  },
};

module.exports = nextConfig;

前端代码中将请求地址改为/api/grandetabela，本地开发与容器部署均可正常工作。

3. 优化Docker Compose配置 #

• 移除冗余的links配置：Docker Compose默认网络已支持服务名解析，links属于过时配置。
• 启用自定义网络：取消注释原配置中的networks部分，自定义网络更清晰，可避免与其他容器网络冲突。
• 检查后端端口监听：确保NestJS绑定到0.0.0.0而非localhost，否则容器外无法访问后端服务。

4. 环境变量配置检查 #

如果前端或后端依赖环境变量，需在Docker Compose中正确传递：

• 例如前端可在front-end服务的environment中添加NEXT_PUBLIC_API_URL=http://localhost:3000（本地）或对应线上地址，前端代码中通过process.env.NEXT_PUBLIC_API_URL拼接请求地址。

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