框架 › Nuxt.js

將 Nuxt.js 應用程式部署到 Edgio

使用加密的 .env.vault 檔案將 Nuxt.js 應用程式部署到 Edgio。

在本指南中尋找完整的GitHub 程式碼範例。

初始設定

建立一個 Nuxt.js 應用程式。

npx nuxi@latest init

這會建立一些檔案。

ls -1
README.md
app.vue
nuxt.config.ts
package.json
public/
server/
tsconfig.json

編輯 app.vue 以包含 HELLO。

app.vue

<script setup lang="ts">
  const config = useRuntimeConfig()
</script>

<template>
  Hello {{config.public.HELLO}}.
</template>

編輯 nuxt.config.ts 以包含 runtimeConfig 環境變數。

nuxt.config.ts

// https://nuxt.dev.org.tw/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      HELLO: process.env.HELLO
    }
  },
  devtools: { enabled: true }
})

準備應用程式以供 Edgio 使用。

npx @edgio/cli init

將其提交到程式碼並部署到 Edgio。

npm run edgio:deploy

edgio.link

部署後，您的應用程式會顯示 'Hello .'，因為它還沒有辦法存取環境變數。接下來我們來處理這個問題。

安裝 dotenv

安裝dotenv。

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

在您的專案根目錄中建立一個 .env 檔案。

.env

# .env
HELLO="World"

盡快在 nuxt.config.ts 中要求並載入 dotenv。

nuxt.config.ts

// https://nuxt.dev.org.tw/docs/api/configuration/nuxt-config
require('dotenv').config()

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      HELLO: process.env.HELLO
    }
  },
  devtools: { enabled: true }
})

嘗試在本機執行它。

npm run dev
# Visit https://127.0.0.1:3000

它會顯示「Hello World」。

太棒了！ process.env 現在擁有您在 .env 檔案中定義的金鑰和值。

這涵蓋了生產環境的本機模擬。接下來讓我們解決真正的生產環境問題。

建立 .env.vault

推送您最新的 .env 檔案變更並編輯您的生產機密。深入瞭解同步

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

使用 UI 來設定每個環境的機密。

www.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

使用 UI 在 Edgio 上設定 DOTENV_KEY。

edgio.app

部署

您現在必須刪除您的 .env 檔案，才能使用 Edgio 和 Nuxt 的 .env.vault 檔案。否則，Nuxt 會優先使用 .env 檔案，而不是其他所有檔案。

rm .env

將這些變更安全地提交到程式碼並重新部署。

npm run edgio:deploy

就是這樣！在部署時，您的 .env.vault 檔案將會被解密，並且其生產機密會即時注入為環境變數。

yourapp.edgio.link

當您在記錄中看到 'Loading env from encrypted .env.vault' 時，您就知道一切都正常運作。如果沒有設定 DOTENV_KEY（例如，在您的本機電腦上開發時），它將會退回到標準的dotenv 功能。

edgio.app

您已成功使用新的 .env.vault 標準來加密和部署您的機密。這比將機密分散在多個第三方平台和工具中安全得多。每當您需要新增或變更機密時，只需重建您的 .env.vault 檔案並重新部署即可。