如何部署Angular 11 Universal SSR到Nginx+.NET Core Ubuntu环境

一、核心疑问的直接解答 #

• 构建产物放置规则
  执行npm run build:ssr生成的browser目录，完全可以将内部所有文件直接替换原有wwwroot目录下的旧CSR静态资源，这是最适配你现有目录结构的方案，不需要额外新建静态资源目录。替换前注意保留wwwroot目录的原有权限配置，避免Nginx读取静态资源时出现403权限错误。
• server目录的部署路径
  不建议把server目录放到wwwroot下，直接和现有.NET程序根目录同级放置即可。按照你现有的目录结构，把构建生成的server目录整体放到/home/winnie/www/html/路径下，最终形成的目录结构为：

/home/winnie/www/html/
├─ 所有.NET Core 3.1程序集、dll文件
├─ server/                  # 从构建产物复制的SSR Node服务目录
│  └─ main.js               # Angular 11 SSR的Node服务入口
└─ wwwroot/
   └─ 所有从browser目录复制的静态Angular资源

• Node环境要求
  必须在服务器上安装和你本地构建版本匹配的Node.js LTS环境（Angular 11对应的兼容Node大版本为12/14/16，不建议使用18及以上高版本避免兼容问题）。Angular Universal的SSR渲染逻辑完全由Node.js承载，你不需要单独全局安装Express——Angular 11的SSR构建已经把Express依赖和服务逻辑全部打包进server目录的产物中，你提到“不存在server.js文件”是版本迭代后的正常情况，CLI默认的SSR服务编译后入口为server/main.js，无需额外手写服务代码，安装完Node运行环境即可直接启动服务。

二、SSR服务的常驻进程配置 #

使用系统自带的systemd配置SSR服务自启动，无需额外安装pm2等进程管理工具：

1. 在/etc/systemd/system/路径下新建angular-ssr.service文件，写入配置内容：

[Unit]
Description=Angular Universal SSR Service
After=network.target

[Service]
Type=simple
User=www-data
WorkingDirectory=/home/winnie/www/html/server
ExecStart=/usr/bin/node main.js
Restart=always
RestartSec=3
Environment=NODE_ENV=production
Environment=PORT=4000

[Install]
WantedBy=multi-user.target

2. 依次执行命令启动服务并配置开机自启：

• systemctl daemon-reload
• systemctl start angular-ssr
• systemctl enable angular-ssr
  启动后可以通过curl http://localhost:4000验证服务是否正常返回渲染后的HTML内容。

三、现有Nginx配置的最小调整 #

不需要推翻原有Nginx规则，原有/api/、/content/的代理规则完全保留，仅调整前端路由的转发逻辑即可：

调整逻辑：静态资源由Nginx直接返回，非静态的前端路由请求转发给本地的Angular SSR服务，尽可能降低SSR服务的计算压力
修改后的location /块配置如下：

location / {
    # 先尝试匹配实际存在的静态资源
    try_files $uri @angular_ssr;
}

# 将非静态资源的请求转发给本地SSR服务
location @angular_ssr {
    proxy_pass http://localhost:4000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
    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;
}

同时移除原有location /块里的全局无缓存头配置（add_header Pragma "no-cache"和对应的Cache-Control规则），在配置中补充带hash的静态资源长缓存规则，进一步优化访问性能：

# 对带hash的静态资源设置长缓存
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
    root /home/winnie/www/html/wwwroot;
    expires 1y;
    add_header Cache-Control "public, immutable";
}

四、部署校验注意事项 #

• 确保原有.NET Core API服务依然监听5000端口，和SSR服务的4000端口无冲突
• 替换静态资源后，检查index.html内的资源路径是否正确，避免出现静态资源404
• 访问页面后查看页面源代码，确认返回内容为服务端渲染后的完整HTML，而非仅包含挂载节点的CSR空壳

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