如何从AngularJS访问Heroku上的环境variables

Heroku上有3个AngularJS应用程序。 他们每个消耗不同的API。

（例如：angularjs-dev使用api-dev，angularjs-qa使用api-qa）

我创build了如下所示的常量文件

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

然后，当我想要的APIurl，我这样调用它API_SITE[SITE]

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

我想知道：我们可以让AngularJS读取在Heroku上定义的环境variables，所以我们不必再手动改变它

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

任何人？

Answer 1

如果有人正在寻找解决scheme（基于我的环境：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>来检索SITEvariables。

它运作良好。

Answer 2

如果使用webpack捆绑客户端应用程序，可以使用DefinePlugin来创build可在编译时configuration的全局常量。

为了达到这个目的，在你的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环境variables，例如

 doSomething(webpack.constants.envVar1); 

然而，这个可以完成的事实并不一定意味着这个应该完成，至less不要在Heroku上完成。 在Heroku上这样做可能不是一个好主意，因为这个scheme与Heroku Pipelines不能很好的兼容。

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

现在，如果你有一个Heroku Pipeline，比如开发，分段和生产应用程序，你的部署工作stream就是将git推送到开发应用程序，然后将slug 推广到你的产品应用程序，然后是BE感觉只有当你推动你的开发应用程序时才会build立slu built。 在升级pipe道时不会重build。 这意味着webpack只运行一次，如果您使用上述scheme在您的AngularJS应用程序中使用env vars，则分段和生产应用程序的AngularJS客户端将最终使用您分配给开发应用程序的Heroku env var值，这可能不是你想要的！

Answer 3

这是我怎么做的。 我将variables附加到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)} 

Answer 4

由于这个问题问如何访问variables复数，并为我自己的用例，我有多个configurationvariables在客户端使用我想分享一种方法来发送variables从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中添加脚本