在AWS部署带Scully的Angular应用遇502 Bad Gateway错误求助

一、修正环境依赖安装错误 #

你使用Ubuntu 20服务器却执行了amazon-linux-extras install epel -y——该命令仅适用于Amazon Linux系统，Ubuntu不兼容，这是Puppeteer依赖安装失败的核心原因之一。针对Ubuntu安装Puppeteer依赖，执行以下命令：

sudo apt update
sudo apt install -y libnss3 libatk1.0-0 libatk-bridge2.0-0 libcups2 libdrm2 libxkbcommon0 libxcomposite1 libxdamage1 libxfixes3 libxrandr2 libgbm1 libasound2 libpangocairo-1.0-0 libxshmfence1

安装完成后重新运行npm run scully生成静态内容。

二、解决Scully静态内容加载失败问题 #

1. 确认静态文件存在：检查服务器上的dist/static目录，确认对应路由的HTML文件已生成（如dist/static/blog/my-post.html）。
2. 清理冲突的PM2进程：你同时启动scully、scully:scan、scully:serve会导致端口占用或进程冲突。正确流程是：
   • 先执行npm run build构建Angular项目
   • 执行npm run scully生成静态内容（该命令会自动扫描路由，无需单独跑scully:scan）
   • 仅用PM2启动scully:serve即可
3. 配置Nginx托管静态文件：修改/etc/nginx/sites-available/default（注意你写的defaults应为default），添加以下规则：

   server {
       listen 80;
       server_name 你的域名或服务器IP;
   
       # 优先匹配Scully静态文件
       location / {
           root /你的项目路径/dist/static;
           try_files $uri $uri/ /index.html;
       }
   
       # 如需代理Angular动态内容，添加此规则
       location /api {
           proxy_pass http://localhost:4200;
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
       }
   }
   

   替换路径和域名后，执行sudo nginx -t检查配置，无误后sudo systemctl reload nginx。

三、处理项目大小与AWS限制问题 #

你提到的50MB限制通常针对AWS Amplify或Elastic Beanstalk，若使用EC2 Ubuntu服务器则无此限制——EC2存储容量由实例卷大小决定，2GB项目可正常存放。同时建议优化项目体积：

• 执行npm prune --production只保留生产依赖，缩减node_modules大小
• 清理未压缩的图片、冗余构建产物等不必要资源

四、排查502 Bad Gateway错误 #

502通常是Nginx无法连接后端服务，按以下步骤排查：

1. 检查PM2服务状态：

   pm2 list
   pm2 logs scully-serve
   

   查看日志中是否有端口占用、服务启动失败信息。
2. 确认端口一致：scully:serve默认端口1668，Angularnpm run start默认4200，Nginx代理端口需与实际服务端口匹配。
3. 开放防火墙端口：

   sudo ufw allow 80/tcp
   sudo ufw allow 1668/tcp
   sudo ufw allow 4200/tcp
   sudo ufw reload
   

五、标准部署流程总结 #

1. 将项目代码拉取到EC2服务器
2. 安装依赖：npm install
3. 构建Angular生产包：npm run build --prod
4. 生成Scully静态内容：npm run scully --prod
5. PM2启动Scully服务：pm2 start "npm run scully:serve" --name scully-serve
6. 配置Nginx完成代理或静态托管

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