如何在Windows版Nginx上部署Angular 17 SSR及文件夹选择指引

云上老周

2026-7-2

Angular 17 SSR 部署步骤指南

首先明确：dist下的browser和server两个文件夹都需要用到，缺一不可——browser是客户端静态资源，server是SSR服务端运行代码。以下是完整部署步骤：

一、本地验证（可选但推荐）

进入项目根目录，执行启动命令：node dist/server/server.mjs
打开浏览器访问http://localhost:4000，查看页面源码，如果能看到完整的页面HTML结构（不是只有根节点），说明SSR产物正常。

二、生产环境部署（Node.js服务器为例）

1. 上传产物

把本地整个dist文件夹上传到你的服务器，确保browser和server两个子文件夹完整保留。

2. 准备服务器环境

服务器安装Node.js LTS版本（18.x或20.x均可，避免使用太新的不稳定版本）
确保服务器开放对应端口（默认是4000，可在项目的server.ts里修改端口配置）

3. 启动SSR服务

登录服务器，进入dist目录，执行：node server/server.mjs
（更稳妥的方式）用进程管理器pm2维持服务运行：
- 先安装pm2：npm install -g pm2
- 启动服务：pm2 start dist/server/server.mjs --name angular-ssr-app
- 查看服务状态：pm2 status
- 查看运行日志：pm2 logs angular-ssr-app

三、Nginx反向代理配置（可选，优化性能和域名访问）

如果需要用域名访问，或者优化静态资源加载速度，可以配置Nginx：

编辑Nginx配置文件，添加如下片段：

server {
    listen 80;
    server_name 你的域名;

    # 优先处理静态资源，直接返回browser文件夹里的内容
    location / {
        try_files $uri $uri/ @ssr;
        root /path/to/your/dist/browser;
    }

    # 静态资源不存在时，转发请求到SSR服务
    location @ssr {
        proxy_pass http://localhost:4000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}