如何在AWS部署Node+Express后端与Angular前端全栈应用？

两种方案的优劣对比 #

双端口分离部署 #

把前后端分开部署，比如前端托管在S3+CloudFront，后端部署到EC2/Elastic Beanstalk，各自使用独立端口。这种模式的优势是前后端能独立扩容、维护，适合流量较大或需要精细化管理的场景；但缺点是必须处理跨域问题（生产环境需在后端配置CORS规则），且用户访问时要区分前端地址和后端API地址。

Nginx代理统一端口 #

将前后端部署在同一台服务器（如EC2），用Nginx作为反向代理：用户访问80/443端口时，静态资源直接返回Angular页面，API请求自动转发到后端3000端口。这种模式部署简单，用户只需记住一个访问地址，无需处理跨域，适合小型应用或快速上线的场景。

Nginx代理统一端口的具体操作步骤 #

一、EC2服务器准备 #

1. 选择合适的EC2实例（如t2.micro免费版），配置安全组：开放80端口（HTTP），若需HTTPS则额外开放443端口；3000端口仅允许服务器自身访问（安全组源设为127.0.0.1/32），避免外部直接访问后端。
2. 安装必要工具：

   # 安装Node.js（以18.x版本为例）
   curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
   sudo apt-get install -y nodejs
   
   # 安装Nginx
   sudo apt update && sudo apt install nginx -y
   

二、前端打包部署 #

1. 本地Angular项目执行生产构建：

   ng build --prod
   

2. 将dist/目录下的静态文件上传到EC2，示例路径为/var/www/angular-app/：

   # 在EC2创建前端文件目录
   sudo mkdir -p /var/www/angular-app
   # 本地通过scp上传文件，替换为你的EC2公网IP和项目名
   scp -r ./dist/your-angular-project/* ubuntu@xxx.xxx.xxx.xxx:/var/www/angular-app/
   

三、后端部署与进程管理 #

1. 将Node/Express项目上传到EC2，示例路径为/home/ubuntu/express-backend/。
2. 安装生产依赖：

   cd /home/ubuntu/express-backend
   npm install --production
   

3. 配置环境变量：创建.env文件存储RDS连接信息（避免硬编码到代码中）：

   DB_HOST=你的RDS端点地址
   DB_PORT=5432
   DB_USER=数据库用户名
   DB_PASSWORD=数据库密码
   DB_NAME=数据库名
   PORT=3000
   

4. 用PM2管理后端进程，防止意外终止：

   sudo npm install -g pm2
   # 启动后端服务并命名
   pm2 start app.js --name express-backend
   # 设置开机自启
   pm2 startup systemd
   pm2 save
   

四、Nginx代理配置 #

1. 备份默认Nginx配置：

   sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/default.bak
   

2. 编辑默认配置文件：

   sudo nano /etc/nginx/sites-available/default
   

3. 替换为以下配置（根据实际路径和API前缀调整）：

   server {
       listen 80 default_server;
       listen [::]:80 default_server;
   
       root /var/www/angular-app;
       index index.html index.htm;
   
       server_name _;
   
       # 处理Angular单页应用路由，避免刷新页面404
       location / {
           try_files $uri $uri/ /index.html;
       }
   
       # 转发/api前缀的请求到后端3000端口
       location /api {
           proxy_pass http://localhost:3000;
           proxy_http_version 1.1;
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection 'upgrade';
           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;
           proxy_cache_bypass $http_upgrade;
       }
   }
   

4. 验证Nginx配置合法性：

   sudo nginx -t
   

5. 重启Nginx生效：

   sudo systemctl restart nginx
   

五、部署验证 #

• 访问EC2公网IP，应能正常显示Angular前端页面。
• 测试API接口（如http://你的EC2IP/api/xxx），能返回后端数据则说明部署成功。

额外补充 #

• 若需HTTPS，可使用Let's Encrypt免费证书，配置Nginx监听443端口并将HTTP请求重定向到HTTPS。
• 后期若需扩容，可切换为双端口分离部署：前端托管S3+CloudFront，后端部署到Elastic Beanstalk/ECS，搭配API Gateway作为入口，这种架构弹性更强，但需在后端配置CORS允许前端域名访问。

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