代码之家 › 专栏 › 技术社区 › bluprince13

反向代理到静态网站不工作

zeit-now netlify nginx-reverse-proxy nginx-location nginx

bluprince13 · 技术社区 · 7 年前

我有一个nginx服务器在运行 www.example.com .

在其中,我为我的一个静态网站设置了一个反向代理 Zeit now .

location /apps/app1/ {
    proxy_pass https://app1.username.now.sh;
}

但是,当我访问 www.example.com/apps/app1 ,我得到了正确的浏览器选项卡名称(“react app”,在我的情况下,因为我的静态网站是用react创建的,默认名称是“react app”)。

在浏览器控制台中,我看到以下错误:

GET https://www.example.com/static/css/1.621e483e.chunk.css net::ERR_ABORTED 404 (Not Found)
GET https://www.example.com/manifest.json 404 (Not Found)
Manifest: Line: 1, column: 1, Unexpected token.

当我的静态网站托管在 Netlify . NetLify客户服务告诉我他们不支持反向代理,但是我可以使用他们自己的代理。 redirects 。

为什么我不能反向代理到外部URL的静态网站?有办法解决这个问题吗?

更新1: 我正在尝试反向代理 bluprince13.com/apps/renting-vs-buying/ 到 renting-vs-buying.bluprince13.now.sh

0 回复 | 直到 7 年前

cnst 7 年前

你应该这样做吗?

我不建议这样做,因为一个简单的原因:因为你不控制上游,他们明确地告诉你,他们不支持你的方案,他们可以决定在任何时候阻止你的代理服务器,然后你的整个网站会因为不支持的设置而关闭。这就是很多人尝试用CydDFLARE在一天内修复破碎的TunBLR(回到白天,从TUBLR获得空白页面是非常普遍的,所以,在它前面放置CyrdFLARE,实际上加速了它,并修复了空白页面问题)。

如何做到。

但是,如果你仍然想用nginx来做,这很简单,这是围绕nginx的一个非常流行的问题:

serverfault.com/a/562850

基本上你只需要绘制 /apps/app1/ 在前端 / 在后端,可以这样做,注意尾随斜杠在这里非常重要,根据 http://nginx.org/r/proxy_pass (将其称为“uri”):

location /apps/app1/ {
    proxy_pass https://app1.username.now.sh/; # DO NOT REMOVE trailing slash!
}

Fabiano 7 年前

可能您的路径与静态不匹配,因为加载时它会在 / 上下文而不是 /apps/app1/ . 因此,它不会与您的位置匹配,也不会代理您的站点。

我建议您在代理服务器和主机中使用相同的路径,或者您需要重写URL,但是您需要为应用程序提供的静态信息找到每个路径模式。

如果有可能,请尝试在 / 上下文和放置相同的基本头来帮助应用程序更好地解析。

server {
    listen 80;
    server_name app1.example.com;

    location / {
        proxy_set_header HOST $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        proxy_pass https://app1.username.now.sh/;
    }
}

希望有帮助。

请注意:我认为您应该避免使用反向代理。您确定没有比设置CNAME记录DNS更好的解决方案吗?

Alexander Azarov 7 年前

这是可能的,但它有技术上的缺点(除了明显考虑到您可能违反了上游的服务条款之外)。

我的整个配置如下:

server {
  server_name localhost;
  listen *:8000;

  location /apps/ {
    sub_filter 'href="/c' 'href="/apps/c';
    sub_filter 'href="/f' 'href="/apps/f';
    sub_filter 'href="/m' 'href="/apps/m';
    sub_filter 'href="/s' 'href="/apps/s';
    sub_filter 'src="/s'  'src="/apps/s';
    sub_filter_once off;
    proxy_set_header Accept-Encoding "";
    proxy_pass https://renting-vs-buying.bluprince13.now.sh/;
  }
}

这里,nginx被配置为使用其 sub_filter 模块。我们指定要查找和替换的字符串。因为您的HTML可能是由类似Webpack的东西生成的,并且没有换行符,所以我们需要在每一行中重复替换,这就是为什么 sub_filter_once off 。

关于 Accept-Encoding . nginx能够在 text/html 响应。只有。这意味着没有压缩。由于后端喜欢使用压缩内容进行响应,我们需要告诉它不要这样做。

注意事项:

静态过滤器列表是脆弱的:当在后端添加一些新前缀时,应用程序可能会中断;
您在代理和后端之间浪费带宽,因为不可能使用压缩。

我建议最好的选择是更改您的应用程序,以便它在 /apps 前缀。你会立刻避免所有的头痛。

bluprince13 7 年前

这是对我有用的,但我只是在下面回答的其他人的帮助下才找到答案。事后看来,这似乎很简单,我为自己没弄明白而感到很傻!

响应的HTML包含CSS和JS文件的绝对URL。浏览器最初从/apps/app1前缀加载HTML页面,但随后它尝试从/static、/favicon、/css等加载资产,但没有任何内容!

问题是应用程序使用绝对引用。我所要做的就是改变我的应用程序,使用相对引用。使用react,您可以通过将其放入package.json轻松完成此操作(请参见docs here ):

"homepage": ".",

现在,浏览器将正确加载来自/apps/app1/static、/apps/app1/favicon、/apps/app1/css等的资产。