Angular 18 SSR手动部署Nginx遇403，求正确部署方案

一、先解决当前Nginx 403错误 #

403错误大概率是权限问题或路径配置逻辑问题，按以下步骤排查修复：

1. 验证文件路径与权限

   • 先确认目标目录下存在index.html：

     ls -l /var/www/dist/home-app/browser/index.html
     

   • 给Nginx运行用户（通常为www-data）赋予目录访问权限：

     # 查看Nginx运行用户
     ps aux | grep nginx | head -1
     # 递归设置目录权限
     sudo chown -R www-data:www-data /var/www/dist/home-app
     sudo chmod -R 755 /var/www/dist/home-app
     

2. 修正Nginx配置逻辑
   你当前的配置仅将/ssr路径代理到SSR服务，不符合Angular SSR的完整渲染逻辑——所有页面请求都需要经过SSR服务处理（静态资源可直接由Nginx托管）。调整配置如下：

   server {
       listen 80;
       server_name localhost;
   
       # 静态资源直接由Nginx托管，提升访问性能
       location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
           root /var/www/dist/home-app/browser;
           expires 1y;
           add_header Cache-Control "public, immutable";
       }
   
       # 所有页面、接口请求转发到Node SSR服务
       location / {
           proxy_pass http://localhost:4000;
           proxy_http_version 1.1;
           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;
       }
   }
   

   调整后重启Nginx：

   sudo nginx -t && sudo systemctl restart nginx
   

二、完整Angular 18 SSR手动部署步骤 #

1. 项目构建 #

在本地或服务器上完成SSR构建：

# 安装依赖（首次部署执行）
npm install
# 构建SSR项目，生成browser和server目录
ng build

构建完成后，dist/home-app目录下会生成browser（静态资源包）和server（SSR服务端代码）两个核心文件夹。

2. 管理Node SSR服务 #

直接用node命令启动服务会在终端关闭后停止，推荐用pm2做进程管理：

# 全局安装pm2
npm install -g pm2
# 启动SSR服务并命名
pm2 start /var/www/dist/home-app/server/server.mjs --name angular-ssr-home-app
# 设置开机自启并保存配置
pm2 startup
pm2 save

3. 部署验证 #

• 访问http://localhost，查看页面源码，若能看到完整的渲染后HTML内容（而非仅根节点标签），说明SSR生效
• 检查pm2服务状态：

  pm2 status
  

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