Vinkel - Sådan læses miljøinfo ved kørsel for CI / CD

Hvis du bruger NGINX som webserver og Kubernetes til installationen

Foto af Tim Gouw på Unsplash

Angular leverer konfigurationsindstillinger på byggetid, hvilket betyder, at du er nødt til at definere forskellige miljøfiler for hvert miljø, og Angular tager passende konfiguration, mens projektet bygges ved at give - konfigurationsflag til ng build. Du kan tjekke denne artikel om læsning af miljøinfo i bygningstiden.

Men tolvfaktor-metodikken og nutidens DevOps-strategier antyder, at vi er nødt til at bygge en gang og køre overalt, hvilket betyder, at du kun har en chance for at levere konfigurationsfil. Indstillinger for vinkelkonfiguration er ikke nok. Du skal angive konfigurations- eller miljøinfo ved kørsel. I dette indlæg vil vi se, hvordan vi kan opnå det og læse konfigurationsindstillinger eller miljøinfo på runtime.

  • Eksempel Projekt
  • Det problem, vi står overfor
  • Løsning
  • Implementering
  • Sådan fejlsøges
  • Resumé
  • Konklusion

Eksempel Projekt

Her er et eksempel på projektet til demonstrationen. Du kan klone og køre den på din maskine.

// klone projektet git klon https://github.com/bbachi/angular-envread-runtime.git
// til lokal udvikling npm installation npm start

Dette er et simpelt vinkelprojekt, der indlæser konfigurationsfilen app.config.json fra mappen / asset.

Vi bruger APP_INITIALIZER til at indlæse denne app.config.json-fil inden opstart og brug af disse indstillinger. Her er app.module.ts og app.service.ts filer.

Når du har indlæst indstillingerne, og du kan læse disse indstillinger i app.component.ts som nedenfor.

Baseret på konfigurationen kan du se overskriftsfarve, overskrift og tabel. For eksempel, hvis det er et udviklingsmiljø headerfarve er sort og overskrift er udvikling. Du kan se en lignende skærm som nedenfor.

udviklingsskærm

Hvis du ændrer baggrundsfarve og overskrift til henholdsvis rød og produktion. Du kan se en skærm som nedenfor.

produktionsskærm

Det problem, vi står overfor

Metoden med tolv faktorer antyder, at vi er nødt til at bygge en gang, der køres hvor som helst, men i dette tilfælde bygger vi for hvert miljø. For enkelheds skyld overvejer vi kun to miljøer udvikling og produktion. Da vi betjener Angular-appen med NGINX, og vi kun kan levere konfiguration på byggetid snarere end kørselstid. Vi kan ikke engang levere miljøvariabler ved udgivelsen, da browseren heller ikke læser disse miljøvariabler.

Videresendt konfiguration på byggetid

Vi bygger for hvert miljø, fordi vi var nødt til at videregive miljøspecifik information på byggetidspunktet. Vi er nødt til at finde en måde, hvorpå vi skal videregive denne info på kørselstidspunktet. Hvis vi passerer ved kørselstidspunktet alt det, vi har brug for at opbygge en gang og løbe overalt, som vi ser i nedenstående diagram.

Videresendt konfiguration på kørselstidspunkt

Løsning

Lad os se, hvordan vi kan løse dette problem. En måde at løse dette på er at læse browser-URL'en med vinduet location.href og placere al konfigurationen i appen og indlæse passende konfiguration baseret på en bestemt del af webadressen såsom dev, prod osv.

Hvis du bruger Java eller Nodejs med Angular-appen, kan vi få denne konfiguration fra serveren inden opstart af appen med APP_INITIALIZER. Men hvordan gør vi det, hvis vi bruger NGINX som webserver?

Vi kan bruge Kubernetes configmap til at injicere konfiguration i Pods-lydstyrken, der er monteret i mappen / usr / share / nginx / html / asset, så Angular-appen får den, før du starter appen ved hjælp af APP_INITIALIZER. Lad os se på nedenstående diagram for at forstå bedre.

Læser konfiguration ved kørsel ved hjælp af configmap

Implementering

Lad os implementere løsningen med Kubernetes configMap-objektet. ConfigMap-objekt gør dine containere bærbare ved at afkoble konfigurationen fra dem. Sådan fungerer det.

Den første ting, vi skal gøre, er at opbygge docker-billedet og skubbe det til DockerHub. Her er den flertrinsede Dockerfile, der bygger Angular-appen i første fase og tager disse statiske aktiver og sætter den i rodmappen til NGINX.

