Angular SSR在Docker与Nginx环境下无法正常工作求助

核心排查&修复方向 #

1. 修正Nginx请求转发逻辑 #

这是最常见的问题根源：Nginx直接返回静态index.html，而非将路由请求转发到SSR Node服务。需调整配置，让静态资源直接返回，其余请求全部转发到SSR服务。

2. 确认Docker内SSR服务正常运行 #

进入容器执行curl localhost:4000（对应SSR服务端口），检查是否返回SSR渲染的动态HTML。若未返回，说明服务未正确启动，需排查构建产物路径或启动命令。

3. 确保Docker完整复制SSR构建产物 #

Angular Universal构建后会生成dist/{项目名}/browser（静态资源）和dist/{项目名}/server（SSR服务端bundle）两个目录，Docker镜像必须完整复制这两个目录。

针对性代码修正建议 #

server.ts 检查&调整 #

确保静态资源路径与容器内路径一致，且服务监听所有网络接口：

import { join } from 'path';
import { existsSync } from 'fs';
import express from 'express';

const app = express();
const distFolder = join(process.cwd(), 'dist/{你的项目名}/browser');
const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

// 确保监听0.0.0.0，允许容器外部访问
app.listen(process.env.PORT || 4000, '0.0.0.0', () => {
  console.log(`SSR服务已启动: http://localhost:${process.env.PORT || 4000}`);
});

// 保留其余原有SSR配置逻辑

Dockerfile 修正 #

确保构建阶段完整生成产物，生产阶段仅复制必要文件：

# 构建阶段
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build:ssr

# 生产阶段
FROM node:18-alpine
WORKDIR /app
COPY --from=builder /app/dist ./dist
COPY --from=builder /app/package*.json ./
RUN npm ci --only=production
EXPOSE 4000
# 确认命令对应正确的server bundle路径
CMD ["node", "dist/{你的项目名}/server/main.js"]

docker-compose.yml 检查 #

确保端口映射正确，服务依赖顺序合理：

version: '3.8'
services:
  ssr-server:
    build: .
    ports:
      - "4000:4000"
    environment:
      - NODE_ENV=production
  nginx:
    image: nginx:alpine
    ports:
      - "80:80"
    volumes:
      - ./app.conf:/etc/nginx/conf.d/app.conf
      - ./dist/{你的项目名}/browser:/usr/share/nginx/html
    depends_on:
      - ssr-server

app.conf (Nginx配置) 关键修正 #

server {
    listen 80;
    server_name localhost;

    # 静态资源直接返回
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        root /usr/share/nginx/html;
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # 所有非静态请求转发到SSR服务
    location / {
        proxy_pass http://ssr-server:4000;
        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;
    }
}

验证步骤 #

1. 重新构建镜像：docker-compose build
2. 启动服务：docker-compose up
3. 访问http://localhost，查看页面源码，确认包含动态渲染内容（而非纯静态index.html）
4. 若问题仍存在，进入Nginx容器执行curl http://ssr-server:4000，判断是转发问题还是SSR服务本身故障

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