如何通过Nginx反向代理同域名下两个Node.js应用（Next.js与KeystoneJS）

你的部署方案完全可行，这是生产环境非常常用的同域名多Node.js应用部署方式，当前404问题可通过以下步骤解决：

问题根源 #

你对故障原因的判断是正确的：

1. Nginx当前/admin规则的proxy_pass末尾携带斜杠，会自动把请求路径中的/admin前缀剔除后再转发到3000端口，导致KeystoneJS接收不到完整路径
2. KeystoneJS默认运行在根路径下，没有配置/admin前缀，既无法识别带/admin的请求，也会把静态资源路径指向根路径，被转发到3001端口的Next.js应用，最终返回404

解决步骤 #

1. 修改Nginx配置 #

替换原Nginx配置文件中的对应区块，调整反向代理规则：

server {
    listen 8080;
    listen [::]:8080;
    server_name example.com;
    return 301 https://example.com$request_uri;
}

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

    ssl on;
    ssl_certificate /mypath/example.com/fullchain.pem;
    ssl_certificate_key /mypath/example.com/privkey.pem;
    include /mypath/options-ssl-nginx.conf;
    ssl_dhparam /mypath/ssl-dhparams.pem;

    server_name  example.com;

    location / {
        proxy_pass   http://localhost:3001;
        # 新增代理头，保证应用能识别到真实用户请求信息
        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;
    }

    # ^~ 标记保证该规则优先级高于其他正则匹配规则
    location ^~ /admin {
        # 去掉proxy_pass末尾的斜杠，保留完整路径转发到3000端口
        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;
    }
}

修改完成后执行nginx -s reload重载配置生效。

2. 修改KeystoneJS配置 #

打开backend/keystone.ts文件，在导出的配置中新增basePath字段，指定Keystone的运行前缀：

export default config({
  // 原有所有配置（db、lists、auth等）保持不变，新增以下配置项
  basePath: '/admin',
})

修改完成后重启KeystoneJS服务即可。

验证 #

配置全部生效后，访问https://example.com会正常打开Next.js应用，访问https://example.com/admin会正常打开KeystoneJS后台，两者互不影响。

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