3

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

前任： alias1.example.com alias2.example.com

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

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

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

谢谢你。

4

2 回答 2

2

实现此目的的最佳（也是几乎唯一）方法是为每个站点/别名使用环境变量，并配置部署命令以触发和使用每个站点的变量。这样，每次部署都会从每个 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 部署具有不同内容的别名站点。

于 2020-09-08T10:38:28.000 回答
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

于 2020-09-08T07:37:56.360 回答