将 Nuxt.js 应用程序部署到 Vercel
使用加密的 .env.vault 文件将 Nuxt.js 应用程序部署到 Vercel。
找到本指南的完整 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://nuxtjs.org.cn/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
runtimeConfig: {
public: {
HELLO: process.env.HELLO
}
},
devtools: { enabled: true }
})
将这些内容提交到代码并部署到 Vercel。
npx vercel@latest deploy --prod
部署后，您的应用程序会显示 'Hello .'，因为它还没有访问环境变量的方法。我们接下来就来解决这个问题。
安装 dotenv
安装 dotenv。
npm install dotenv --save # Requires dotenv >= 16.1.0
在项目的根目录中创建一个 .env 文件。
.env
# .env
HELLO="World"
在 nuxt.config.ts 中尽早地 require 和加载 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
使用 CLI 在 Vercel 上设置 DOTENV_KEY。
npx vercel@latest env add DOTENV_KEY
? What’s the value of DOTENV_KEY? dotenv://:[email protected]/vault/.env.vault?environment=production
✅ Added Environment Variable DOTENV_KEY to Project nodejs-vercel [94ms]
或使用 Vercel 的 UI。
部署
您现在必须删除 .env 文件，才能使用 .env.vault 文件与 Vercel 和 Nuxt 配合使用。否则，Nuxt 会优先使用 .env 文件。
rm .env
将这些更改安全地提交到代码并重新部署到 Vercel。
npx vercel@latest deploy --prod
就是这样！在部署时，您的 .env.vault 文件将被解密，其生产秘密将被注入为环境变量 - 正好及时。
您成功使用了新的 .env.vault 标准来加密和部署您的秘密。这比将您的秘密散布在多个第三方平台和工具中要安全得多。每当您需要添加或更改秘密时，只需重新构建您的 .env.vault 文件并重新部署。