Ahojte! Toto je druhý príspevok v našej sérii, v ktorej ukazujeme, ako nasadiť moderné webové aplikácie na Red Hat OpenShift.
V predchádzajúcom príspevku sme sa trocha dotkli možností nového builder obrazu S2I (source-to-image), ktorý je určený na zostavovanie a nasadzovanie moderných webových aplikácií na platforme OpenShift. Vtedy nás zaujímala téma rýchleho nasadenia aplikácie, a dnes sa pozrieme, ako používať S2I obraz ako "čistý" builder obraz a kombinovať ho so súvisiacimi zostavami OpenShift.
Čistý builder obraz
Ako sme spomenuli v prvej časti, väčšina moderných webových aplikácií má takzvanú fázu zostavenia, v ktorej sa zvyčajne vykonávajú operácie ako transpirácia kódu, spojenie niekoľkých súborov a minifikácia. Výsledné súbory z týchto operácií – a to sú statické HTML, JavaScript a CSS – sa ukladajú do priečinka output. Miesto tohto priečinka zvyčajne závisí od toho, aké nástroje zostavenia sa používajú, a pre React to bude priečinok ./build (o tejto otázke sa podrobnejšie vrátime nižšie).
Source-to-Image (S2I)
V tomto príspevku sa vôbec nebavíme o téme "čo je S2I a ako ho používať" (viac o tom si môžete prečítať ), ale je dôležité jasne mať predstavu o dvoch fázach tohto procesu, aby ste pochopili, čo robí obraz Web App Builder.
Fáza zostavovania (assemble phase)
Fáza zostavovania je v podstate veľmi podobná tomu, čo sa deje, keď spustíte docker build a výsledkom je nový Docker obraz. Tým pádom táto fáza nastáva, keď začnete zostavenie na platforme OpenShift.
V prípade obrazu Web App Builder za inštaláciu závislostí vašej aplikácie a spustenie zostavenia zodpovedá . Ako predvolené používa builder obraz konštrukciu npm run build, ale túto môžete predefinovať prostredníctvom premennej prostredia NPM_BUILD.
Ako sme už spomenuli, umiestnenie hotovej, už vytvorenej aplikácie závisí od toho, aké nástroje sa používajú. Napríklad v prípade React to bude priečinok /build, a pre aplikácie Angular – priečinok project_name/dist. A ako už bolo ukázané v predchádzajúcom príspevku, umiestnenie výstupného adresára, ktorý je predvolene nastavený ako build, možno predefinovať cez premennú prostredia OUTPUT_DIR. A keďže umiestnenie výstupného priečinka sa líši od rámca k rámcu, jednoducho skopírujete vygenerovaný výstup do štandardného priečinka v obraze, t.j. do /opt/apt-root/output. To je dôležité pre pochopenie ďalšej časti tohto článku, a zatiaľ rýchlo prejdime na ďalšiu fázu – spustenie (run phase).
Etapa spustenia (run phase)
Táto etapa nastáva, keď sa pre nový obraz, vytvorený v etape zostovania, zavolá docker run. Stáva sa to aj pri vykonávaní nasadenia na platforme OpenShift. Predvolene používa na obsluhu statického obsahu, ktorý sa nachádza v uvedenom štandardnom výstupnom adresári.
Táto metóda je dobrá pre rýchle nasadenie aplikácií, ale v skutočnosti sa neodporúča obsluhovať statický obsah takto. Keďže reálne obsluhujeme iba statický obsah, tak nainštalovaný Node.js v našom obraze nie je potrebný – stačí nám aj webový server.
Inými slovami, pri zostavení potrebujeme jedno, pri vykonávaní – iné. V takej situácii sa uplatnia reťazené zostavy (chained builds).
Reťazené zostavy (chained builds)
Toto je to, čo hovoria o v dokumentácii OpenShift:
„Dve zostavy môžu byť prepojené navzájom, pričom jedna z nich generuje skompilovanú entitu a druhá umiestňuje túto entitu do samostatného obrazu, ktorý sa používa na spustenie tejto entity.“
Inými slovami, môžeme využiť obraz Web App Builder na spustenie našej zostavy a potom použiť obraz webového servera, toho istého NGINX, na obsluhu nášho obsahu.
Týmto spôsobom môžeme použiť obraz Web App Builder ako „čistý“ builder a mať taký menší runtime obraz.
Teraz si to rozoberieme na konkrétnom príklade.
Na tréning budeme používať , vytvorenú pomocou nástroja príkazového riadku create-react-app.
Zostaviť všetko dokopy nám pomôže .
Pozrime sa na tento súbor podrobnejšie a začnime sekciou parametrov.
parameters:
- name: SOURCE_REPOSITORY_URL
description: URL zdroja pre aplikáciu
displayName: URL zdroja
required: true
- name: SOURCE_REPOSITORY_REF
description: Názov vetvy pre aplikáciu
displayName: Názov vetvy zdroja
value: master
required: true
- name: SOURCE_REPOSITORY_DIR
description: Miesto v zdrojovom repozitári aplikácie
displayName: Katalóg zdroja
value: .
required: true
- name: OUTPUT_DIR
description: Miesto skompilovaných statických súborov z vášho webového nástroja
displayName: Výstupný katalóg
value: build
required: false
Tu je to celkom jasné, ale treba si dať pozor na parameter OUTPUT_DIR. Pre React aplikáciu z nášho príklad sa netreba obávať, pretože React používa ako výstupnú zložku predvolenú hodnotu, no pri Angular alebo niečom inom bude potrebné tento parameter zmeniť podľa potreby.
Teraz sa pozrime na sekciu ImageStream.
- 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'
Pozrite sa na tretí a štvrtý obraz. Oba sú definované ako Docker obrazy, a tu je jasne zrejmé, odkiaľ pochádzajú.
Tretí obraz je web-app-builder a pochádza z nodeshift\/ubi8-s2i-web-app s tagom 10.x na .
Štvrtý je obraz NGINX (verzia 1.12) s tagom latest na .
Teraz sa pozrime na dva prvé obrazy. Oba sú na začiatku prázdne a vytvárajú sa len počas fázy zostavenia (build phase). Prvý obraz – react-web-app-builder – bude výsledkom fázy skladania, ktorá spája obraz web-app-builder-runtime a náš zdrojový kód. Preto sme do názvu tohto obrazu pripojili „-builder“.
Druhý obraz – react-web-app-runtime – bude výsledkom zlúčenia nginx-image-runtime a niektorých súborov z obrazu react-web-app-builder. Tento obraz sa tiež použije pri nasadení a bude obsahovať len webový server a statický HTML, JavaScript, CSS našej aplikácie.
Zložitá? Teraz sa pozrime na konfigurácie zostavenia a bude to o niečo jasnejšie.
V našej šablóne sú dve konfigurácie zostavenia. Tu je prvá z nich, ktorá je celkom štandardná:
apiVersion: v1
kind: BuildConfig
metadata:
name: react-web-app-builder
spec:
output:
to:
kind: ImageStreamTag
name: react-web-app-builder:latest
source:
git:
uri: ${SOURCE_REPOSITORY_URL}
ref: ${SOURCE_REPOSITORY_REF}
contextDir: ${SOURCE_REPOSITORY_DIR}
type: Git
strategy:
sourceStrategy:
env:
- name: OUTPUT_DIR
value: ${OUTPUT_DIR}
from:
kind: ImageStreamTag
name: web-app-builder-runtime:latest
incremental: true
type: Source
triggers:
- github:
secret: ${GITHUB_WEBHOOK_SECRET}
type: GitHub
- type: ConfigChange
- imageChange: {}
type: ImageChange
Ako vidíme, riadok s označením 1 hovorí, že výsledok tejto kompilácie bude umiestnený do obrázku react-web-app-builder, ktorý sme si pred chvíľou pozreli v sekcii ImageStream.
Riadok s označením 2 hovorí, odkiaľ berieme kód. V našom prípade je to git repozitár a lokalita, ref a kontextová zložka sú definované parametrami, ktoré sme už videli vyššie.
Riadok s označením 3 – to sme už videli v sekcii parametrov. Pridáva premennú prostredia OUTPUT_DIR, ktorá je v našom príklade rovná build.
Riadok s označením 4 hovorí, že chceme používať obrázok web-app-builder-runtime, ktorý sme už videli v sekcii ImageStream.
Riadok s označením 5 hovorí, že chceme používať inkrementálne zostavenie, ak S2I obraz to podporuje, a obraz Web App Builder – to podporuje. Pri prvom spustení, po skončení fázy zostavenia, obraz uloží zložku node_modules do archívneho súboru. Potom pri ďalších spusteniach sa obraz jednoducho rozbalí túto zložku, aby sa skrátila doba zostavenia.
A nakoniec, riadok s označením 6 – to sú len niektoré spúšťače, aby sa kompilácia spúšťala automaticky, bez ručného zásahu, keď sa niečo zmení.
Celkovo ide o pomerne štandardnú konfiguračnú liesť.
Teraz sa pozrime na druhú konfiguračnú liesť. Je veľmi podobná prvej, ale má jedno dôležité rozdiel.
apiVersion: v1
kind: BuildConfig
metadata:
name: react-web-app-runtime
spec:
output:
to:
kind: ImageStreamTag
name: react-web-app-runtime:latest
source:
type: Image
images:
- from:
kind: ImageStreamTag
name: react-web-app-builder:latest
paths:
- sourcePath: /opt/app-root/output/.
destinationDir: .
strategy:
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
Takže druhá konfigurácia zostavovania – react-web-app-runtime, a začína úplne štandardne.
V riadku s označením 1 nie je nič nové – len hovorí, že výsledok zostavenia sa ukladá do obrazu react-web-app-runtime.
Riadok s označením 2, podobne ako v predchádzajúcej konfigurácii, určuje, odkiaľ brať zdrojový kód. Ale všimnite si, že tu hovoríme, že sa berie z obrazu. A to z obrazu, ktorý sme práve vytvorili – z react-web-app-builder (uvedený v riadku s označením 3). Súbory, ktoré chceme použiť, sa nachádzajú vo vnútri obrazu a ich umiestnenie tam je určené v riadku s označením 4, v našom prípade je to /opt/app-root/output/. Ak si pamätáte, práve tam sa ukladajú súbory, generované na základe výsledkov zostavenia našej aplikácie.
Cieľová zložka, určená v riadku s označením 5 – je jednoducho aktuálny adresár (to všetko, pripomeňme, beží vo vnútri akéhosi čarovného zariadenia s názvom OpenShift, a nie na vašom lokálnom počítači).
Sekcia strategy – riadok s označením 6 – tiež vyzerá podobne ako prvá konfigurácia zostavenia. Len tentoraz plánujeme použiť nginx-image-runtime, ktorý sme už videli v sekcii ImageStream.
Nakoniec, riadok s označením 7 – to je sekcia spúšťacích mechanizmov, ktorá aktivuje túto zostavu zakaždým, keď sa zmení obraz react-web-app-builder.
Inak tento šablón obsahuje celkom štandardnú konfiguráciu nasadenia, ako aj veci, ktoré sa týkajú služieb a trás, ale nebudeme sa do toho hlbšie zaoberať. Všimnite si, že obraz, ktorý sa bude nasadzovať – je obraz react-web-app-runtime.
Nasadenie aplikácie
Takže, po tom, čo sme sa pozreli na šablón, pozrime sa, ako ho použiť na nasadenie aplikácie.
Môžeme použiť klientský nástroj OpenShift s názvom oc na nasadenie našich šablón:
$ 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
Prvý príkaz na obrázku vyššie – je zámerne inžiniersky spôsob, ako nájsť šablónu ./openshiftio/application.yaml.
Druhý príkaz jednoducho vytvára novú aplikáciu na základe tejto šablóny.
Po tom, čo tieto príkazy vykonajú, uvidíme, že máme dve zostavy:
A vrátením sa na obrazovku Overview uvidíme spustený pod:
Kliknutím na odkaz prejdeme k našej aplikácii, ktorá predstavuje stránku predvolenej aplikácie React App:
Dodatok 1
Pre milovníkov Angular máme tiež .
Šablóna je rovnaká, s výnimkou premennej OUTPUT_DIR.
Doplnok 2
V tomto článku sme použili NGINX ako webový server, ale je veľmi jednoduché ho nahradiť Apache, stačí zmeniť v šablónovom súbore. na .
Záver
V prvej časti tejto série sme ukázali, ako rýchlo nasadiť moderné webové aplikácie na platforme OpenShift. Dnes sa pozrieme na to, čo robí obraz Web App a ako ho možno kombinovať s čistým webovým serverom, ako je NGINX, pomocou súvislých zostavení (chained builds) pri vytváraní vhodnejšej produkčnej zostavy aplikácií. V nasledujúcom, záverečnom článku tejto série ukážeme, ako spustiť na OpenShift vývojový server pre svoju aplikáciu a zabezpečiť synchronizáciu lokálnych a vzdialených súborov.
Obsah tejto série článkov
- Časť 1: ;
- Časť 2: ako použiť nový obraz S2I spolu s už existujúcim obrazom HTTP servera, napríklad NGINX, pomocou súvislých zostavení OpenShift na realizáciu produkčného nasadenia;
- Časť 3: ako spustiť na platforme OpenShift vývojový server pre svoju aplikáciu a synchronizovať ho s lokálnym súborovým systémom.
Ďalšie zdroje
- Bezplatná elektronická kniha .
- Informácie k .
Zdroj: habr.com
