如何在Nginx中配置支持带路由参数的React/Express短链接服务

问题根源 #

• Nginx的location默认不支持Express风格的:参数动态路径匹配，你之前加的location /:code只会匹配字面量为/:code的路径，完全不会匹配/random8chars这类实际短链请求
• 你当前的配置把所有请求都转发给了3000端口的React服务，React是客户端单页应用，默认所有路径请求都会返回首页index.html，由前端JS处理路由，不会自动转发到后端服务
• 优先级问题：普通前缀匹配的location /优先级低于正则匹配的location，只要把短链规则用正则写，就会优先命中短链规则，剩下的请求再走React服务

修复步骤 #

1. 修改Nginx配置 #

替换你的/etc/nginx/sites-available/default的server块内容为以下配置，可根据你的短链code规则调整正则：

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    server_name myname.com www.myname.com;

    # 短链规则：假设你的短链code是8位大小写字母+数字组合
    # 如果你的code长度不固定，比如是1-10位，就改成 ~ ^/[a-zA-Z0-9]{1,10}$
    location ~ ^/[a-zA-Z0-9]{8}$ {
        proxy_pass http://localhost:7777;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $remote_addr;
    }

    # 剩余所有请求走React服务，同时兼容React客户端路由
    location / {
        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-Forwarded-For $remote_addr;
        proxy_cache_bypass $http_upgrade;
        # 解决React路由直接访问404问题：如果请求的路径不存在对应静态资源，就返回index.html
        try_files $uri $uri/ /index.html;
    }
}

2. 验证配置并重载Nginx #

执行以下命令测试配置是否合法：

sudo nginx -t

返回test is successful后执行重载生效：

sudo systemctl reload nginx

3. 可选排查项 #

如果仍有问题，确认Express服务确实在本地7777端口正常监听：

ss -tulpn | grep 7777

如果没有返回监听记录，检查你的Express服务启动配置，确保监听的是127.0.0.1或者0.0.0.0。

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