將 Turborepo 應用程式部署到 Vercel
使用加密的 .env.vault 檔案將 Turborepo 應用程式部署到 Vercel。
在此指南中尋找完整的GitHub 程式碼範例。
初始設定
建立一個新的 monorepo。
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 檔案並重新部署。