Next.js 14 Docker容器部署问题：样式丢失与API连接失败

1. 端口无法访问 #

• 启动容器时必须映射主机与容器端口，比如Next.js默认用3000端口，执行命令：docker run -p 3000:3000 [你的镜像名]
• 同时修改Next.js启动绑定地址为0.0.0.0，否则容器内服务仅能在容器内部访问。调整package.json的启动脚本：

  "scripts": {
    "start": "next start -H 0.0.0.0"
  }
  

2. 页面仅显示无样式HTML #

• 检查Dockerfile是否正确构建并复制静态资源，标准示例如下：

  FROM node:20-alpine
  WORKDIR /app
  COPY package*.json ./
  RUN npm install
  COPY . .
  RUN npm run build
  EXPOSE 3000
  CMD ["npm", "start"]
  

• 若使用静态导出方式，需确保执行next export生成out目录，并用静态服务器启动，比如将Dockerfile最后一行改为：CMD ["npx", "serve", "out"]

3. API连接被拒（ECONNREFUSED 127.0.0.1:9900） #

• 容器内的localhost指向容器自身，而非主机或其他容器，因此不能用127.0.0.1调用同Docker环境的API服务。
• 对应解决方案：
  • 用docker-compose管理的话，直接以服务名作为请求地址，比如API服务名为api，则请求地址改为http://api:9900
  • 单独启动容器的话，将两个容器加入同一Docker网络：
    1. 创建网络：docker network create app-network
    2. 启动API容器：docker run --network app-network --name api-service [API镜像名]
    3. 启动Next.js容器：docker run --network app-network -p 3000:3000 [你的Next.js镜像名]，请求地址改为http://api-service:9900
• 额外确认API容器端口已暴露，且容器间网络未被防火墙拦截。

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