将 Vite 应用部署到 Vercel
使用加密的 .env.vault 文件将 Vite 应用部署到 Vercel。
在本指南中查找一个完整的 GitHub 代码示例。
初始设置
创建一个 Vite 应用。
npm create vite@latest
这将创建一个少量文件。
ls -1
index.html
node_modules/
package-lock.json
package.json
public/
src/
tsconfig.json
编辑 src/main.ts 以包含一个简单的 Hello ${import.meta.env.VITE_HELLO}.。
src/main.ts
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
Hello ${import.meta.env.VITE_HELLO}.
`
添加 .vercelignore 文件。
.vercelignore
.env*
!.env.vault
将其提交到代码并部署到 Vercel。
npx vercel@latest deploy --prod
yourapp.vercel.app
部署后，你的应用会显示 'Hello undefined.'，因为它还没有访问环境变量的方法。接下来我们将解决这个问题。
预加载 dotenv
安装 dotenv。
npm install dotenv --save # Requires dotenv >= 16.1.0
在项目的根目录中创建一个 .env 文件。
.env
# .env
VITE_HELLO="World"
使用 dotenv 预加载 Vite.js 脚本。这将在 Vite.js 之前注入环境变量。
package.json
...
"scripts": {
"dev": "node -r dotenv/config ./node_modules/.bin/vite",
"build": "tsc && node -r dotenv/config ./node_modules/.bin/vite build",
"preview": "node -r dotenv/config ./node_modules/.bin/vite preview"
},
...
尝试在本地运行它。
npm run dev
Local: https://127.0.0.1:5173/
它将显示 "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
使用 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。
vercel.com
部署
将这些更改安全地提交到代码并部署。
npx vercel@latest deploy --prod
就是这样！在部署时，你的 .env.vault 文件将被解密，并且其生产秘密将在恰当的时间被注入为环境变量。
yourapp.vercel.app
你已成功使用新的 .env.vault 标准来加密和部署你的秘密。这比将你的秘密散布在多个第三方平台和工具中要安全得多。无论何时需要添加或更改秘密，只需重建你的 .env.vault 文件并重新部署。