環境変数に応じてapiパスを設定するヒロクのExpressとAngularを使用して

Question

タイトルは私がやろうとしていることをかなりカバーしていますが、もっと明示しようとします。

私の主な角javascriptファイルでは、私のアプリが消費するサーバーへのパスを定義する文字列が必要です。

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

私はHerokuの生産やステージングにnode_environmentを設定することができることを知っているが、どこ私はそれを読んでください：？それはパスが異なることになる生産やステージングアプリであるかどうかに応じて、明示レベルで？うんざりのレベルで？これらの変数をメインの角度jsファイルにどのように渡しますか？私はのような何かを行うことができ考えていた：

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

をし、環境に応じて含めるか、除外されたいずれかのjsファイルに住んでそれぞれのステージングのための別の輸出を、持っているが、どのように私は1つを発射んし、他のものではない？

私はこれの具体的な例を示しますリソースを見つけるのに苦労を抱えている、と彼らは存在するはずの私は、ベストプラクティスに従うことをしたいと思います。

Answer 1

デフォルトでは、heroku：config setで設定したHeroku環境変数は、node.js/express.jsサーバーに適用され、angular.jsクライアント側のコードに引き継がれません。

heroku config:set APIPATH=YourAppPath 

その後、サーバー側のコードであなたが定義することができます。：

var apiPath = process.env.APIPATH; 

をそして、あなたは喜んで、サーバーコードでapiPathを使用することができます

したがって、たとえば、あなたが行うことができます。

しかし、それはあなたがクライアント側のコードでapiPathにアクセスしたいことから、あなたの問題を解決しません。

これを行うには、1つの方法は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を実行する際の問題はその後、残っていますか？ 1つのオプションは、Heroku article on node.js best practicesで説明されているように、「postinstall」スクリプトとして実行することです。だから、あなたのpackage.jsonの「スクリプト」セクションで、次のようなものを追加することもできます。

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

注ただし、インストール後にのみ、あなたが変更されたときに、スラグは、実際に例えば、構築された、とされていない場合に実行されます環境変数の値 それはアプリの問題である場合は、WebPACKのを実行するための別のトリガーを持つ検討する必要があります。

Answer 2

サーバ側の明示的なレベルでパスを設定するのは理にかなっています。ほとんどの場合、明示的にポート番号やその他の変数を設定している可能性が高いからです。 Expressでは 、あなたは角度側について

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

を持つことができ、私はそれはあなたのgulpfile.jsにENV に基づいたAPIのパスを置き換えるためにがぶ飲みを使用する+-置き換える一気最高だと思う

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')); 
});