如何在EC2服务器上用Nginx部署两个React应用？子域名配置失败

核心问题是**admin.12.12.12.12这种格式不合法**——IP地址不能直接添加子域名前缀，DNS系统不支持这种解析方式，这是导致管理员应用无法访问的根本原因。以下是两种可行的解决方案：

方案一：用URL路径区分两个应用（无域名也能用） #

无需域名，直接通过12.12.12.12访问客户端，12.12.12.12/admin访问管理员应用，配置步骤如下：

1. 修改Nginx配置 #

调整配置文件，用location块区分两个应用的路由：

server {
    listen 80;
    server_name 12.12.12.12;

    # 客户端应用路由
    location / {
        root /var/www/client/build;
        try_files $uri $uri/ /index.html;
    }

    # 管理员应用路由
    location /admin {
        root /var/www/admin/build;
        # 重写路径以适配React Router的单页应用特性
        try_files $uri $uri/ /admin/index.html;
        rewrite ^/admin$ /admin/index.html break;
    }

    # API接口代理
    location /api {
        proxy_pass http://localhost:5000;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

2. 调整管理员React应用的路由配置 #

由于使用了/admin路径前缀，需要在React Router中设置basename：

// 管理员项目的路由入口文件
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter basename="/admin">
    {/* 你的路由组件 */}
  </BrowserRouter>,
  document.getElementById('root')
);

3. 重新构建并部署管理员应用 #

重新build项目后，将产物放到指定目录，并确保Nginx有权限访问：

sudo chown -R www-data:www-data /var/www/admin/build
sudo chmod -R 755 /var/www/admin/build

4. 重启Nginx生效 #

sudo nginx -t  # 先检查配置语法是否合法
sudo systemctl restart nginx

方案二：本地hosts映射（仅个人测试用） #

如果只是自己测试需要子域名形式访问，可以在本地电脑的hosts文件中添加映射：

• Windows：C:\Windows\System32\drivers\etc\hosts
• macOS/Linux：/etc/hosts

添加一行映射规则：

12.12.12.12 admin.ec2test.com
12.12.12.12 client.ec2test.com

然后修改Nginx配置：
客户端配置：

server {
    listen 80;
    server_name client.ec2test.com 12.12.12.12;

    root /var/www/client/build;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://localhost:5000;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

管理员配置：

server {
    listen 80;
    server_name admin.ec2test.com;

    root /var/www/admin/build;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

重启Nginx后，你可以在本地用admin.ec2test.com访问管理员应用，但这种方式仅适用于你的电脑，其他用户无法解析该域名。

额外检查项 #

• 确认EC2安全组已开放80端口，允许外部访问
• 检查/var/www/admin/build目录是否存在，且index.html文件正常
• 执行pm2 status确认后端服务正常运行

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