Docker部署Next.js+Node/Express项目异常：页面显示后端默认响应

问题分析 #

核心问题大概率出自这几点：

• Next.js开发服务器默认绑定localhost，容器内的localhost无法被宿主机访问，导致你实际访问到的是后端3001端口的服务
• 容器运行时端口映射配置错误，或者你误访问了后端的3001端口而非前端3000端口
• 开发模式的脚本在容器环境下存在访问限制

解决方案 #

1. 让Next.js开发服务器允许外部访问 #

修改package.json里的dev脚本，强制绑定0.0.0.0：

"dev": "next dev -H 0.0.0.0 -p 3000"

或者在next.config.js中添加配置：

const nextConfig = {
  serverOptions: {
    hostname: '0.0.0.0',
    port: 3000,
  },
}

module.exports = nextConfig

2. 确保容器端口映射正确 #

运行容器时必须显式映射3000和3001端口到宿主机，命令如下：

docker run -p 3000:3000 -p 3001:3001 [你的镜像名称]

访问时务必打开http://localhost:3000，不要访问3001端口。

3. 切换到生产模式部署（推荐） #

开发模式不适合容器部署，改成生产模式更稳定：

• 修改package.json的both脚本：

"both": "npm-run-all -p start server"

• 同时把start脚本配置为：

"start": "next start -H 0.0.0.0 -p 3000"

4. 优化Dockerfile（可选） #

用多阶段构建缩小镜像体积，同时只保留生产需要的文件：

# 构建阶段
FROM node:16 AS builder
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile
COPY . .
RUN yarn build

# 运行阶段
FROM node:16-alpine
WORKDIR /app
COPY --from=builder /app/package.json /app/yarn.lock ./
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY --from=builder /app/server ./server # 替换成你的后端代码目录
RUN yarn install --production --frozen-lockfile

EXPOSE 3000 3001
CMD ["yarn", "both"]

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