框架 › Gatsby

将 Gatsby.js 应用程序部署到 Gatsby Edge 网络

使用加密的 .env.vault 文件将 Gatsby.js 应用程序部署到 Gatsby Edge。

在此指南中找到完整的GitHub 代码示例。

初始设置

生成一个 gatsby.js 应用程序。

npm init gatsby

这将创建一些文件。

ls -1
README.md
gatsby-config.js
node_modules/
package-lock.json
package.json
src/

安装最新的 dotenv。这非常重要，因为 Gatsby 框架当前使用的是旧版本的 dotenv，不支持 .env.vault。

npm install dotenv --save

将 src/pages/index.js 编辑为以下内容。

src/pages/index.js

import * as React from "react"

const IndexPage = () => {
  return (
    <div>Hello {process.env.GATSBY_HELLO}.</div>
  )
}

export default IndexPage

在 gatsby-config.js 的顶部添加 dotenv。

gatsby-config.js

/**
 * @type {import('gatsby').GatsbyConfig}
 */
require('dotenv').config()
console.log(process.env) // for debugging purposes. remove when ready.

module.exports = {
  siteMetadata: {
    title: `gatsby-edge`,
    siteUrl: `https://www.yourdomain.tld`,
  },
  plugins: [],
}

创建 .env 文件。

.env

# .env
GATSBY_HELLO="World"

运行 Gatsby。

npm run develop
started server on https://127.0.0.1:8000/

访问localhost:8000

完美。process.env 现在包含了您在 .env 文件中定义的键和值。

这涵盖了本地开发。接下来让我们解决生产问题。

构建 .env.vault

推送最新的 .env 文件更改并编辑生产机密。了解有关同步的更多信息

npx dotenv-vault@latest push
npx dotenv-vault@latest open production

使用 UI 为每个环境配置这些机密。

dotenv.org

然后构建加密的 .env.vault 文件。

npx dotenv-vault@latest build

其内容应类似于以下内容。

.env.vault

#/-------------------.env.vault---------------------/
#/         cloud-agnostic vaulting standard         /
#/   [how it works](https://dotenv.org/env-vault)   /
#/--------------------------------------------------/

# development
DOTENV_VAULT_DEVELOPMENT="/HqNgQWsf6Oh6XB9pI/CGkdgCe6d4/vWZHgP50RRoDTzkzPQk/xOaQs="
DOTENV_VAULT_DEVELOPMENT_VERSION=2

# production
DOTENV_VAULT_PRODUCTION="x26PuIKQ/xZ5eKrYomKngM+dO/9v1vxhwslE/zjHdg3l+H6q6PheB5GVDVIbZg=="
DOTENV_VAULT_PRODUCTION_VERSION=2

设置 DOTENV_KEY

获取生产 DOTENV_KEY。

npx dotenv-vault@latest keys production
# outputs: dotenv://:[email protected]/vault/.env.vault?environment=production

使用 CLI 在本地测试生产 DOTENV_KEY。

DOTENV_KEY='dotenv://:[email protected]/vault/.env.vault?environment=production' npm run develop

接下来，在 Gatsby Edge 上设置您的网站，然后将 DOTENV_KEY 设置为环境变量。

Gatsby 有一个易于遵循的教程，用于部署到他们的边缘网络。

部署

安全地将这些更改提交到代码并部署。

就是这样！构建运行时，您的 .env.vault 文件将被解密，其生产机密将作为环境变量注入 - 仅在必要时。

如果一切正常，您将在日志中看到 'Loading env from encrypted .env.vault'。如果没有设置 DOTENV_KEY（例如，在本地机器上开发时），它将回退到标准dotenv 功能。

如果成功，您将在 Gatsby Edge 网络日志中看到消息 Loading env from encrypted .env.vault。

gatsbyjs.com/dashboard

您成功使用新的 .env.vault 标准来加密和部署机密。这比将机密分散到多个第三方平台和工具中要安全得多。无论何时需要添加或更改机密，只需重建 .env.vault 文件并重新部署即可。