如何为具有多个域及其内容的 Gatsby 网站提供服务？

Question

我使用 Gatsby、Contentful 构建了一个网站，并部署在 Netlify 上。 我将使用多个域别名来运行这个网站。

例如： alias1.example.com alias2.example.com

在这种情况下，别名运行良好，网站必须在 Contentful 中显示属于自己别名的内容。 例如，假设当前别名是alias1，那么网站必须从Contentful 中获取只有alias1 条目的数据。

我正在尝试使用windows.location.href 添加代码以识别gatsby-config.js 中的别名，并将siteUrl 设置为动态，但它不起作用。

我不确定这是否可能以及如何实施。

谢谢。

Answer 1

这可能是盖茨比最关键的问题，几乎人们都很难解决。

核心问题是“构建” Gatsby 项目时“浏览器环境”不可用。 gatsby-config.js 用于 NodeJS 环境。换句话说，所有使用window 变量的东西都无法访问。

您应该在此处阅读有关 gatsby 构建过程的官方文档： https://www.gatsbyjs.com/docs/overview-of-the-gatsby-build-process/#build-time-vs-runtime.

解决方案：您可以在package.json 中为每个别名定义不同的“脚本”，您可以为NodeJS 环境提供环境变量。然后在gatsby-config.js中，使用dotenv包读取传入的变量。

您可以在此处阅读有关使用环境变量的更多信息：https://www.gatsbyjs.com/docs/environment-variables/#reach-skip-nav

Answer 2

实现此目的的最佳（也是几乎唯一）方法是为每个站点/别名使用environment variables，并配置部署命令以触发和使用每个站点的变量。这样，每次部署都会从每个 Contentful 环境中获取数据。

在您的gatsby-config.js（模块导出上方）添加：

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
}) 

下一步是为每个别名创建一个环境文件。在您的项目根目录中：

• .env.alias1
• .env.alias2

每个文件都应该包含来自 Contentful 的环境变量：

CONTENTFUL_ACCESS_TOKEN:12345
CONTENTFUL_SPACE_ID:12345

然后，在您的 gatsby-config.js 中，只需将硬编码的变量替换为环境文件中的变量即可：

{
  resolve: `gatsby-source-contentful`,
  options: {
    spaceId: process.env.CONTENTFUL_SPACE_ID,
    accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
  },
},

最后一步是配置部署脚本以触发每个所需的别名。在你的package.json:

  "scripts": {
    "clean": "gatsby clean",
    "test": "jest",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\""
    "develop-alias1": "gatsby develop GATSBY_ACTIVE_ENV=alias1"
    "build-alias1": "gatsby build GATSBY_ACTIVE_ENV=alias1"
    "develop-alias2": "gatsby develop GATSBY_ACTIVE_ENV=alias2"
    "build-alias2": "gatsby build GATSBY_ACTIVE_ENV=alias2"
  },

请注意，您将为别名命令替换默认的 gatsby develop 和 gatsby build。

通过添加这组配置，对于每个develop 或build/deploy，您都在告诉您的Gatsby 项目应该查看哪个环境文件（它将取而代之的是您的.env.alias*）。每个文件都将包含 Contentful 中每个环境的密钥，其中包含不同的内容，允许您使用唯一的 CMS 部署具有不同内容的别名站点。