将 Turborepo 应用部署到 Vercel
将带有加密 .env.vault 文件的 Turborepo 应用部署到 Vercel。
在本指南中，您可以在 GitHub 上找到完整的 代码示例。
初始设置
创建一个新的单仓库。
npx create-turbo@latest
这将创建一些文件和几个工作区（应用程序）。
ls -1
README.md
apps/
node_modules/
package-lock.json
package.json
packages/
turbo.json
编辑 apps/web/app/page.tsx 以包含 process.env.NEXT_PUBLIC_HELLO 并显示“Hello World”。
apps/web/app/page.tsx
export default function Page() {
return (
<>
Hello {process.env.NEXT_PUBLIC_HELLO}.
</>
);
}
在 turbo.json 中声明环境变量。
{
..
"globalEnv": [
"NEXT_PUBLIC_HELLO"
]
}
如果您希望仅在工作区上设置环境变量，而不是在整个 turborepo 中全局设置，可以使用 管道 env 密钥 进行设置。
添加 .vercelignore 文件。
.vercelignore
.env*
!.env.vault
将这些提交到代码并部署到 Vercel。
npx vercel@latest deploy --prod
您的第一次部署可能会失败，因为您需要添加一些自定义配置。转到项目设置并执行以下操作。
将 构建和开发设置 > 框架预设 设置为 Next.js，并将构建命令覆盖为 cd ../.. && npm run build --filter=web。
将根目录设置为 apps/web。
再次部署。
npx vercel@latest deploy --prod
部署完成后，您的应用程序将显示 'Hello .'，因为它还没有访问环境变量的方法。接下来我们将解决这个问题。
安装 dotenv-cli
安装 dotenv-cli。
npm install github:motdotla/dotenv-cli --save
我们暂时从 motdotla/dotenv-cli 安装。一旦 entropitor/dotenv-cli 升级到 [email protected]，我们将推荐更简单的 npm install dotenv-cli --save 命令。
在项目根目录中创建一个 .env 文件。
.env
# .env
NEXT_PUBLIC_HELLO="World"
调整您的 package.json 脚本，将环境变量注入到 turbo 命令中。
package.json
"scripts": {
"build": "dotenv -- turbo run build",
"dev": "dotenv -- turbo run dev",
"lint": "dotenv -- turbo run lint",
},
了解有关 在 turborepo 中使用环境变量 的更多信息。
尝试在本地运行。
npm run dev
docs:dev: - ready started server on 0.0.0.0:3001, url: https://127.0.0.1:3001
web:dev: - ready started server on 0.0.0.0:3002, url: https://127.0.0.1:3002
完美。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。
部署
安全地将这些更改提交到代码并进行部署。
npx vercel@latest deploy --prod
就是这样！在部署时，您的 .env.vault 文件将被解密，其生产密钥将被注入为环境变量 - 恰到好处。
您已成功使用新的 .env.vault 标准来加密和部署您的密钥。这比将密钥散布在多个第三方平台和工具中要安全得多。无论何时需要添加或更改密钥，只需重新构建 .env.vault 文件并重新部署即可。