框架 › Angular

将 Angular 应用程序部署到 Vercel

使用加密的 .env.vault 文件将 Angular 应用程序部署到 Vercel。

在 GitHub 上找到此指南的完整代码示例。

初始设置

创建一个 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 文件并重新部署即可。