时间戳

首页 > 解决方案 > Nginx 反向代理到 nextjs 和 react-admin

nginx - Nginx 反向代理到 nextjs 和 react-admin

问题描述

我有一个用 nextjs 编写的现有应用程序，因为我需要 SSR。由于我在管理方面不需要 SSR，我想使用 react-admin。我不打算将两者集成，而是让它们作为单独的进程/服务在单独的端口上运行，并让 nginx 进行代理路由。我在配置 react-admin 时遇到了困难。

nginx反向代理位置的配置：

server {
    server_name www.mydomainname.com;

    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $remote_addr;


    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
     }

    location /admin {
        proxy_pass http://127.0.0.1:3001;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
     }

     # 301 Redirect URLs with trailing /'s
     #as per https://webmasters.googleblog.com/2010/04/to-slash-or-not-to-slash.html
     rewrite ^/(.*)/$ /$1 permanent;


     # 301 redirect from custom redirect file
     if ( $redirect_uri ) {
        return 301 $redirect_uri;
     }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/mydomiainname.com/fullchain.pem # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/mydomainname.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

我相信 nginx 配置是正确的。当导航到 /admin 时，react-admin 响应的是一个空白的“React App”页面，而不是从它的根目录“/”路径看到的默认页面。

我尝试在 react-app package.json 文件中设置 'homepage': "/admin" ，但没有任何乐趣。

我如何配置 react-app 以默认将页面提供给 /admin 而不是 /？

标签： nginxnext.jsreact-admin

解决方案

问题很可能是代理到的react-admin路径/admin不仅仅是/. 为避免这种情况，您需要在URL/的末尾添加一个斜杠：proxy_pass

location /admin {
    proxy_pass http://127.0.0.1:3001/;
    ...
}

这在 Nginx 文档的proxy_pass部分中进行了解释，尽管不可否认该语言有点深奥：

如果 proxy_pass 指令是用一个 URI 指定的，那么当一个请求被传递到服务器时，与该位置匹配的规范化请求 URI 的部分将被指令中指定的 URI 替换：

location /name/ {
    proxy_pass http://127.0.0.1/remote/;
}

如果 proxy_pass 没有指定 URI，则请求 URI 以与处理原始请求时客户端发送的相同格式传递给服务器，或者在处理更改的 URI 时传递完整的规范化请求 URI：

location /some/path/ {
    proxy_pass http://127.0.0.1;
}

推荐阅读