Question

标题几乎涵盖了我正在尝试做的事情，但我会尝试更加明确。

在我的主角度javascript文件中，我想要一个字符串，用于定义我的应用将要使用的服务器的路径。根据它是生产应用程序还是临时应用程序，路径将不同：

var apiPath = [depends on environment, but a string will be here.];

我知道我可以将node_environment设置为heroku中的production或staging，但我在哪里阅读？在快递水平？在gulp级别？如何将这些变量传递到我的主角度js文件中？我以为我可以这样做：

export.modules = function() {
  return {apiPath: 'https://production.path'};
};

并有另一个导出导出，每个导出都存在于一个js文件中，该文件包含或排除取决于环境，但是如何解雇一个而不是另一个？

我很难找到能够提供具体示例的资源，如果存在，我希望遵循最佳实践。

Answer 1

默认情况下，Heroku环境变量（例如使用heroku：config set设置）将应用于您的node.js / express.js服务器，并且不会转移到您的angular.js客户端代码。

所以，例如，你可以这样做：

heroku config:set APIPATH=YourAppPath

然后，在您的服务器端代码中，您可以定义：

var apiPath = process.env.APIPATH;

您可以愉快地在服务器代码中使用apiPath。

但是，这并不能解决您的问题，因为您希望在客户端代码中访问apiPath。

要做到这一点，一种方法是使用Webpack将客户端模块捆绑在一起（无论如何，您可能希望最终完成此操作）。

然后，在您的webpack.config.js（它只是一个node.js脚本）中，您可以添加如下内容：

var envVars = {           
     webpack.envVars.apiPath : JSON.stringify(process.env.APIPATH)
};


module.exports = {
    ...
    plugins : [
        ...
        new webpack.DefinePlugin(envVars)
    ]
}

然后，您可以愉快地在角度应用中的任何位置引用webpack.envVars.apiPath。当您运行webpack时，对webpack.envVars.apiPath的引用将被process.env.APIPATH中找到的任何值node.js替换。

然后问题仍然存在，何时在Heroku上运行webpath？一种选择是将其作为“postinstall”脚本运行，如Heroku article on node.js best practices中所述。因此，在package.json的“scripts”部分中，您可以添加如下内容：

"postinstall": "webpack --config ./webpack.config.js --progress --colors"

但请注意，postinstall仅在实际构建slug时运行，而不是在更改环境变量的值时运行。如果这对您的应用程序来说是个问题，您可能需要考虑使用不同的触发器来运行webpack。

Answer 2

对我来说，在服务器端的快速级别设置路径是有意义的，因为最有可能的是你要设置端口号和其他变量。在快递中，你可以拥有

var env = process.env.NODE_ENV || 'development';
var apiPath = //depends on env
// serve routes based on the apiPath
app.use(apiPath + '/users', usersRoute);

对于角度方面，我认为最好使用gulp + gulp-replace来替换基于env的api路径在你的gulpfile.js

var env = process.env.NODE_ENV || 'development';
var apiPath = //depends on env
var replace = require('gulp-replace');

gulp.task('task-replace-api-path-in-angular-js-file', function(){
  gulp.src(['src-path-of-your-angular-file'])
    .pipe(replace('API_PATH', 'apiPath'))
    .pipe(gulp.dest('build-path-of-your-angular-file'));
});

在Heroku上使用Express和Angular根据环境变量设置api路径

2 个答案: