Nginx反向代理到nextjs和react-admin

时间:2019-02-09 04:51:03

标签: nginx next.js react-admin

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

  • 在127.0.0.1:3000上运行的nextjs
  • 在127.0.0.1:3001上运行的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而不是/ admin?

1 个答案:

答案 0 :(得分:2)

问题可能是代理到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/;
}
     

如果指定了不带URI的proxy_pass,则请求URI以与原始请求处理时客户端发送的格式相同的形式传递到服务器,或者在处理更改的URI时传递完整的规范化请求URI: / p>

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