Bok svima! Ovo je drugi post u našoj seriji u kojem pokazujemo kako implementirati moderne web aplikacije na Red Hat OpenShift.
U prethodnom postu malo smo se dotakli mogućnosti novog S2I (source-to-image) builder imagea, koji je dizajniran za izgradnju i implementaciju modernih web aplikacija na OpenShift platformi. Zatim nas je zanimala tema brzog postavljanja aplikacije, a danas ćemo pogledati kako koristiti S2I sliku kao "čistu" sliku graditelja i kombinirati je sa srodnim OpenShift sklopovima.
Čista slika graditelja
Kao što smo spomenuli u XNUMX. dijelu, većina modernih web aplikacija ima takozvani stupanj izgradnje, koji obično izvodi operacije kao što su transpilacija koda, spajanje više datoteka i smanjivanje. Datoteke dobivene kao rezultat ovih operacija - a to je statički HTML, JavaScript i CSS - pohranjuju se u izlaznu mapu. Lokacija ove mape obično ovisi o alatima za izgradnju koji se koriste, a za React će to biti mapa ./build (dolje ćemo se vratiti na to detaljnije).
Od izvora do slike (S2I)
U ovom postu ne dotičemo se teme “što je S2I i kako ga koristiti” (više o tome možete pročitati ), ali važno je razjasniti dva koraka u ovom procesu kako biste razumjeli što slika Web App Buildera radi.
Faza montaže
Faza sklapanja vrlo je slična po prirodi onome što se događa kada pokrenete docker build i završite s novom Docker slikom. Sukladno tome, ova faza se pojavljuje kada se pokrene build na OpenShift platformi.
U slučaju slike Web App Buildera, ona je odgovorna za instaliranje ovisnosti vaše aplikacije i pokretanje izgradnje. . Prema zadanim postavkama, builder slika koristi konstrukciju npm run build, ali to se može nadjačati putem varijable okruženja NPM_BUILD.
Kao što smo ranije rekli, mjesto gotove, već izgrađene aplikacije ovisi o alatima koje koristite. Na primjer, u slučaju Reacta to će biti mapa ./build, a za Angular aplikacije to će biti mapa project_name/dist. I, kao što je već prikazano u prethodnom postu, lokacija izlaznog direktorija, koja je postavljena za izgradnju prema zadanim postavkama, može se nadjačati putem varijable okruženja OUTPUT_DIR. Pa, budući da se lokacija izlazne mape razlikuje od okvira do okvira, jednostavno kopirate generirani izlaz u standardnu mapu na slici, naime /opt/apt-root/output. Ovo je važno za razumijevanje ostatka ovog članka, ali za sada pogledajmo na brzinu sljedeću fazu - fazu pokretanja.
run faza
Ova se faza događa kada se na novoj slici stvorenoj tijekom faze sklapanja izvrši poziv za docker run. Isto se događa prilikom postavljanja na OpenShift platformu. Zadano koristi za posluživanje statičnog sadržaja koji se nalazi u gore navedenom standardnom izlaznom direktoriju.
Ova je metoda dobra za brzo postavljanje aplikacija, ali općenito se ne preporučuje posluživanje statičnog sadržaja na ovaj način. Pa, budući da u stvarnosti poslužujemo samo statični sadržaj, ne trebamo Node.js instaliran unutar naše slike - web poslužitelj će biti dovoljan.
Drugim riječima, pri sastavljanju trebamo jedno, pri izvođenju drugo. U ovoj situaciji lančane građevine dobro dolaze.
Ulančane građe
O tome pišu u dokumentaciji OpenShift:
"Dva sklopa mogu se povezati zajedno, pri čemu jedan generira kompilirani entitet, a drugi hostira taj entitet u zasebnoj slici koja se koristi za pokretanje tog entiteta."
Drugim riječima, možemo upotrijebiti sliku Web App Buildera za pokretanje naše izgradnje, a zatim upotrijebiti sliku web poslužitelja, isti NGINX, za posluživanje našeg sadržaja.
Dakle, možemo koristiti Web App Builder sliku kao "čisti" builder i istovremeno imati malu runtime sliku.
Sada pogledajmo ovo na konkretnom primjeru.
Za trening ćemo koristiti , stvoren pomoću alata naredbenog retka create-react-app.
Pomoći će nam da sve spojimo .
Pogledajmo detaljnije ovu datoteku i započnimo s odjeljkom s parametrima.
parameters:
- name: SOURCE_REPOSITORY_URL
description: The source URL for the application
displayName: Source URL
required: true
- name: SOURCE_REPOSITORY_REF
description: The branch name for the application
displayName: Source Branch
value: master
required: true
- name: SOURCE_REPOSITORY_DIR
description: The location within the source repo of the application
displayName: Source Directory
value: .
required: true
- name: OUTPUT_DIR
description: The location of the compiled static files from your web apps builder
displayName: Output Directory
value: build
required: false
Ovdje je sve prilično jasno, ali vrijedi obratiti pozornost na parametar OUTPUT_DIR. Za React aplikaciju u našem primjeru, nema razloga za brigu, jer React koristi zadanu vrijednost kao izlaznu mapu, ali u slučaju Angulara ili nečeg drugog, ovaj parametar će se morati promijeniti prema potrebi.
Sada pogledajmo odjeljak ImageStreams.
- apiVersion: v1
kind: ImageStream
metadata:
name: react-web-app-builder // 1
spec: {}
- apiVersion: v1
kind: ImageStream
metadata:
name: react-web-app-runtime // 2
spec: {}
- apiVersion: v1
kind: ImageStream
metadata:
name: web-app-builder-runtime // 3
spec:
tags:
- name: latest
from:
kind: DockerImage
name: nodeshift/ubi8-s2i-web-app:10.x
- apiVersion: v1
kind: ImageStream
metadata:
name: nginx-image-runtime // 4
spec:
tags:
- name: latest
from:
kind: DockerImage
name: 'centos/nginx-112-centos7:latest'
Pogledajte treću i četvrtu sliku. Obje su definirane kao Docker slike i jasno možete vidjeti odakle dolaze.
Treća slika je web-app-builder i dolazi iz nodeshift/ubi8-s2i-web-app s oznakom 10.x na .
Četvrta je NGINX slika (verzija 1.12) s najnovijom oznakom .
Sada pogledajmo prve dvije slike. Oba su prazna na početku i kreiraju se samo tijekom faze izgradnje. Prva slika, react-web-app-builder, bit će rezultat koraka sklapanja koji će kombinirati sliku vremena izvođenja web-app-builder-a i naš izvorni kod. Zato smo nazivu ove slike dodali "-graditelj".
Druga slika - react-web-app-runtime - bit će rezultat kombiniranja nginx-image-runtime i nekih datoteka iz react-web-app-builder slike. Ova će se slika također koristiti tijekom postavljanja i sadržavat će samo web poslužitelj i statični HTML, JavaScript, CSS naše aplikacije.
Zbunjeni? Sada pogledajmo konfiguracije izgradnje i bit će nam malo jasnije.
Naš predložak ima dvije konfiguracije izrade. Evo prvog, i prilično je standardan:
apiVersion: v1
kind: BuildConfig
metadata:
name: react-web-app-builder
spec:
output:
to:
kind: ImageStreamTag
name: react-web-app-builder:latest // 1
source: // 2
git:
uri: ${SOURCE_REPOSITORY_URL}
ref: ${SOURCE_REPOSITORY_REF}
contextDir: ${SOURCE_REPOSITORY_DIR}
type: Git
strategy:
sourceStrategy:
env:
- name: OUTPUT_DIR // 3
value: ${OUTPUT_DIR}
from:
kind: ImageStreamTag
name: web-app-builder-runtime:latest // 4
incremental: true // 5
type: Source
triggers: // 6
- github:
secret: ${GITHUB_WEBHOOK_SECRET}
type: GitHub
- type: ConfigChange
- imageChange: {}
type: ImageChange
Kao što možete vidjeti, linija s oznakom 1 kaže da će rezultat ove izgradnje biti smješten u istu react-web-app-builder sliku koju smo vidjeli malo ranije u odjeljku ImageStreams.
Redak s oznakom 2 govori vam odakle možete dobiti kod. U našem slučaju, ovo je git repozitorij, a lokacija, ref i kontekstna mapa određeni su parametrima koje smo već vidjeli gore.
Linija označena s 3 je ono što smo već vidjeli u odjeljku s parametrima. Dodaje varijablu okoline OUTPUT_DIR, koja je u našem primjeru build.
Redak s oznakom 4 govori o upotrebi slike vremena izvođenja web-app-builder-a, koju smo već vidjeli u odjeljku ImageStream.
Redak s oznakom 5 kaže da želimo koristiti inkrementalnu izgradnju ako je S2I slika podržava, a slika Web App Builder podržava. Prilikom prvog pokretanja, nakon završetka faze sklapanja, slika će spremiti mapu node_modules u arhivsku datoteku. Zatim, pri sljedećim izvođenjima, slika će jednostavno raspakirati ovu mapu kako bi se smanjilo vrijeme izgradnje.
I konačno, redak s oznakom 6 samo je nekoliko okidača za automatsko pokretanje izgradnje, bez ručne intervencije, kada se nešto promijeni.
Sve u svemu, ovo je prilično standardna konfiguracija.
Sada pogledajmo drugu konfiguraciju građenja. Vrlo je sličan prvom, ali postoji jedna bitna razlika.
apiVersion: v1
kind: BuildConfig
metadata:
name: react-web-app-runtime
spec:
output:
to:
kind: ImageStreamTag
name: react-web-app-runtime:latest // 1
source: // 2
type: Image
images:
- from:
kind: ImageStreamTag
name: react-web-app-builder:latest // 3
paths:
- sourcePath: /opt/app-root/output/. // 4
destinationDir: . // 5
strategy: // 6
sourceStrategy:
from:
kind: ImageStreamTag
name: nginx-image-runtime:latest
incremental: true
type: Source
triggers:
- github:
secret: ${GITHUB_WEBHOOK_SECRET}
type: GitHub
- type: ConfigChange
- type: ImageChange
imageChange: {}
- type: ImageChange
imageChange:
from:
kind: ImageStreamTag
name: react-web-app-builder:latest // 7
Dakle, druga konfiguracija izgradnje je react-web-app-runtime, i počinje prilično standardno.
Redak s oznakom 1 nije ništa novo - jednostavno kaže da je rezultat izgradnje stavljen u react-web-app-runtime sliku.
Redak s oznakom 2, kao u prethodnoj konfiguraciji, označava odakle se može dobiti izvorni kod. Ali primijetite da ovdje kažemo da je preuzeto sa slike. Štoviše, iz slike koju smo upravo stvorili - iz react-web-app-buildera (navedeno u retku označenom s 3). Datoteke koje želimo upotrijebiti nalaze se unutar slike i njihova je lokacija postavljena u retku s oznakom 4, u našem slučaju to je /opt/app-root/output/. Ako se sjećate, ovdje su pohranjene datoteke generirane na temelju rezultata izrade naše aplikacije.
Odredišna mapa navedena u izrazu s oznakom 5 jednostavno je trenutni direktorij (sve ovo, zapamtite, radi unutar neke magične stvari zvane OpenShift, a ne na vašem lokalnom računalu).
Odjeljak strategije – redak s oznakom 6 – također je sličan prvoj konfiguraciji izgradnje. Samo što ćemo ovaj put koristiti nginx-image-runtime, što smo već vidjeli u odjeljku ImageStream.
Konačno, linija označena sa 7 je odjeljak okidača koji će aktivirati ovu međugradnju svaki put kada se slika react-web-app-buildera promijeni.
Inače, ovaj predložak sadrži prilično standardnu konfiguraciju postavljanja, kao i stvari koje se odnose na usluge i rute, ali nećemo ići u to previše detalja. Imajte na umu da je slika koja će se implementirati slika vremena izvođenja web-aplikacije react-web-app.
Implementacija aplikacije
Sada kada smo pogledali predložak, pogledajmo kako ga koristiti za implementaciju aplikacije.
Možemo upotrijebiti klijentski alat OpenShift pod nazivom oc za implementaciju našeg predloška:
$ find . | grep openshiftio | grep application | xargs -n 1 oc apply -f
$ oc new-app --template react-web-app -p SOURCE_REPOSITORY_URL=https://github.com/lholmquist/react-web-app
Prva naredba na gornjoj snimci zaslona namjerno je inženjerski način pronalaska predloška./openshiftio/application.yaml.
Druga naredba jednostavno stvara novu aplikaciju na temelju ovog predloška.
Nakon što ove naredbe prorade, vidjet ćemo da imamo dva sklopa:
Vraćajući se na zaslon Pregled, vidjet ćemo pokrenutu mahunu:
Kliknite poveznicu i bit ćemo preusmjereni na našu aplikaciju, koja je zadana stranica aplikacije React:
Dodatak 1
Za ljubitelje Angulara također imamo .
Uzorak je ovdje isti, osim varijable OUTPUT_DIR.
Dodatak 2
U ovom smo članku koristili NGINX kao web poslužitelj, no prilično ga je lako zamijeniti Apacheom, samo promijenite predložak u datoteci na .
Zaključak
U prvom dijelu ove serije pokazali smo kako brzo implementirati moderne web aplikacije na platformi OpenShift. Danas smo pogledali što radi slika web-aplikacije i kako se može kombinirati s čistim web-poslužiteljem kao što je NGINX koristeći ulančane međugradnje za stvaranje verzije aplikacije spremnije za proizvodnju. U sljedećem i posljednjem članku u ovoj seriji, pokazat ćemo kako pokrenuti razvojni poslužitelj za svoju aplikaciju na OpenShiftu i osigurati sinkronizaciju lokalnih i udaljenih datoteka.
Sadržaj ove serije članaka
- Dio 1: ;
- 2. dio: Kako koristiti novu S2I sliku s postojećom slikom HTTP poslužitelja, kao što je NGINX, koristeći pridružene OpenShift sklopove za produkcijsku implementaciju;
- Dio 3: kako pokrenuti razvojni poslužitelj za svoju aplikaciju na OpenShift platformi i sinkronizirati ga s lokalnim datotečnim sustavom.
Dodatni resursi
- Besplatna e-knjiga .
- Informacije na .
Izvor: www.habr.com