nginx 上带有 wordrpess 的 React 应用程序无法在 HTTPS 上运行

Question

我正在构建一个带有 wordpress 网站的 React 应用程序。 它应该以这种方式工作：

example.com -> 带我到我的 react 应用 example.com/blog -> 将我带到我的 wordpress 博客。

我有一个运行 nginx 的 EC2，它使用反向代理将用户重定向到我的 wordpress 博客。我的配置是这样的：

  listen 80;
  listen 443 http2 ssl;
  listen [::]:443 http2 ssl;

  server_name example.com;

  root /var/www/react-app/react-app/build;
  index index.html;

  access_log off;
  error_log /var/log/nginx/react-app.error.log;

  location ^~/blog {
   proxy_pass https://54.175.178.245;
   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-Real-IP $remote_addr;
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   proxy_set_header X-Forwarded-Proto $scheme;
  }


  location / {
    try_files $uri /index.html =404;
  }

   location ~*  \.(jpg|jpeg|png|gif|ico|css|js)$ {

     expires 365d;

  }

  location = /favicon.ico {
    alias /var/www/react-app/react-app/build/favicon.ico;
  }

}

我遇到的问题是，当我使用我的服务器的 IP 时它可以正常工作，但是当我转到 example.com 时它不起作用

它只是不会将我重定向到我的 wordpress 应用程序。

值得一提的是，如果我在隐身模式下直接进入 example.com/blog，它确实可以正常工作。

我做错了吗？

编辑：

好的，所以实际上这两行是不需要的：

listen 443 http2 ssl;
listen [::]:443 http2 ssl;

我通过 AWS 上的 ELB 管理我的 SSL 证书，该 ELB 与我的 EC2 服务器相连。

现在我的服务器配置似乎可以正常工作，因为如果我使用 cURL，它可以正常工作。 如果我从 cURL 请求 example.com/blog，它可以正常工作。但它在我的浏览器上无法正常工作。

Answer 1

如果你想反向代理 https，你不能在同一个块上混合 80 和 443

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

    server_name *.example.com;

    root /var/www/react-app/react-app/build;
    index index.html;

    ssl_...
    ...

    access_log off;
    error_log /var/log/nginx/react-app.error.log;

    location /blog/ { # the end trailing slash is important
        proxy_pass https://54.175.178.245/blog;
        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-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location / {
      try_files $uri /index.html =404;
    }

     location ~*  \.(jpg|jpeg|png|gif|ico|css|js)$ {
       expires 365d;
    }

    location = /favicon.ico {
      alias /var/www/react-app/react-app/build/favicon.ico;
    }
}