proxy_pass 从通配符子域通过 NGINX

Question

我试图向访问通配符子域的用户显示一个子文件夹：abc.example.com -> example.com/xyz

此 NGINX 服务器块代码正在运行：

server {
   # server name with regexp
   server_name ~^(?<sub>[^.]+)\.example\.com$;
   # this server catches all requests to xxxx.example.com
   # and put "xxxx" to $sub variable
   location / {
        # finally we want to request different URI from remote server
        proxy_pass http://localhost:8000;
        # proxy_redirect will rewrite Location: header from backend
        # or you can leave proxy_redirect off;
        proxy_redirect http://localhost:8000 http://$sub.localhost:8000;
   }
[certbot code]
}

（在问题5249883 中找到）。

但是当用“https:localhost:8000/xyz”替换 proxy_pass 值“ https://localhost:8000 ”时，我得到了这些错误和一个空白页面：

Uncaught SyntaxError: Unexpected token '<'

在socket.io.js和 commons.js 中。

我在 example.com 上运行的应用程序是用 React/Gatsby 构建的。 example.com/demo 正在运行。

编辑：我输入了错误的错误消息，当我尝试不同的东西时出现了这些错误。

Answer 1

问题是（据我所知），Gatsby 在 example.com/[script-address] 托管脚本并使用 NGINX proxy_pass，脚本地址也更改为 example.com/[subfolder]/[script-address] .

对此的解决方案是在gatsby.config设置“路径前缀”值，如下所述： Gatsby 文档。

这样做后，我为我的完整应用程序设置了一个前缀，这并不是我真正想要做的，因为主应用程序仍托管在 example.com 上，我只希望将子域传递给某些子页面。 （子域由用户创建并由主应用程序动态提供）。 令人惊讶的是，（主应用程序和子域）在更改路径前缀后都可以工作。

这似乎只适用于生产构建（您必须在构建时传递一个标志），所以我目前仍然不确定在开发时要做什么。

如果你知道我如何更好地解决这个问题，请给我留言:)

感谢 Ivan 和 Richard 让我走上正轨！

编辑：资产前缀将是更好的方法： https ://www.gatsbyjs.org/docs/asset-prefix/ 它仍然很难看，我认为有一种方法可以通过 NGINX 解决这个问题。 我仍然无法以这种方式使用开发版本。

编辑 2：在我搞砸了 3 天之后，我再次尝试找到类似的问题并很幸运： https : //serverfault.com/questions/840654/nginx-map-subdomain-to- a-subdirectory-on-proxied-server我已将代码更改为：

    location    / {
    proxy_pass http://localhost:8000/xyz$uri/;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_redirect off;

   }

它终于起作用了:)