Ahojte všetci! 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 mierne 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žiť S2I obraz ako ‚čistý‘ builder obraz a skombinovať 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 zostavovania, počas ktorej sa zvyčajne vykonávajú operácie ako transpilačný kód, spájanie viacerých súborov a minimalizácia. Výsledné súbory týchto operácií – čo sú statické HTML, JavaScript a CSS – sa ukladajú do výstupného priečinka. Miesto tohto priečinka zvyčajne závisí od toho, aké nástroje na zostavovanie sú použité, a pre React to bude priečinok .\/build (k tejto téme sa podrobnejšie vrátime nižšie).
Source-to-Image (S2I)
V tomto príspevku sa nijako nebavíme o téme ‚čo je S2I a ako ho používať‘ (o tom si môžete prečítať podrobnejšie ), ale je dôležité mať jasnú predstavu o dvoch fázach tohto procesu, aby ste porozumeli tomu, čo vlastne 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. Zodpovedajúcim spôsobom táto fáza nastáva pri spustení zostavy na platforme OpenShift.
V prípade obrazu Web App Builder za inštaláciu závislostí vašej aplikácie a spustenie zostavy zodpovedá . Predvolene builder obraz používa konštrukciu npm run build, ale túto možno prepísať prostredníctvom premennej prostredia NPM_BUILD.
Ako sme už spomenuli, umiestnenie hotovej, už zloženej 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 minulom príspevku, umiestnenie výstupného adresára, ktorý je predvolený ako build, je možné prekonať cez premennú prostredia OUTPUT_DIR. A pretož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, a to konkrétne do /opt/apt-root/output. Je to dôležité pre pochopenie ďalšej časti tohto článku, a zatiaľ rýchlo prejdime na ďalšiu fázu – spúšťanie (run phase).
Fáza spúšťania (run phase)
Táto fáza nastáva, keď sa na nový obraz, vytvorený počas fázy zostavovania, vykoná príkaz docker run. Takisto sa vyskytuje pri nasadení na platforme OpenShift. Predvolene používa na obsluhu statického obsahu nachádzajúceho sa v uvedenom štandardnom výstupnom adresári.
Tento prístup je dobrý pre rýchle nasadenie aplikácií, ale vo všeobecnosti nie je odporúčané obsluhovať statický obsah týmto spôsobom. Pretože v skutočnosti obsluhujeme len statický obsah, Node.js nainštalovaný vo vnútri nášho obrazu nie je potrebný – stačí aj webový server.
Inými slovami, pri zostavovaní potrebujeme niečo iné, než pri vykonávaní. V takejto situácii sa hodia prepojené zostavy (chained builds).
Prepojené zostavy (chained builds)
Tu je, čo hovoria o v dokumentácii OpenShift:
„Dve zostavy je možné prepojiť, pričom jedna z nich generuje skompilovanú entitu a druhá túto entitu umiestňuje do samostatného obrazu, ktorý sa používa na spustenie tejto entity.“
Inými slovami, môžeme použiť obraz Web App Builder na spustenie našej zostavy a potom použiť obraz webového servera, toho istého NGINX, aby sme obsluhovali náš obsah.
Týmto spôsobom môžeme použiť obraz Web App Builder ako „čistého“ builder-a a mať pritom malý runtime obraz.
Teraz si to rozoberieme na konkrétnom príklade.
Pre tréning budeme používať , vytvorenú s pomocou nástroja príkazového riadku create-react-app.
Zosúlaďovať všetko dohromady nám pomôže .
Podrobnejšie preskúmame tento súbor a začneme s časťou parametrov.
parametre:
- názov: SOURCE_REPOSITORY_URL
popis: Zdrojová URL aplikácie
zobrazené meno: Zdrojová URL
povinné: pravda
- názov: SOURCE_REPOSITORY_REF
popis: Názov vetvy aplikácie
zobrazené meno: Zdrojová vetva
hodnota: master
povinné: pravda
- názov: SOURCE_REPOSITORY_DIR
popis: Miesto v zdrojovom repozitári aplikácie
zobrazené meno: Zdrojový adresár
hodnota: .
povinné: pravda
- názov: OUTPUT_DIR
popis: Miesto skompilovaných statických súborov z vášho nástroja na vytváranie webových aplikácií
zobrazené meno: Výstupný adresár
hodnota: build
povinné: nepravda
Tu je všetko dosť jasné, ale treba si dávať pozor na parameter OUTPUT_DIR. Pre React aplikáciu z nášho príkladu nie je potrebné sa obávať, pretože React používa ako výstupný priečinok predvolené nastavenie, ale v prípade Angular alebo niečoho iného, tento parameter bude potrebné upraviť správnym spôsobom.
Teraz sa pozrime na časť ImageStream-ov.
- 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 je jasné, odkiaľ pochádzajú.
Tretí obraz je web-app-builder a pochádza z nodeshift/ubi8-s2i-web-app s tagom 10.x na .
Štvrtý obraz 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á spojí obraz web-app-builder-runtime a náš zdrojový kód. Preto sme do názvu tohto obrazu pridali „-builder“.
Druhý obraz – react-web-app-runtime – bude výsledkom spojenia nginx-image-runtime a určitý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 a CSS našej aplikácie.
Zložitý systém? Pozrime sa teraz na konfiguračné súbory a bude to trochu jasnejšie.
V našej šablóne sú dve konfiguračné súbory. Toto je prvé z nich a je dosť š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 zostavy bude umiestnený do obrazu react-web-app-builder, ktorý sme predtým videli v časti ImageStream.
Riadok s označením 2 hovorí, odkiaľ brať kód. V našom prípade ide o git repozitár a umiestnenie, ref a adresár kontextu sú definované parametrami, ktoré sme už videli vyššie.
Riadok s označením 3 – toto sme už videli v časti parametre. Pridáva premennú prostredia OUTPUT_DIR, ktorá je v našom príklade rovná build.
Riadok s označením 4 hovorí, aby sa použil obraz web-app-builder-runtime, ktorý sme už videli v časti ImageStream.
Riadok s označením 5 hovorí, že chceme použiť inkrementálnu zostavu, ak S2I-obraz ju podporuje, a obraz Web App Builder ju podporuje. Pri prvom spustení, po ukončení fázy zostavovania, obraz uloží adresár node_modules do archívneho súboru. Potom pri ďalších spusteniach obraz jednoducho rozbalí tento adresár, aby skrátil dobu zostavy.
A nakoniec, riadok s označením 6 – to sú len niektoré spúšťače, aby sa zostava spúšťala automaticky, bez ručného zásahu, keď sa niečo zmení.
V skratke, je to pomerne štandardná konfigurácia zostavy.
Teraz sa pozrime na druhú konfiguráciu zostavy. Je veľmi podobná prvej, ale má jedno dôležité odlišnosť.
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 zostavenia je react-web-app-runtime a začína celkom štandardne.
Na riadku s označením 1 nie je nič nové – jednoducho hovorí, že výsledok zostavenia sa ukládá do obrazu react-web-app-runtime.
Riadok s označením 2, rovnako ako v predchádzajúcej konfigurácii, uvádza, odkiaľ berieme zdrojový kód. 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ého na riadku s označením 3). Soubory, ktoré chceme použiť, sa nachádzajú vo vnútri obrazu a ich umiestnenie tam je nastavené na 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ý adresár určený na riadku s označením 5 je jednoducho aktuálny katalóg (toto všetko, pripomíname, beží v rámci niečoho magického zvaného OpenShift, a nie na vašom lokálnom počítači).
Sekcia strategy – riadok s označením 6 – tiež vyzerá ako prvá konfigurácia zostavenia. Tentoraz sa chystáme použiť nginx-image-runtime, ktorý sme už videli v sekcii ImageStream.
Nakoniec, riadok s označením 7 – to je sekcia spúšťačov, ktorá aktivuje toto zostavenie 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 to hlbšie skúmať. 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ónu, pozrime sa, ako ju použiť na nasadenie aplikácie.
Môžeme použiť klientský nástroj OpenShift zvaný oc na nasadenie našej šablóny:
$ 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
Prký prvá príkaz na obrazovke vyššie – to je zámerne inžiniersky spôsob, ako nájsť šablónu /openshiftio/application.yaml.
Druhý príkaz jednoducho vytvorí novú aplikáciu na základe tejto šablóny.
Po tom, ako tieto príkazy prebehnú, uvidíme, že máme dve zostavenia:
A keď sa vrátíme na obrazovku Prehľad, 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á, okrem premennej OUTPUT_DIR.
Doplnenie 2
V tomto článku sme použili ako webový server NGINX, ale dá sa ľahko nahradiť Apache, stačí zmeniť v šablónovom súbore na .
Záver
V prvej časti tejto série sme ukázali, ako rýchlo rozšiřovať moderné webové aplikácie na platforme OpenShift. Dnes preskúmame, čo robí obraz Web App a ako je možné ho kombinovať s čistým webovým serverom ako NGINX pomocou súvisiacich zostavení (chained build) pri organizovaní vhodnejšej pre produkčné podmienky 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 aplikovať nový obraz S2I spolu s už existujúcim obrazom HTTP servera, napríklad NGINX, použitím súvisiacich zostavení OpenShift na organizá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 o .
Zdroj: habr.com
