在AWS EC2的Nginx服务器部署Angular 5与Rails遇API 404问题求助

你的Angular页面能正常加载但API请求返回404，核心问题是Nginx没有把API请求转发到正在运行的Rails Puma服务。下面是一步步的排查和解决步骤：

1. 先确认Rails Puma服务是否正常响应 #

先排除Rails本身的问题，登录EC2实例后执行以下操作：

• 检查Puma进程状态：

  ps aux | grep puma
  

  能看到包含RAILS_ENV=production puma的进程说明服务在运行。
• 本地测试Rails API：
  假设Puma默认监听3000端口，执行：

  curl http://localhost:3000/api/your-test-endpoint
  

  如果能返回正常JSON数据，说明Rails服务本身没问题，问题出在Nginx转发配置。

2. 修改Nginx配置，添加API转发规则 #

找到你的Nginx站点配置文件（通常路径是/etc/nginx/sites-available/default或/etc/nginx/nginx.conf里的server块），修改为如下配置：

server {
    listen 80;
    server_name 你的EC2服务器IP;

    # 指向Angular的dist目录，确保路径正确
    root /path/to/your/angular/dist;
    index index.html;

    # 所有/api开头的请求转发到Rails Puma服务
    location /api {
        proxy_pass http://localhost:3000; # 如果Puma用了其他端口，这里对应修改
        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;
    }

    # Angular单页应用路由 fallback，避免刷新页面404
    location / {
        try_files $uri $uri/ /index.html;
    }
}

配置说明： #

• root：必须是你复制的Angular dist文件夹绝对路径，比如/var/www/html（如果放在默认根目录的话）。
• location /api：匹配所有API请求，转发到本地Puma服务，端口要和Puma实际监听的一致。
• location /：处理Angular前端路由，刷新页面时Nginx返回index.html，避免路由跳转404。

3. 验证Nginx配置并重启服务 #

修改后先测试配置合法性：

sudo nginx -t

如果输出nginx: configuration file /etc/nginx/nginx.conf test is successful，说明配置没问题，接着重启Nginx：

sudo systemctl restart nginx

4. 额外检查项 #

• EC2安全组：确保安全组开放了80端口（HTTP）的入站规则，否则外部无法访问服务。
• Rails路由前缀：如果你的Rails API没使用/api前缀，比如直接是/users路径，要么调整Nginx的location规则，要么在Rails的config/routes.rb中添加前缀：

  Rails.application.routes.draw do
    scope '/api' do
      # 所有API路由放在这里
      resources :users
      # ...其他路由
    end
  end
  

  让所有API请求以/api开头，匹配Nginx转发规则。

完成以上步骤后，刷新浏览器测试，应该就能正常获取API数据了。

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