Docker部署Angular17+Nginx遇403/500错误，API代理正常

核心问题点 #

1. Angular构建产物路径错误：Angular17构建后，静态前端文件实际存放在dist/feedyre/browser目录下，当前Nginx配置的根目录指向/usr/share/nginx/html/feedyre，无法找到入口index.html，导致403/500错误。
2. Nginx端口映射不匹配：配置里Nginx监听8080端口，但你访问的是localhost:9000，需确保Docker运行时完成端口映射。
3. proxy_pass地址格式错误：配置中http://http://localhost:8000/api/多了一个http://，属于无效地址。
4. 容器内访问宿主机服务问题：容器内的localhost指向容器自身，无法直接访问宿主机的8000端口后端服务。

分步修复 #

1. 修正Dockerfile的产物复制路径 #

将Angular构建后的browser文件夹直接复制到Nginx的静态文件根目录：

FROM node:20.10.0 as build-env

WORKDIR /app

COPY . .
RUN npm install
RUN npm run build

FROM nginx:alpine
# 仅复制browser目录下的静态文件到Nginx默认html目录
COPY --from=build-env /app/dist/feedyre/browser /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

2. 修正Nginx配置文件 #

调整根目录路径、修复proxy_pass格式，并解决宿主机服务访问问题：

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    client_max_body_size 10M;
    include         /etc/nginx/mime.types;
    default_type    application/octet-stream;
    
    log_format  main    '$remote_addr - $remote_user [$time_local] "$request" '
                        '$status $body_bytes_sent "$http_referer" '
                        '"$http_user_agent" "$http_x_forwarded_for"'; 

    access_log  /var/log/nginx/access.log  main;    
    
    sendfile        on;
    
    keepalive_timeout  65;
    
    server {
        listen 8080;
        server_name  feedyre;
        
        # 静态文件已直接放在html目录下，无需额外子路径
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        include /etc/nginx/mime.types;

        gzip on;
        gzip_min_length 1000;
        gzip_proxied expired no-cache no-store private auth;
        gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

        # 修复proxy_pass格式，替换为宿主机可访问地址
        location /api/ {
            # Docker Desktop环境用host.docker.internal，Linux环境替换为宿主机实际IP
            proxy_pass http://host.docker.internal:8000/api/;
        }

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

3. 正确启动Docker容器 #

运行容器时将容器8080端口映射到宿主机9000端口：

docker run -d -p 9000:8080 --name angular-feedyre [你的镜像名称]

4. 若为SSR项目的额外处理 #

如果你的Angular项目是SSR（存在server文件夹），仅用Nginx无法处理SSR请求，需调整Dockerfile运行Node服务：

FROM node:20.10.0 as build-env

WORKDIR /app

COPY . .
RUN npm install
RUN npm run build

FROM node:20.10.0-alpine

WORKDIR /app

COPY --from=build-env /app/dist/feedyre/server ./server
COPY --from=build-env /app/package*.json ./

RUN npm install --production

EXPOSE 4000

CMD ["node", "server/server.mjs"]

之后再用Nginx反向代理指向Node服务的4000端口即可。

内容的提问来源于stack exchange，提问作者Олег Старовойтенко