Einstellung des API-Pfads abhängig von der Umgebungsvariablen mit Express und Angular auf Heroku

Question

Der Titel deckt ziemlich genau ab, was ich versuche, aber ich werde versuchen, expliziter zu sein.

In meiner eckigen JavaScript-Hauptdatei möchte ich eine Zeichenfolge, die den Pfad zu dem Server definiert, den meine App verwenden wird. Je nachdem, ob es die Produktion oder Inszenierung App der Pfad wird anders sein:

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

Ich weiß, dass ich die node_environment zu Produktion oder Inszenierung in Heroku einstellen kann, aber wo las ich das? Auf der Express-Ebene? Auf dem Schluckniveau? Wie übertrage ich diese Variablen in meine Haupt-js-Datei? Ich dachte, dass ich so etwas wie tun könnte:

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

und haben einen weiteren Export für Aufenthaltsorte, von denen jeder in einer js Datei leben würde, die entweder enthalten oder auf die Umwelt grundsätzlich ausgeschlossen abhängig, aber wie ich ein feuern und nicht der andere?

Es fällt mir schwer, eine Ressource zu finden, die ein konkretes Beispiel dafür liefert, und ich würde gerne Best Practices befolgen, sollten sie existieren.

Answer 1

Heroku-Umgebungsvariablen (die Sie z. B. mit heroku: config set festlegen) werden standardmäßig auf Ihren node.js/express.js-Server angewendet und nicht auf Ihren clientseitigen Code angular.js übertragen.

So zum Beispiel könnten Sie tun:

heroku config:set APIPATH=YourAppPath 

Dann in Ihrem serverseitigen Code könnten Sie definieren:

var apiPath = process.env.APIPATH; 

Und Sie glücklich apiPath in Ihrem Server-Code verwenden können.

Dies löst jedoch nicht Ihr Problem, da Sie in clientseitigem Code auf apiPath zugreifen möchten.

Um dies zu tun, ist eine Möglichkeit, Webpack zu verwenden, um Ihre Client-Module zu bündeln (Sie werden wahrscheinlich am Ende sowieso tun wollen).

Dann in Ihrem webpack.config.js (die nur ein node.js Skript ist), können Sie so etwas wie die folgende hinzufügen:

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


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

können Sie dann überall glücklich Referenz webpack.envVars.apiPath in deiner eckigen App. Wenn Sie Webpack ausführen, werden Verweise auf webpack.envVars.apiPath durch den Wert ersetzt, der in process.env.APIPATH gefunden wurde.

Die Frage bleibt dann, wann genau Webpath auf Heroku laufen soll? Eine Option besteht darin, es als "postinstall" -Skript auszuführen, wie in Heroku article on node.js best practices beschrieben. Also, in dem „Skripte“ Ihren package.json, könnten Sie so etwas wie hinzufügen:

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

ist jedoch zu beachten, dass die post nur ausgeführt wird, wenn der Rohling tatsächlich gebaut wird, und nicht, zum Beispiel, wenn Sie ändern der Wert einer Umgebungsvariablen Wenn dies ein Problem für Ihre App ist, sollten Sie einen anderen Auslöser für die Ausführung von Webpack in Betracht ziehen.

Answer 2

Es macht für mich Sinn, den Pfad in Express-Ebene für die Server-Seite festzulegen, da Sie wahrscheinlich die Port-Nummer und andere Variablen in Express sowieso festlegen. In Express können Sie

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

Für die Winkel Seite haben, denke ich, ist es am besten Zug benutzen + Gulp-ersetzen Sie die api Pfad

auf env in Ihrem gulpfile.js Basis zu ersetzen

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