☰

如何将两个网站嵌套在同一个 nginx 服务器块中

tag-icon • tag-icon nginx
如何将两个网站嵌套在同一个 nginx 服务器块中

使用 nginx，我尝试在同一个域上设置两个静态网站。第一个是example.com，另一个是 的一个小型 React 应用example.com/haiku。如何做到这一点？

我遇到了example.com/haiku从主 请求样式表和 javascript 文件的问题example.com。由于所有页面资源 URI 都以斜杠开头（例如/static/style.css），因此 nginx 将它们视为属于example.com而不是从 中获取/haiku。

两个网站在服务器上占用单独的目录。example.com位于/srv/http/domain，并且example.com/haiku位于/srv/http/haiku

这是我的 nginx 服务器块的相关部分：

root /srv/http;
location / {
  root /srv/http/domain;
}
location /haiku {
  alias /srv/http/haiku;
}

我已经对这些 nginx 模块进行了研究，我明白为什么现在它不起作用。导航到 可以example.com/haiku/index.html服务该页面，但它对/static/css/style.css和的引用/static/js/main.js正在击中/位置块。我需要某种内部重写，将/static/css/style.css其更改为/haiku/static/css/style.css，即文件所在的位置。我在 Google 或 SE 上找不到类似的问题。

我知道我可以通过获取另一个域名轻松解决这个问题。我知道我也可以设置一个子域名，但我特别想知道是否可以通过将一个静态网站嵌套在另一个网站的请求中来实现这一点，而无需进行 DNS 配置。

我也不想仅仅更改 css 和 js 文件的 URI，因为我希望能够在任何服务器块根上部署这个小型 React 应用程序。

答案1

实现这一点的标准方法是配置应用程序的根 URL，以便它首先生成正确的资源 URL。

https://skryvets.com/blog/2018/09/20/an-elegant-solution-of-deploying-react-app-into-a-subdirectory/展示了 React 配置应用程序基 URL 的一种方法。

在 nginx 端重写 HTML 并不是一个好主意。它会消耗额外的资源，并可能导致不良的副作用。

相关内容