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

如果您使用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上执行此操作可能不是一个好主意的原因是这个方案与http://en.wikipedia.org/wiki.Autorun.inf没有很好的协作。

Webpack需要作为Heroku Pipelines的一部分运行，例如在Heroku slug compilation。

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

Answer 3

我是这样做的。我将变量附加到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

由于这个问题询问如何访问变量复数和我自己的用例我有多个配置变量在客户端使用我想分享一种方法，通过一个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

中添加脚本

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

4 个答案: