如何在同一AWS服务器配置Nginx部署Rails MVC与React应用

步骤1：准备React静态资源 #

先在本地构建React应用，生成生产环境静态文件：

npm run build

将生成的build文件夹上传到AWS服务器的指定目录，比如/var/www/react-app/build。

步骤2：修改Nginx站点配置 #

找到现有Rails应用的Nginx配置文件（通常位于/etc/nginx/sites-available/your-domain.conf或/etc/nginx/sites-enabled/your-domain.conf），修改为以下内容：

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

    # 转发API请求到Rails（由Passenger处理）
    location /api {
        root /var/www/rails-app/public; # 替换为你的Rails应用public目录路径
        passenger_enabled on;
        passenger_ruby /path/to/your/ruby-executable; # 替换为你的Ruby路径，比如 /usr/local/rvm/gems/ruby-3.2.0/wrappers/ruby
        passenger_app_env production; # 根据实际环境调整（development/production）
    }

    # 处理React静态资源（JS/CSS/图片等），设置长期缓存提升加载速度
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        root /var/www/react-app/build; # 替换为你的React build目录路径
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # 处理React SPA路由：所有非API、非静态资源的GET请求返回index.html
    location / {
        root /var/www/react-app/build;
        try_files $uri $uri/ /index.html;
    }

    # （可选）若已配置HTTPS，添加以下SSL配置
    # listen 443 ssl;
    # ssl_certificate /path/to/your/ssl/certificate.pem;
    # ssl_certificate_key /path/to/your/ssl/private-key.pem;
}

关键配置说明 #

• API路由分流：通过location /api将所有以/api开头的请求转发给Rails应用，由Passenger处理后端逻辑。
• 静态资源缓存：对React的静态资源设置长期缓存，减少重复请求。
• SPA路由兼容：try_files $uri $uri/ /index.html确保React前端路由（如/dashboard、/profile）能正常工作，Nginx会将这类请求转发到React的index.html，由React Router处理。

后续验证 #

1. 检查Nginx配置合法性：

sudo nginx -t

2. 重启Nginx使配置生效：

sudo systemctl restart nginx

3. 访问域名验证：
   • 直接访问域名会加载React应用
   • 访问your-domain.com/api/xxx会触发Rails的API接口

注意事项 #

• 确保Nginx进程对Rails和React的目录有读取权限，可通过设置目录所属用户组为www-data（Nginx默认运行用户）：

sudo chown -R www-data:www-data /var/www/rails-app
sudo chown -R www-data:www-data /var/www/react-app

• 如果你的Rails API不是以/api开头，只需修改location的匹配规则（比如location /v1）即可。
• 若React不是单页应用，可移除location /中的try_files规则，直接指向静态页面即可。

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