使用带有 angular-cli 的 Heroku 环境变量，通过 Node 服务器部署

Question

我真的很喜欢 Django 在 Heroku 上使用 dotenv 变量的实现，并希望将它带到我们的 angular-cli 客户端（Angular 2）。

为了在 Heroku 上运行客户端，我通过运行快速服务器的 Node 运行应用程序。

1. Node 可以使用 process.env.VARNAME 访问 Heroku 的 env 变量，但我不明白如何将这些变量传递给我的应用程序。
   如何在我的应用中读取 Heroku 的变量？

2. 据我了解，在使用 angular-cli 时，我应该使用 environment.ts/environment.prod.ts 文件来分隔环境设置。

   但是，我不想将这些变量上传到 Bitbucket - 这让我重新开始质疑如何从 Heroku 的变量中设置这些变量（当然 process.env.VARNAME 不起作用......）

这是推荐的做法还是我遗漏了什么？

Answer 1

由于您的服务器是一个 NODE 服务器，它有可能进行处理，而不仅仅是提供静态文件。这为您提供了多种选择。

1. 您可以使用 NodeJS 服务器处理的模板语言在提供 HTML 之前将环境变量嵌入到 HTML 中

2. 您可以有一个 CONFIG 类型的端点，该端点包含通常存储在您的环境变量中的配置。您的应用在启动时可以访问此端点并获取稍后可以使用的配置数据。

这是最先想到的两个选项 - 但您可以通过多种方式处理此问题。

需要注意的重要一点是 Angular 是一个客户端 javascript 框架，这意味着没有安全性 - 您发送到 Angular 的任何内容都可以被任何使用您的 Angular 应用程序的人读取。因此，重要的是，在发送给 Angular 使用的内容方面，不要依赖机密性。

Answer 2

警告：这不是从 heroku 访问配置变量的最安全方式。如果您有不希望受到攻击的非常敏感的密钥，那么请找到一种更安全的方法来执行此操作。

我使用 Heroku-Client API 从使用 node.js 的特定 heroku 应用程序中提取配置变量，并使用 get 请求将它们发送到前端。

//server.js
const express = require('express');
const http = require('http');
const path = require('path');
const Heroku = require('heroku-client')
const heroku = new Heroku({ token: process.env.API_TOKEN })
const app = express();

let API_KEY = '';

app.use(express.static(path.join(__dirname, 'dist')));

heroku.request({
  method: 'GET',
  path: 'https://api.heroku.com/apps/name-of-app/config-vars',
  headers: {
  "Accept": "application/vnd.heroku+json; version=3",
  "Authorization": "Bearer "+process.env.API_TOKEN
},
  parseJSON: true
}).then(response => {
  //console.log(response, "heroku api...");
  API_KEY = response.API_KEY;
})

app.get('/heroku-env', function(req, res){
    res.json(TOKEN);
});


app.get('*', (req, res) => {
   res.sendFile(path.join(__dirname, 'dist/index.html'))
});

const port = process.env.PORT || '3001';
app.set('port', port);

const server = http.createServer(app);
server.listen(port, () => console.log(`Running on localhost:${port}`));

然后使用带有 HTTP 的服务来获取对前端的响应。

//EnvService.js
import { Injectable } from '@angular/core';
import { HttpClient, HttpResponse, HttpHeaders, HttpRequest } from '@angular/common/http'
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class EnvService{

  env:Observable<any> = null;

  constructor(private http:HttpClient){}

  getEnv() {
    console.log("trying to get heroku env...");
    this.env = this.http.get('/heroku-env')
    return this.env;
  }
}  

将服务导入 app.module 然后订阅组件中的 res 以访问配置变量。

//my.component.js
import { Component, ViewChild, Inject } from '@angular/core';
import { EnvService } from './env.service';

@Component({
  selector: 'my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css']
})

export class MyComponent {
   defineToken: string = '';

   constructor(private envService: EnvService) {}

   loadEnv() {
      this.envService
        .getEnv().subscribe(res => {
          this.token = res; 
    })
   }

  ngOnInit() {
    this.loadEnv();
   }
 }

参考：https://github.com/heroku/node-heroku-client