Docker部署Angular应用后localhost无法访问的问题求助

针对你遇到的Angular应用容器化后无法访问的问题，分两种场景给出具体修复方案：

一、开发场景（使用ng serve运行） #

你的第二个Dockerfile无法访问的核心问题是：ng serve默认仅监听容器内部的localhost，外部请求无法穿透到容器内。

修复方法 #

方案1：修改Dockerfile的启动命令

直接指定ng serve监听所有地址：

FROM node:16-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
# 替换原CMD，强制监听0.0.0.0
CMD ["ng", "serve", "--host", "0.0.0.0"]

方案2：修改项目的package.json

在项目根目录的package.json中修改start脚本：

"scripts": {
  "start": "ng serve --host 0.0.0.0",
  // 保留其他原有脚本
}

修改后Dockerfile的CMD ["npm", "start"]可以保持不变。

重新构建运行

执行命令重新构建并启动容器：

docker build -t mydhid/project . && docker run -p 4200:4200 -d mydhid/project

二、生产场景（推荐使用Nginx部署静态文件） #

第一个Dockerfile采用多阶段构建更适合生产环境，但存在两处关键问题：端口映射错误、可能缺少Angular路由的Nginx配置支持。

优化后的Dockerfile #

FROM node:16-alpine as node
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
# 构建生产环境包
RUN npm run build --prod

FROM nginx:alpine
# 覆盖默认Nginx配置，添加Angular单页应用路由支持
COPY <<EOF /etc/nginx/conf.d/default.conf
server {
    listen 80;
    root /usr/share/nginx/html;
    index index.html index.htm;

    # 处理Angular前端路由，刷新页面或访问子路由时不会404
    location / {
        try_files $uri $uri/ /index.html;
    }
}
EOF
# 复制构建后的静态文件到Nginx目录（确认dist后的文件夹名称与本地构建结果一致）
COPY --from=node /app/dist/front-end-blog-demo /usr/share/nginx/html
# 暴露Nginx默认监听的80端口
EXPOSE 80

正确运行命令 #

Nginx默认监听容器内80端口，需将本地4200端口映射到容器80端口：

docker run -p 4200:80 -d mydhid/project

额外排查步骤 #

1. 检查静态文件是否正确复制（针对Nginx方案）：
   进入容器查看文件是否存在：

   docker exec -it <容器ID> ls /usr/share/nginx/html
   

2. 查看容器日志排查错误：

   docker logs <容器ID>
   

3. 本地验证Nginx配置：将本地dist目录的文件放到本地Nginx的html目录，使用上述Nginx配置测试是否能正常访问，排除容器外的配置问题。

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