同一EC2实例部署Django与React，实现分域名指向的方案问询

步骤1：配置DNS解析 #

在你的域名服务商后台，添加frontend.domain.com的A记录，指向该EC2实例的公网IP，和server.domain.com的解析方式一致。

步骤2：修改Nginx配置，添加虚拟主机 #

找到Nginx配置文件所在目录（通常是/etc/nginx/sites-available/或/etc/nginx/conf.d/），编辑现有配置文件或新增配置文件，添加针对frontend.domain.com的server块：

# 原有的Django应用配置
server {
    listen 80;
    server_name server.domain.com;

    location / {
        proxy_pass http://localhost:8000;
        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;
    }
}

# 新增的React应用配置
server {
    listen 80;
    server_name frontend.domain.com;

    location / {
        proxy_pass http://localhost:3000;
        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;
        
        # 处理React SPA路由刷新404问题
        try_files $uri $uri/ /index.html;
    }
}

步骤3：验证配置并重启Nginx #

1. 检查配置语法是否正确：

sudo nginx -t

2. 若提示test is successful，重启Nginx生效：

sudo systemctl restart nginx

额外注意事项 #

• React SPA路由处理：如果你的React应用是单页应用，配置中的try_files $uri $uri/ /index.html;可解决页面刷新时的404问题，确保所有路由请求都指向React入口文件。
• HTTPS配置（可选）：如需启用HTTPS，可使用Certbot为两个域名申请SSL证书，再修改Nginx配置监听443端口并配置证书路径。
• EC2安全组：确保安全组开放80（HTTP）和443（HTTPS）端口，允许外部访问；内部的8000、3000端口无需对外开放，由Nginx在实例内部反向代理。
• React应用适配：若React应用中有硬编码的域名或API地址，需调整为frontend.domain.com或动态获取当前域名，避免跨域问题。

内容的提问来源于stack exchange，提问作者vishnu vardhan Gowd