AWS部署选型咨询：React前端、Node.js后端及PostgreSQL数据库

针对你的场景，给你推荐几个适合部署React前端的AWS服务，按生产环境实用性排序：

1. S3 + CloudFront（首推：低成本、高性能、易维护） #

这是AWS托管静态前端的标准方案，完全适配你的架构：

• 核心优势：S3存储编译后的React静态文件（成本极低），CloudFront作为全球CDN加速访问，自动处理HTTPS、缓存策略，还能隐藏S3桶的直接访问地址，提升安全性。
• 操作步骤：
  1. 编译React项目：在本地执行 npm run build，生成build文件夹（包含所有静态资源）。
  2. 创建S3桶：禁用“阻止公共访问”选项，配置桶策略允许CloudFront访问（避免直接公开S3桶）。
  3. 配置CloudFront分发：源指向你的S3桶，绑定自定义域名（可选，用AWS Certificate Manager免费申请HTTPS证书），设置缓存规则优化前端加载速度。
  4. 跨域处理：在S3桶的CORS配置中添加允许EC2后端域名的规则，同时在Node.js后端用cors包配置允许前端域名的请求。

2. AWS Amplify（省心之选：全托管CI/CD） #

如果不想手动管理基础设施，Amplify是专为前端/全栈应用设计的托管服务，适合新手快速上线：

• 核心优势：支持Git自动构建部署（推代码就自动更新前端），内置环境管理、HTTPS、CORS配置，不用折腾服务器。
• 操作步骤：
  1. 安装Amplify CLI：npm install -g @aws-amplify/cli，然后在React项目根目录执行amplify init初始化项目。
  2. 添加托管服务：执行amplify add hosting，选择“Hosting with Amplify Console”，跟着提示完成配置。
  3. 部署：执行amplify publish，或者把代码推到Git仓库（GitHub/GitLab等），Amplify会自动构建并部署前端。
  4. 跨域处理：在Amplify控制台的“设置”里配置CORS规则，或者在Node.js后端直接允许Amplify分配的前端域名。

3. 与Node.js后端同部署在EC2（测试场景可选） #

如果是测试阶段不想多管理服务，可以把前端静态文件和后端部署在同一台EC2上，但不推荐生产环境：

• 核心优势：操作简单，不用额外配置其他服务，适合快速验证功能。
• 操作步骤：
  1. 编译React项目得到build文件夹，把文件传到EC2的Nginx/Apache根目录（比如/var/www/html）。
  2. 配置Nginx：把/api开头的请求转发到Node.js服务的端口（比如3000），其他路径返回前端静态文件。示例Nginx配置片段：

     location /api {
         proxy_pass http://localhost:3000;
         proxy_set_header Host $host;
     }
     location / {
         root /var/www/html;
         try_files $uri $uri/ /index.html; # 处理React路由
     }
     

  3. 注意：EC2安全组要开放80/443端口，配置HTTPS，而且要确保EC2资源足够支撑前端和后端的流量。

必做的关键配置 #

• 跨域（CORS）：不管用哪种方案，Node.js后端必须配置CORS规则，允许前端域名发起请求。示例代码：

  const cors = require('cors');
  app.use(cors({
      origin: '你的前端域名', // 比如https://your-frontend.cloudfront.net
      credentials: true // 如果需要携带cookie等凭证，开启这个
  }));
  

• 环境变量：React前端的API地址要设置为EC2的公网弹性IP或自定义域名，不要用localhost。生产环境建议用Route 53绑定域名，避免IP变动影响服务。
• 安全配置：EC2安全组只允许前端服务的IP/域名访问后端端口；RDS放在私有子网，安全组只允许EC2的私有IP访问，禁止公开访问数据库。

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