Dette er instruktionerne for at opbygge Docker-billedet og skubbe det til DockerHub. Du kan faktisk se det på DockerHub på følgende billede. Dette er et offentligt billede, som du direkte kan trække det fra registreringsdatabasen.

// build image docker build -t bbachin1 / envdemo.
// liste billeder dockerbilleder
// login og skub det til docker hub docker login docker push bbachin1 / envdemo
Docker Hub

Nu er vi nødt til at oprette en implementerings-, service- og configmap-objekter. vi lægger alle disse objekter i en fil kaldet manifest.yml. Vi opretter Configmap først med den krævede config.json. Hvis du ser på installationsobjektet, trækker Kubernetes ovenstående billede bbachin1 / envdemo fra Docker Hub og opretter 5 kopier. Endelig har vi et serviceobjekt med Nodeport-typen, der udsættes for omverdenen.

Vi har indlæst configmap i det lydstyrke, der er monteret på stien / usr / share / nginx / html / asset / folder. Vi opretter alle disse objekter i navneområdet udvikling.

Her er instruktionerne for at oprette objekter og verificere dem.

// oprette objekter kubectl oprette -f manifest.yml
// slette objekter kubectl delete -f manifest.yml
// få implementering kubectl get deploy -n udvikling
// få service kubectl få svc -n udvikling
// få bælgene kubectl få po-n udvikling

Hent Kubernetes offentlige adresse fra denne kommando kubectl cluster-info og hent porten fra serviceobjektet kubectl få svc -n udvikling og få adgang til applikationen, der kører i udviklingsnavnet med denne adresse http: // : / appui

serviceport og offentlig adresse

I ovenstående tilfælde kan du få adgang til applikationen på http://192.168.64.6:31935/appui Sørg for at ændre fra https til http. Bemærk, at al konfigurationen er indlæst fra configmap, såsom header backgroundColor, title osv.

Kører installationen på Minikube

Lad os oprette produktionsinstallationen fra filen manifest-prod.yml og følg ovenstående trin for at køre appen på din lokale.

// oprette objekter kubectl oprette -f manifest-prod.yml
// slette objekter kubectl slette -f manifest-prod.yml
// få installationen kubectl get distribution -n produktion
// få service kubectl få svc -n produktion
// få bælgene kubectl få po-n produktion

Tjenesten i produktionsnavnet kører i havnen 31633.

tjenesten kører i port 31633Kører installationen på Minikube

Sådan fejlsøges

Dette er nogle af fejlfindingsmulighederne, hvis du har problemer med at implementere denne løsning.

Først skal vi verificere, at konfigurationsmappen oprettes på den rigtige måde og i det rigtige navneområde.

// verificer om configmap er oprettet eller ikke kubectl får cm -n udvikling
// verificer dataene i configmap kubectl beskriver cm-n udvikling

Når du har bekræftet konfigurationsmappen. Du kan derefter kontrollere den monterede lydstyrke, der er indlæst med configmap.

// få en af ​​pod kubectl få po-n udvikling
// exec i en af ​​pod kubectl exec-det / bin / sh -n udvikling # cd / usr / share / nginx / html / envapp / aktiver # cat app.config.json
app.config.json

Resumé

  • Angular giver konfigurationsindstillinger på byggetid, hvilket betyder, at du er nødt til at definere forskellige miljøfiler for hvert miljø.
  • Vi er nødt til at bygge en gang, der køres overalt, den anbefalede strategi.
  • Vi kan ikke bruge indstillingen Vinkelmiljø, hvis vi vil bygge en gang og implementere overalt, da vi skal tilvejebringe en separat konfiguration for hvert miljø.
  • Configmap giver en løsning til at afkoble konfigurationen fra at køre containerne.
  • Hvis du betjener din kantede applikation med NGINX, og du har brug for en måde at videresende konfiguration på under driftstid, er ConfigMaps den nemmeste løsning.
  • Du skal indlæse konfigurationsmappen i den lydstyrke, der kan monteres på værtstien, og Angular henter den JSON fra den sti.
  • Du kan slette den eksisterende configmap og genskabe en, og ændringerne kan afspejles i den kørende container uden at genstarte bælterne.

Konklusion

Brug Configmaps, hvis du vil afkoble konfigurationen fra dine containere og injicere passende konfiguration under kørsel.