如何在AWS上部署前后端分离的MERN Stack应用？

方案1：前端托管S3+CloudFront，后端部署EC2 #

前端部署步骤 #

• 打包React应用：在前端项目根目录执行 npm run build，生成build文件夹
• 创建S3存储桶：
  • 登录AWS控制台进入S3服务，创建与域名匹配的存储桶（比如www.yourdomain.com）
  • 开启静态网站托管，设置索引文档和错误文档均为index.html（解决React路由跳转问题）
  • 配置桶权限，添加允许公有读取的策略（建议限制仅你的域名可访问）
• 配置CloudFront（推荐，实现加速+HTTPS）：
  • 创建CloudFront分发，源选择刚才的S3存储桶
  • 绑定自定义域名，上传AWS Certificate Manager免费申请的SSL证书
  • 设置默认根对象为index.html，调整缓存行为适配React单页应用路由
• 域名解析：在域名服务商后台，将前端域名（如www.yourdomain.com）指向CloudFront分发域名

后端部署步骤 #

• 准备EC2实例：
  • 选择t2.micro等合适实例类型，配置安全组：开放80/443端口，以及后端服务端口（如3001），可限制访问IP提升安全性
  • SSH连接实例，安装Node.js和PM2：

    # 安装Node.js 18.x版本
    curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
    sudo apt-get install -y nodejs
    # 安装PM2进程管理器
    sudo npm install pm2 -g
    

• 部署后端代码：
  • 通过SCP或Git克隆将后端代码上传到EC2
  • 进入项目目录执行 npm install 安装依赖
  • 创建.env文件，配置数据库连接字符串、服务端口、JWT密钥等环境变量
  • 用PM2启动服务：pm2 start server.js --name "mern-backend"
  • 设置PM2开机自启：执行pm2 startup后按提示运行生成的命令
• 配置Nginx反向代理（可选，实现端口转发与HTTPS）：
  • 安装Nginx：sudo apt install nginx
  • 创建配置文件：sudo nano /etc/nginx/sites-available/api.yourdomain.com
    配置内容：

    server {
        listen 80;
        server_name api.yourdomain.com;
    
        location / {
            proxy_pass http://localhost:3001;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
    }
    

  • 启用配置并重启Nginx：sudo ln -s /etc/nginx/sites-available/api.yourdomain.com /etc/nginx/sites-enabled/，然后执行sudo nginx -t && sudo systemctl restart nginx
• 域名解析：将后端子域名（如api.yourdomain.com）指向EC2实例公网IP

方案2：单EC2服务器部署（Nginx反向代理） #

整体步骤 #

• 准备EC2实例：同方案1的EC2配置，安装Node.js、PM2、Nginx
• 部署前端：将React打包后的build文件夹上传到EC2，存放路径比如/var/www/frontend
• 部署后端：同方案1的后端部署步骤，启动服务在3001端口
• 配置Nginx反向代理：
  • 创建配置文件：sudo nano /etc/nginx/sites-available/yourdomain.com
    配置内容：

    server {
        listen 80;
        server_name yourdomain.com www.yourdomain.com;
    
        # 前端路由处理
        location / {
            root /var/www/frontend;
            try_files $uri $uri/ /index.html;
        }
    
        # 后端API路由转发
        location /api {
            proxy_pass http://localhost:3001;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
    }
    

  • 启用配置并重启Nginx：sudo ln -s /etc/nginx/sites-available/yourdomain.com /etc/nginx/sites-enabled/，然后执行sudo nginx -t && sudo systemctl restart nginx
• 配置HTTPS：通过AWS Certificate Manager申请证书，修改Nginx配置添加443端口监听，绑定证书文件
• 域名解析：将主域名和www域名指向EC2实例公网IP

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