将 Vercel/Nextjs 项目安装为不同 Vercel/Nextjs 项目的子目录时出现问题

Question

我有一个包含两个项目的 monorepo -web和docs. 其中每个都是自己的 Vercel 项目，该web项目安装在https://example.com并docs安装在https://docs.example.com。所有这一切都按预期进行。

我现在希望该项目可以在https://example.com/docsdocs上使用。在项目中，我在文件中设置了以下重写。webvercel.json

{
  "rewrites": [
    {
      "source": "/docs/:match*",
      "destination": "https://docs.example.com/:match*"
    },
    { "source": "/(.*)", "destination": "/" }
  ]
}

这适用于主索引文件，但所有相应的 css 和 js 文件都会导致 404。浏览器正在https://example.com/_next查找这些文件，这是不正确的，它应该查看https://docs.example.com/_next。

我该如何进行这项工作？

Answer 1

rewrite vs. redirect

Let's first understand this difference.

重写仅发生在服务器上。服务器将重写所请求的URL，并搜索重写后的URL的内容。客户对此一无所知。例如，如果/a.html 被重写为/b.html，客户端将在两个URL 上收到相同的内容。客户端不会知道是否存在同一个文件两次，或者一个（或两个）请求是否已被重写到某些其他资源。

重定向​ on the other hand side involves the client (i.e. browser). If the server is asked for an URL that should be redirected, it will reply back to the client/browser with the destination URL of the rewrite. The client will then send another request for the new URL and make this visible to the end user by changing the address in the navigation bar. If /a.html is redirected to /b.html, the client will not receive the actual content of b.html when requesting a.html, but the browser will update the address to b.html and send a new request.

您的情况下重写有什么问题？

HTML 包含使用绝对路径对其他资源的引用，例如：

<script src="/_next/static/..."></script>

如果该文件应用作docs.example.comand example.com/docs（例如使用重写），则实际的 HTML 将不会更改。因此，浏览器将尝试分别访问docs.example.com/_next/static/...或example.com/_next/static/...。这适用于第一种情况 ( docs.example.com)，但不适用于第二种情况。你已经注意到了。

您可以将basePathnext 更改为/docs。那么 HTML 将包含<script src="/docs/_next/...">. 这将分别使浏览器请求docs.example.com/docs/_next/...或example.com/docs/_next/...。这适用于第二种情况，但不适用于第一种情况。您可以使用更多重写规则来解决第一种情况，但我建议使用 KISS 解决方案。

怎么办？

正如评论中提到的，将完全相同的内容放在两个不同的地址并不是一个好的做法。你可以看到，这也造成了后续的困难。（更不用说搜索引擎对重复内容的惩罚。）

一个好的解决方案是决定将内容存储在哪里。那应该是docs.example.com或者example.com/docs，而不是两者。

使用 docs.example.com，将 example.com/docs/ 转发到 docs.example.com

我建议（并在本节中假设）采取docs.example.com明确的关注点分离。

因此，在 Vercel 中，您需要设置两个项目。一个用于“主”下一个实例，另一个用于“文档”下一个实例。（两者都可以来自同一个存储库，这并不重要。）

然后，您可以将域分配给这两个项目，例如www.example.com“main”项目和docs.example.com“docs”项目。 example.com以及docs.example.com现在应该可以工作。 example.com/docs/应该会产生 404 错误。

vercel.json然后，您可以通过添加如下内容来为“主”项目添加重定向（而不是重写！） ：

{
  "redirects": [
    { "source": "/docs/:path*", "destination": "https://docs.example.com/:path*" }
  ]
}

现在，如果您example.com/docs/foo在浏览器中输入，您应该被重定向到docs.example.com/foo并且页面应该正确加载。

仅使用 example.com/docs/

如果您决定仅在 中包含文档内容example.com/docs/，则解决方案如下：

• 添加basePath: '/docs'到next.config.js下一个项目的文档中。不要将域添加到此 vercel 项目。
• 在“主”下一个项目中添加一个vercel.json重写，如下所示：

{
  "rewrites": [
    { "source": "/docs", "destination": "https://$domain-of-docs-project.vercel.app/docs" },
    { "source": "/docs/:path*", "destination": "https://$domain-of-docs-project.vercel.app/docs/:path*" }
  ]
}

如果您还有其他问题或这不能解决问题，请发表评论。

Answer 2

我认为你可以像这样使用vercel.json ：

{
  "rewrites": [
    {
      "source": "/:path*",
      "has": [
        {
          "type": "host",
          "value": "docs.example.com"
        }
      ],
      "destination": "/docs/:path*"
    }
  ]
}