确认是否已开启 NGINX 反向代理。

确认 Angular 应用内的基础 URL 是否已设置为反向代理的 URL。例如：

@NgModule({
    imports: [RouterModule.forRoot(routes, { 
        // 设置基础 URL
        useHash: false,
        relativeLinkResolution: 'legacy'
        })],
    exports: [RouterModule]
})
export class AppRoutingModule { }

在 Dockerfile 中设置运行 Angular 应用的命令，需要加上 --base-href 参数，将其设置为反向代理的 URL。

FROM node:latest as build-stage
WORKDIR /app
COPY package*.json /app/
RUN npm install
COPY ./ /app/
RUN npm run build --prod --base-href /myapp/    # 设置基础 URL
FROM nginx:1.19.0-alpine
COPY --from=build-stage /app/dist/myapp /usr/share/nginx/html
COPY ./nginx-custom.conf /etc/nginx/conf.d/default.conf
CMD ["nginx", "-g", "daemon off;"]

在 NGINX 配置文件 default.conf 中设置反向代理的规则。例如：

server {
     listen 8080;
     root /usr/share/nginx/html;
     index index.html index.htm;
     location /myapp/ {
         try_files $uri $uri/ /index.html;
     }
     location /api/ {
         proxy_pass http://localhost:3000;    # 设置后端代理地址
         proxy_redirect off;
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     }
 }

重新构建 Docker 镜像并启动容器就可以访问 Angular 应用了。

docker build -t myapp-image .
docker run -d --name myapp-container -p 8080:8080 myapp-image