框架 › 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"

在 npm package.json scripts 前面加上 dotenv 預先載入。

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 檔案並重新部署即可。