Docker化Angular应用路由搭配Nginx时的访问异常问题

嗨，我来帮你搞定这个问题！你遇到的情况其实是单页应用（SPA）Docker化后的常见坑——Angular的路由是在浏览器端处理的，而Nginx默认会把非根路径的请求当成静态文件去查找，找不到就返回它的默认欢迎页面了。咱们一步步来解决：

问题根源 #

Angular的前端路由（比如/dashboard、/profile这类）并不是服务器上真实存在的文件路径。当你直接在地址栏输入这些路径，或者刷新页面时，Nginx会去服务器上找对应的文件，找不到就会返回默认的Nginx页面，这就是问题所在。

解决方案：自定义Nginx配置+调整Docker配置 #

1. 准备自定义Nginx配置文件 #

在你的Angular项目根目录下新建一个nginx.conf文件，内容如下：

server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html index.htm;

    # 核心：让Nginx把所有路由请求转发到Angular的入口文件index.html
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 可选：如果你的前端需要调用Spring Boot后端API，可以在这里配置代理
    # 比如前端请求/api开头的接口，转发到readly-api服务的8088端口
    location /api/ {
        proxy_pass http://readly-api:8088/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

这个配置的关键是try_files规则，它告诉Nginx：如果请求的路径不存在，就返回index.html，让Angular的路由系统来接管请求。

2. 修改Angular项目的Dockerfile #

在Angular项目根目录下的Dockerfile（如果没有就新建）里，加入复制自定义Nginx配置的步骤：

# 第一步：构建Angular生产环境包
FROM node:18-alpine AS build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
# 替换成你的Angular项目名称，或者用--output-path指定输出目录
RUN npm run build --prod

# 第二步：用Nginx作为静态服务器
FROM nginx:alpine AS production-stage
# 把自定义配置替换Nginx的默认配置
COPY nginx.conf /etc/nginx/conf.d/default.conf
# 把构建好的Angular静态文件复制到Nginx的默认静态目录
COPY --from=build-stage /app/dist/your-angular-project-name /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

记得把your-angular-project-name替换成你实际的Angular项目名称，或者改成你执行ng build后生成的目录名。

3. 完善Docker Compose中的前端服务配置 #

把你原来的readly-fronte...补全成完整的服务配置：

readly-frontend:
  container_name: readly-frontend
  build: ./path-to-your-angular-project  # 这里填你的Angular项目根目录路径
  ports:
    - 80:80  # 可以根据需要修改端口，比如4200:80
  networks:
    - readly-network
  depends_on:
    - readly-api

4. 重新构建并启动服务 #

执行以下命令更新服务：

# 构建前端镜像
docker-compose build readly-frontend
# 重启所有服务
docker-compose up -d

现在你再访问根路径，导航到其他路由，或者直接在地址栏输入路由路径，应该就不会再跳转到Nginx的默认欢迎页面啦！

备注：内容来源于stack exchange，提问作者Mohamed Boukthir