如何从AngularJS访问Heroku上的环境变量

Question

我在Heroku上有3个AngularJS应用程序。 他们每个人都使用不同的API。

（例如：angularjs-dev消耗api-dev，angularjs-qa消耗api-qa）

我在下面创建了这样的常量文件

SITE     = 'dev'
API_SITE = {
      dev       : 'dev-url',
      qa        : 'qa-url',
      production: 'production-url'
}

然后，当我想要API网址时，我这样称呼API_SITE[SITE]

这个问题是当我想部署到qa时，我必须将SITE更改为qa 。

我想知道：我们可以在Heroku上定义AngularJS读取环境变量，因此我们不必再次手动更改它

注意：我知道AngularJS在客户端运行。 所以，我不知道该怎么做。

任何人？

Answer 1

如果有人正在寻找解决方案（基于我的环境：Heroku上的AngularJS和NodeJS）

我将此代码添加到web.js （ NodeJS启动文件）

var options = {};
var jade = require('jade');

app.get('/site.js', function(req, res){
    res.send("var SITE='"+process.env.SITE+"'");
});

然后，在文件index.html中，我刚刚添加了<script src="/site.js"></script>来重新获取SITE变量。

它运作良好。

Answer 2

由于这个问题询问如何访问变量复数和我自己的用例我有多个配置变量用于客户端我想分享一种方法从一个get请求发送变量从heroku到客户端。 它类似于@BunSuwanparsert的答案，但我没有使用res.send()而是使用了res.write()

//server.js

app.get('/config.js', function(req, res){

   res.write("var SOME_URL='"+process.env.SOME_URL+"'" + '\n');
   res.write("var API_KEY='"+process.env.API_KEY+"'" + '\n');
   res.write("var AUTH_DOM='"+process.env.AUTH_DOM+"'" + '\n');
   res.write("var STRG_BUCKET='"+process.env.STRG_BUCKET+"'" + '\n');
   res.write("var MSG_SND_ID='"+process.env.MSG_SND_ID+"'" + '\n');
   res.end();

});

<script src="/config.js"></script>

然后在index.html中添加脚本

Answer 3

如果您使用webpack捆绑您的客户端应用程序，可以使用DefinePlugin，它允许您创建可在编译时配置的全局常量。

要实现此目的，请在webpack.config.js中添加以下内容：

var constants = {
     'webpack.constants.envVar1' : process.env.HEROKU_ENV_VAR_1,
     'webpack.constants.envVar2' : process.env.HEROKU_ENV_VAR_2,
     ...
};

module.exports = {
    ...
    plugins: [new webpack.DefinePlugin(constants),..],
    ...
};

然后，您可以在AngularJS客户端应用程序中的任何位置引用您的Heroku env变量，例如

doSomething(webpack.constants.envVar1);

然而，这可以做到的事实并不一定意味着这应该完成，至少不是在Heroku上。 在Heroku上执行此操作可能不是一个好主意的原因是这个方案与Heroku Pipelines不能很好地协作 。

Webpack需要作为Heroku slug编译的一部分运行，例如在npm postinstall脚本中运行 。

现在，如果你有一个Heroku Pipeline，比如开发，登台和生产应用程序，你的部署工作流程是git推送到开发应用程序，然后将slug 推广到你的阶段，然后再推广到你的生产应用程序，那么BE当您推送到您的开发应用程序时，只会知道slug是否已构建。 在升级管道时，它不会随后重建。 这意味着webpack只运行一次，如果您使用上述方案在AngularJS应用程序中使用env vars，您的暂存和生产应用程序的AngularJS客户端将最终使用您分配给开发应用程序的Heroku env var值，这可能不是你想要的!!

Answer 4

这是我如何做到的。 我将变量附加到app.locals对象，可以通过Jade编译成HTML，我只需将它们分配到javascript对象中。

server.js

app.locals.env = process.env["dev"];
app.get('/', function(req, res){
    res.locals.particular = "to this request";
    res.render('view.jade');
});

view.jade

if(env)
    script var env = !{JSON.stringify(env)}