将 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 以包含运行时配置环境变量。
nuxt.config.ts
// https://nuxtjs.org.cn/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
部署后，您的应用程序将显示 '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://nuxtjs.org.cn/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 为每个环境配置这些秘密。
然后构建加密的 .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。
部署
您现在必须删除 .env 文件才能使用 edgio 和 Nuxt 的 .env.vault 文件。否则，Nuxt 会优先使用 .env 文件。
rm .env
将这些更改安全地提交到代码并重新部署。
npm run edgio:deploy
就是这样！在部署时，您的 .env.vault 文件将被解密，其生产秘密将作为环境变量注入 - 恰逢其时。
当您在日志中看到 'Loading env from encrypted .env.vault' 时，您就知道一切正常。如果 DOTENV_KEY 未设置（例如在本地机器上开发时），它将回退到标准 dotenv 功能。
您已成功使用新的 .env.vault 标准来加密和部署您的秘密。这比将秘密散布在多个第三方平台和工具中要安全得多。每当您需要添加或更改秘密时，只需重新构建 .env.vault 文件并重新部署。