文件
框架 › 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 檔案並重新部署即可。