如何运行带SSR的Angular构建产物并配置Nginx反向代理？

一、为什么ng serve会报错？ #

ng serve是开发环境专属命令，必须在包含angular.json、src等文件的完整Angular项目工作区目录下才能运行。你服务器上只有构建后的dist产物，没有完整的项目工作区文件，所以这个命令完全不适合用于生产部署，直接弃用即可。

二、正确启动Node SSR服务的步骤 #

Angular SSR构建完成后，dist目录下会生成两个核心子目录：browser（前端静态资源）和server（SSR Node服务代码），启动服务只需要操作server目录：

1. 找到SSR服务入口：进入dist/server目录，确认存在main.js（这是server.ts编译后的执行文件）
2. 启动服务：
   • 直接启动：node main.js
   • 生产环境推荐用pm2后台运行：pm2 start main.js --name angular-ssr（需要先安装pm2：npm install -g pm2）
3. 启动前检查：
   • 服务器Node.js版本要和本地开发环境一致（用node -v确认）
   • 如果启动报错，确保服务器已安装项目依赖：在项目根目录（需上传package.json）执行npm install --production

三、Nginx反向代理配置 #

目标：静态资源由Nginx直接返回，动态请求（需要SSR渲染的）转发给Node服务，示例配置如下（假设Node服务运行在localhost:4000）：

server {
    listen 80;
    server_name your-domain.com;

    # 优先返回前端静态资源
    location / {
        root /path/to/your/dist/browser;
        try_files $uri $uri/ @ssr;
    }

    # 动态请求转发给SSR Node服务
    location @ssr {
        proxy_pass http://localhost: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;
    }

    # 可选：如果有后端API，单独配置转发
    location /api {
        proxy_pass http://your-api-server:port;
        proxy_set_header Host $host;
    }
}

配置生效步骤：

1. 将上述配置保存到/etc/nginx/sites-available/angular-ssr
2. 创建软链接到启用目录：ln -s /etc/nginx/sites-available/angular-ssr /etc/nginx/sites-enabled/
3. 验证配置语法：nginx -t
4. 重启Nginx：systemctl restart nginx

四、结合angular.json确认配置正确性 #

确保你的angular.json中SSR相关配置正确，核心字段示例：

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          "outputPath": "dist/browser"
        }
      },
      "server": {
        "builder": "@angular-devkit/build-angular:server",
        "options": {
          "outputPath": "dist/server",
          "main": "server.ts",
          "tsConfig": "tsconfig.server.json"
        }
      }
    }
  }
}

重点确认server节点的outputPath为dist/server，这样构建后才会生成正确的Node服务代码目录。

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