通过Nginx反向代理访问Docker化Angular应用时资源加载404问题

问题现象 #

直接通过localhost:4200访问Docker部署的Angular应用时，页面及所有静态资源加载正常；但通过Nginx反向代理（域名example.com）访问时，页面仅能加载HTML框架，所有脚本、样式等静态资源均返回404错误。

Angular应用的Base URL设置为<base href="/">，例如页面中引入的样式文件<link rel="stylesheet" href="styles-AVJWFAVY.css" media="print" onload="this.media='all'">，访问example.com/styles-AVJWFAVY.css报错404，而localhost:4200/styles-AVJWFAVY.css访问正常。

现有配置 #

反向代理Nginx配置 #

server {
        listen 443 ssl;
        listen [::]:443 ssl;
        http2 on;

        server_name example.com;

        # SSL
        ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
        ssl_trusted_certificate /etc/letsencrypt/live/example.com/chain.pem;

        location / {
                 proxy_pass http://localhost:4200;
        }
}

# HTTP redirect to HTTPS
server {
        listen 80;
        listen [::]:80;

        server_name .example.com;

        location / {
                return 301 https://example.com$request_uri;
        }
}

Dockerfile #

FROM node:latest as build
WORKDIR /usr/local/app
COPY ./ /usr/local/app/
RUN npm install
RUN npm run build

FROM nginx:latest
COPY --from=build /usr/local/app/dist/app/browser /usr/share/nginx/html
COPY /nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 4200

容器内Nginx配置（nginx.conf） #

server {
  listen 4200;
  listen [::]:4200;
  server_name localhost;

  root /usr/share/nginx/html;
  index index.html index.htm;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

Docker启动命令 #

sudo docker run -d --name personal-website -p 4200:4200 personal-website

解决方案 #

场景1：反向代理Nginx运行在宿主机 #

修改反向代理的Nginx配置，在location /块中添加代理请求头，确保请求完整传递到Docker容器：

location / {
    proxy_pass http://localhost:4200;
    # 添加以下代理头
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

修改完成后重启Nginx服务：sudo systemctl restart nginx

场景2：反向代理Nginx运行在Docker容器 #

若反向代理也是Docker部署，localhost:4200会指向反向代理容器自身而非宿主机，需通过Docker网络实现容器间通信：

1. 创建专用Docker网络：

docker network create nginx-proxy-net

2. 重新启动Angular应用容器并加入该网络：

sudo docker stop personal-website && sudo docker rm personal-website
sudo docker run -d --name personal-website --network nginx-proxy-net -p 4200:4200 personal-website

3. 修改反向代理Nginx的proxy_pass地址为Angular容器名称：

location / {
    proxy_pass http://personal-website:4200;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

4. 重启反向代理Nginx容器。

验证步骤 #

• 查看反向代理Nginx访问日志，确认请求是否转发至目标地址：

tail -f /var/log/nginx/access.log

• 查看Angular容器内的Nginx日志，确认是否收到静态资源请求：

docker logs personal-website

内容的提问来源于stack exchange，提问作者Jan Šimek