框架› Angular

將 Angular 應用程式部署到 Vercel

將 Angular 應用程式與加密的 .env.vault 檔案部署到 Vercel。

初始設定

建立一個 Angular 應用程式。

npx @angular/cli new

這將會建立一些檔案。

ls -1
README.md
angular.json
node_modules/
package-lock.json
package.json
src/
tsconfig.app.json
tsconfig.json
tsconfig.spec.json

新增 @ngx-env/builder，以便我們在 Angular 中支援 process.env。

npx @angular/cli add @ngx-env/builder

產生環境檔案（適用於 Angular 16 及更高版本）。

npx @angular/cli generate environments

編輯 src/app/app.component.ts 以包含環境變數 NG_APP_HELLO。

src/app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'vercel';
  NG_APP_HELLO = process.env['NG_APP_HELLO']
}

將 src/app/app.component.html 變更為簡單的 Hello {{ NG_APP_HELLO }}。

src/app/app.component.html

Hello {{ NG_APP_HELLO }}.

新增 .vercelignore 檔案。

.vercelignore

.env*
!.env.vault

將其提交到程式碼並部署到 Vercel。

npx vercel@latest deploy --prod

yourapp.vercel.app

部署後，您的應用程式將顯示 'Hello .'，因為它還沒有辦法存取環境變數。接下來讓我們處理這個問題。

預先載入 dotenv

安裝 dotenv。

npm install dotenv --save # Requires dotenv >= 16.1.0

在專案的根目錄中建立 .env 檔案。

.env

# .env
NG_APP_HELLO="World"

使用 dotenv 預先載入 Angular 指令碼。這將在 Angular 之前注入環境變數。

package.json

"scripts": {
  "ng": "node -r dotenv/config ./node_modules/.bin/ng",
  "start": "node -r dotenv/config ./node_modules/.bin/ng serve",
  "build": "node -r dotenv/config ./node_modules/.bin/ng build",
  "watch": "node -r dotenv/config ./node_modules/.bin/ng build --watch --configuration development",
  "test": "node -r dotenv/config ./node_modules/.bin/ng test"
},

嘗試在本地執行它。

npm run start
# Angular Live Development Server is listening on localhost:4200

它會顯示「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 檔案並重新部署即可。