Nginx配置HTML落地页与React应用：解决重定向循环及路径问题

一、基础域名加载落地页时的重定向循环问题 #

问题根源 #

原配置中location = /仅匹配精确的/请求，但Nginx的index指令会触发内部重定向：当访问/时，Nginx会自动尝试请求/index.html，而这个请求会被location /捕获并代理到React应用。如果React应用未配置/index.html的路由，就会重定向回/，形成循环。

修正后的Nginx配置 #

server {
    listen 443 ssl;
    listen [::]:443 ssl;

    # 保留原SSL配置
    server_name somedomain.com;

    # 精确匹配根路径，直接返回落地页index.html，避免内部重定向
    location = / {
        root /var/www/welcome;
        try_files $uri /index.html =404;
    }

    # 精确匹配index.html请求，指向落地页目录
    location = /index.html {
        root /var/www/welcome;
    }

    # 所有其他路径代理到React应用
    location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

# 保留原80端口的HTTPS重定向配置
server {
    if ($host = somedomain.com) {
        return 301 https://$host$request_uri;
    }
    if ($host = somedomain.com) {
        return 301 https://$host$request_uri;
    }

    listen 80;
    listen [::]:80;

    server_name somedomain.com;
    return 301 https://$server_name$request_uri;
}

二、落地页放在/welcome路径时的404问题 #

问题根源 #

未配置匹配/welcome路径的Nginx规则，导致该路径下的请求被代理到React应用，但React无对应路由，返回404。

修正后的Nginx配置 #

server {
    listen 443 ssl;
    listen [::]:443 ssl;

    # 保留原SSL配置
    server_name somedomain.com;

    # 处理/welcome路径下的所有请求，指向落地页目录
    location /welcome {
        alias /var/www/welcome; # alias替换location路径为实际目录，避免路径拼接错误
        try_files $uri $uri/ /welcome/index.html =404;
    }

    # 所有其他路径（包括根路径）代理到React应用
    location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

# 保留原80端口的HTTPS重定向配置
server {
    if ($host = somedomain.com) {
        return 301 https://$host$request_uri;
    }
    if ($host = somedomain.com) {
        return 301 https://$host$request_uri;
    }

    listen 80;
    listen [::]:80;

    server_name somedomain.com;
    return 301 https://$server_name$request_uri;
}

配置说明 #

• 使用alias而非root：alias会直接将/welcome路径映射到/var/www/welcome目录，而root会拼接路径（如root /var/www会将/welcome/index.html映射到/var/www/welcome/index.html，也可使用，但alias更直观）。
• try_files指令：优先返回请求的文件，若无则尝试目录索引，最后返回落地页的index.html，确保单页应用路由正常。

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