將 Vite 應用程式部署到 Vercel
將 Vite 應用程式與加密的 .env.vault 檔案部署到 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 檔案並重新部署即可。