Jak zarządzasz zmiennymi / stałymi konfiguracyjnymi dla różnych środowisk?
To może być przykład:
Mój pozostały interfejs API jest dostępny localhost:7080/myapi/
, ale mój przyjaciel, który działa na tym samym kodzie pod kontrolą wersji Git, ma interfejs API wdrożony w swoim Tomcat localhost:8099/hisapi/
.
Załóżmy, że mamy coś takiego:
angular
.module('app', ['ngResource'])
.constant('API_END_POINT','<local_end_point>')
.factory('User', function($resource, API_END_POINT) {
return $resource(API_END_POINT + 'user');
});
Jak dynamicznie wstrzykiwać poprawną wartość punktu końcowego interfejsu API, w zależności od środowiska?
W PHP zwykle robię takie rzeczy z config.username.xml
plikiem, łącząc podstawowy plik konfiguracyjny (config.xml) z plikiem konfiguracyjnym lokalnego środowiska rozpoznawanym przez nazwę użytkownika. Ale nie wiem, jak zarządzać tego typu rzeczami w JavaScript?
źródło
'ngconstant:development'
w'serve'
- jeśli można umieścić go w konfiguracji zegarka pod'gruntfile'
jaktasks: ['ngconstant:development']
- nie będzie konieczne ponowne uruchomieniegrunt serve
po aktualizacji zmiennych rozwojowych w gruntfile.package: grunt.file.readJSON('development.json')
Jednym fajnym rozwiązaniem może być rozdzielenie wszystkich wartości specyficznych dla środowiska na osobny moduł kątowy, od którego zależą wszystkie pozostałe moduły:
Następnie moduły, które potrzebują tych wpisów, mogą zadeklarować zależność od niego:
Teraz możesz pomyśleć o dalszych fajnych rzeczach:
Moduł zawierający konfigurację można podzielić na plik konfiguracyjny.js, który zostanie dołączony na twojej stronie.
Skrypt może być łatwo edytowany przez każdego z was, o ile nie zamieniamy tego osobnego pliku w git. Łatwiej jednak nie sprawdzać konfiguracji, jeśli znajduje się ona w osobnym pliku. Możesz także rozgałęzić go lokalnie.
Teraz, jeśli masz system kompilacji, taki jak ANT lub Maven, twoje dalsze kroki mogą być implementacją niektórych symboli zastępczych dla wartości API_END_POINT, które zostaną zastąpione podczas kompilacji twoimi konkretnymi wartościami.
Lub masz swój
configuration_a.js
iconfiguration_b.js
i decydujesz na zapleczu, które należy uwzględnić.źródło
Dla użytkowników Gulp przydatna jest również stała gulp-ng w połączeniu z gulp-concat , strumieniem zdarzeń i yargs .
W moim folderze konfiguracji mam te pliki:
Następnie możesz uruchomić,
gulp config --env development
a to stworzy coś takiego:Mam również tę specyfikację:
źródło
Aby to osiągnąć, sugeruję użycie wtyczki środowiska AngularJS: https://www.npmjs.com/package/angular-environment
Oto przykład:
Następnie możesz wywołać zmienne z kontrolerów, takie jak to:
Mam nadzieję, że to pomoże.
źródło
angular-environment
wykrywa środowisko? tj. co musisz zrobić na lokalnym komputerze / serwerze internetowym, aby wiedzieć, że jest to odpowiednio program / prod?envServiceProvider.check()
... automatycznie ustawi odpowiednie środowisko na podstawie podanych domen”. Sądzę więc, że wykrywa bieżącą domenę i odpowiednio ustawia środowisko - czas na przetestowanie!Możesz użyć,
lvh.me:9000
aby uzyskać dostęp do aplikacji AngularJS (lvh.me
tylko wskazuje 127.0.0.1), a następnie określić inny punkt końcowy, jeślilvh.me
jest to host:Następnie wstrzyknij usługę konfiguracji i używaj jej
Configuration.API
tam, gdzie potrzebujesz dostępu do interfejsu API:Troszkę niezgrabny, ale działa dla mnie dobrze, choć w nieco innej sytuacji (punkty końcowe API różnią się produkcją i rozwojem).
źródło
window.location.host
było dla mnie więcej niż wystarczające.Moglibyśmy również zrobić coś takiego.
W twoim przypadku
controller/service
możemy wprowadzić zależność i wywołać metodę get z właściwością, do której można uzyskać dostęp.$http.get(env.get('apiroot')
zwróci adres URL w oparciu o środowisko hosta.źródło
Dobre pytanie!
Jednym z rozwiązań może być dalsze używanie pliku config.xml i dostarczanie informacji o punkcie końcowym interfejsu API z backendu do wygenerowanego html, tak jak to (przykład w php):
Może nie jest to ładne rozwiązanie, ale zadziałałoby.
Innym rozwiązaniem może być utrzymanie
API_END_POINT
stałej wartości, tak jak powinna być w produkcji, i modyfikowanie pliku hosts tylko w taki sposób, aby wskazywał ten adres URL na lokalny interfejs API.A może rozwiązanie wykorzystujące
localStorage
do zastępowania, takie jak to:źródło
Bardzo późno do wątku, ale techniką, którą stosowałem, przed Angularem, jest wykorzystanie JSON i elastyczności JS do dynamicznego odwoływania się do kluczy kolekcji i używania niezbywalnych faktów dotyczących środowiska (nazwa serwera hosta, aktualny język przeglądarki itp.) jako dane wejściowe do selektywnego rozróżniania / preferowania sufiksowanych nazw kluczy w strukturze danych JSON.
Zapewnia to nie tylko kontekst środowiska wdrażania (na OP), ale dowolny kontekst kontekstu (taki jak język) w celu zapewnienia i18n lub dowolnej innej wymaganej wariancji jednocześnie oraz (najlepiej) w ramach jednego manifestu konfiguracji, bez powielania i oczywiste.
W OKOLICY 10 LINII VANILLA JS
Zbyt uproszczony, ale klasyczny przykład: podstawowy adres URL punktu końcowego interfejsu API w pliku właściwości w formacie JSON, który różni się w zależności od środowiska, w którym (natch) serwer hosta również się zmienia:
Kluczem do funkcji dyskryminacji jest po prostu nazwa hosta serwera w żądaniu.
Można to oczywiście połączyć z dodatkowym kluczem w oparciu o ustawienia językowe użytkownika:
Zakres dyskryminacji / preferencji można ograniczyć do pojedynczych kluczy (jak wyżej), w których klucz „podstawowy” jest nadpisywany tylko wtedy, gdy istnieje pasujący klucz + sufiks dla danych wejściowych funkcji - lub cała struktura, i sama ta struktura rekursywnie analizowane w celu dopasowania sufiksów dyskryminacji / preferencji:
SO, jeśli odwiedzający użytkownik na stronie produkcyjnej ma ustawienie preferencji języka niemieckiego ( de ), powyższa konfiguracja zwinie się do:
Jak wygląda taka magiczna preferencja / dyskryminacja funkcja przepisywania JSON? Niewiele:
W naszych implementacjach, które obejmują witryny Angular i strony sprzed Angular, po prostu ładujemy konfigurację znacznie wcześniej niż inne wywołania zasobów, umieszczając JSON w ramach samowykonywającego się zamknięcia JS, w tym funkcję prefer (), i karmimy podstawowe właściwości nazwy hosta i kod języka (i akceptuje wszelkie dodatkowe dowolne sufiksy, których możesz potrzebować):
Witryna przed Angularem miałaby teraz zwinięte okno (bez przyrostków @). App_props, do którego można się odwoływać.
Witryna Angular, jako krok bootstrap / init, po prostu kopiuje martwy obiekt rekwizytów do $ rootScope i (opcjonalnie) niszczy go z zakresu globalnego / okna
do późniejszego wstrzyknięcia do kontrolerów:
lub o których mowa w powiązaniach w widokach:
Ostrzeżenia? Znak @ nie jest prawidłowym nazewnictwem zmiennej / klucza JS / JSON, ale do tej pory został zaakceptowany. Jeśli jest to przełom, zastąp dowolną konwencję, taką jak „__” (podwójny znak podkreślenia), o ile się jej trzymasz.
Technikę tę można zastosować po stronie serwera, przenieść do Java lub C #, ale wydajność / kompaktowość mogą się różnić.
Alternatywnie, funkcja / konwencja może być częścią skryptu kompilującego frontonu, tak że pełna krwawa JSON dla wszystkich środowisk / dla wszystkich języków nigdy nie jest przesyłana przewodowo.
AKTUALIZACJA
Rozwinęliśmy tę technikę, aby umożliwić stosowanie wielu sufiksów w kluczu, aby uniknąć zmuszania do korzystania z kolekcji (nadal możesz, tak głęboko, jak chcesz), a także aby uszanować kolejność preferowanych sufiksów.
Przykład (patrz także działający jsFiddle ):
1/2 (podstawowe użycie) preferuje klucze „@dev”, odrzuca wszystkie pozostałe klucze z przyrostkami
3 woli „@dev” niż „@fr”, woli „@ dev & fr” od wszystkich innych
4 (to samo co 3, ale woli „@fr” niż „@dev”)
5 brak preferowanych sufiksów, upuszcza WSZYSTKIE właściwości sufiksów
Dokonuje tego poprzez ocenianie każdej właściwości z przyrostkiem i promowanie wartości właściwości z przyrostkiem do właściwości bez przyrostka podczas iteracji po właściwościach i znajdowaniu przyrostka z wyższą liczbą punktów.
Niektóre usprawnienia w tej wersji, w tym usunięcie zależności od JSON do głębokiego kopiowania i rekurencja tylko w obiektach, które przetrwają rundę punktacji na ich głębokości:
źródło
Jeśli używasz brunch , Wtyczka Constangular pomaga zarządzać zmienne dla różnych środowisk.
źródło
Czy widziałeś to pytanie i jego odpowiedź?
Możesz ustawić globalnie prawidłową wartość dla swojej aplikacji, tak jak to:
a następnie użyj go w swoich usługach. Możesz przenieść ten kod do pliku config.js i wykonać go przy ładowaniu strony lub w innym dogodnym momencie.
źródło