这种情况几乎都是Nginx虚拟主机配置冲突导致的——当你新增反向代理规则时，很可能覆盖了原有Angular站点的配置，或者域名匹配逻辑出现了问题，让所有80端口的请求都被错误路由了。下面是一步步的排查和修复方案：

1. 检查Nginx虚拟主机配置结构 #

你需要为两个域名配置独立的server块，让Nginx根据server_name区分不同域名的请求。正确的配置应该是这样的：

原有Angular站点的server块 #

server {
    listen 80;
    server_name app.staging.mysite.com;

    # 指向Docker build时复制的Angular静态资源目录
    root /usr/share/nginx/html;
    index index.html;

    # 处理Angular单页应用的路由重写
    location / {
        try_files $uri $uri/ /index.html;
    }
}

新增API反向代理的server块 #

server {
    listen 80;
    server_name account.staging.mysite.com;

    location / {
        # 代理到API容器的5007端口，注意容器网络连通性：
        # 如果Nginx和API容器在同一个Docker网络，直接用容器名（比如api-container）
        # 如果是Docker Desktop环境，也可以用host.docker.internal指向主机
        proxy_pass http://api-container:5007;
        
        # 传递必要的请求头，避免API容器获取不到正确的请求信息
        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;
    }
}

⚠️ 关键注意点：

• 不要在新增的server块里加default_server参数，除非你明确希望它作为默认站点——否则会把所有未匹配到server_name的请求（包括app域名的请求）都导向API代理，导致Angular站点失效。
• 确保API容器和Nginx容器处于同一个Docker网络，否则Nginx无法通过容器名访问API。如果不在同一网络，要么把它们加到同一网络，要么用主机的内部IP（比如172.17.0.1）替代容器名。

2. 验证Nginx配置语法 #

配置修改后，先不要重启容器，先验证配置是否有语法错误：

# 进入Nginx容器执行验证命令
docker exec -it <你的Nginx容器名称> nginx -t

如果输出nginx: configuration file /etc/nginx/nginx.conf test is successful，说明配置没问题；如果有错误，根据提示修正（比如括号不匹配、指令拼写错误等）。

3. 检查Docker端口映射与网络 #

• 确认Nginx容器的80端口正确映射到主机80：执行docker ps，查看Nginx容器的PORTS列是否为0.0.0.0:80->80/tcp或:::80->80/tcp。
• 确认API容器的5007端口映射正确，并且Nginx能访问到API容器：可以在Nginx容器内执行curl http://api-container:5007（替换为你的API容器地址），测试是否能正常返回API响应。

4. 测试与重启 #

1. 修正配置并验证通过后，重启Nginx容器：

docker restart <你的Nginx容器名称>

2. 分别访问app.staging.mysite.com和account.staging.mysite.com，测试两个站点是否都能正常响应。

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