框架 › Astro.js

将 Astro.js 应用程序部署到 Netlify

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

在 GitHub 上查找本指南的完整代码示例。

初始设置

生成一个 astro.js 应用程序。在提示时，选择“空项目”选项。

npm create astro@latest

这将创建一个少量文件。

ls -1
README.md
astro.config.mjs
node_modules/
package-lock.json
package.json
public/
src/
tsconfig.json

编辑 src/pages/index.astro 以包含 import.meta.env.PUBLIC_HELLO。

src/pages/index.astro

---
---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />
		<title>Astro</title>
	</head>
	<body>
		<h1>Hello {import.meta.env.PUBLIC_HELLO}.</h1>
	</body>
</html>

添加 astro netlify 适配器。

npx astro add netlify

添加 netlify.toml。

netlify.toml

[build]
  command = "npm run build"
  publish = "dist"

将这些提交到代码并将其部署到 Netlify。

npx netlify-cli@latest deploy --build --prod

yourapp.netlify.app

部署后，您的应用程序将显示“Hello .”，因为它还没有访问环境变量的方法。接下来让我们实现它。

安装 dotenv

安装 dotenv。

npm install dotenv --save # Requires dotenv >= 16.1.0

在项目的根目录中创建一个 .env 文件。

.env

# .env
PUBLIC_HELLO="World"

使用 dotenv 预加载作为您的 npm package.json scripts 的前缀。

package.json

{
  ...
  "scripts": {
    "dev": "node -r dotenv/config ./node_modules/.bin/astro dev",
    "start": "node -r dotenv/config ./node_modules/.bin/astro dev",
    "build": "node -r dotenv/config ./node_modules/.bin/astro build",
    "preview": "node -r dotenv/config ./node_modules/.bin/astro preview",
    "astro": "node -r dotenv/config ./node_modules/.bin/astro"
  },
  ...
}

尝试在本地运行它。

npm run dev
Local    https://127.0.0.1:3000/

访问 localhost:3000

完美。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 在 Netlify 上设置 DOTENV_KEY。

npx netlify-cli@latest env:set DOTENV_KEY "dotenv://:[email protected]/vault/.env.vault?environment=production"

或者使用 Netlify 的 UI。

部署

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

npx netlify-cli@latest deploy --build --prod

yourapp.netlify.app

就是这样！在部署时，您的 .env.vault 文件将被解密，其生产机密将被注入为环境变量——恰逢其时。

当您在日志中看到“Loading env from encrypted .env.vault”时，您就知道操作成功了。如果未设置 DOTENV_KEY（例如在本地机器上开发时），它将回退到标准 dotenv 功能。

npx netlify-cli@latest deploy --build --prod

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