Ahojte všetci! Toto je druhý príspevok v našej sérii, v ktorom ukážeme, ako nasadiť moderné webové aplikácie na Red Hat OpenShift.
V predchádzajúcom príspevku sme sa mierne dotkli možností nového image buildera S2I (source-to-image), ktorý je určený na vytváranie a nasadzovanie moderných webových aplikácií na platforme OpenShift. Potom nás zaujala téma rýchleho nasadenia aplikácie a dnes sa pozrieme na to, ako použiť obrázok S2I ako „čistý“ obrázok buildera a skombinovať ho so súvisiacimi zostavami OpenShift.
Čistý obrázok staviteľa
Ako sme spomenuli v XNUMX. časti, väčšina moderných webových aplikácií má takzvanú fázu zostavovania, ktorá zvyčajne vykonáva operácie, ako je transpilácia kódu, viacnásobné zreťazenie súborov a minifikácia. Súbory získané ako výsledok týchto operácií - a to je statický HTML, JavaScript a CSS - sú uložené vo výstupnom priečinku. Umiestnenie tohto priečinka zvyčajne závisí od toho, aké nástroje na zostavovanie sa používajú, a pre React to bude priečinok ./build (podrobnejšie sa k tomu vrátime nižšie).
Source-to-Image (S2I)
V tomto príspevku sa nedotýkame témy „čo je S2I a ako ho používať“ (o tomto si môžete prečítať viac ), ale je dôležité objasniť dva kroky v tomto procese, aby ste pochopili, čo robí obrázok Web App Builder.
Fáza montáže
Fáza zostavovania je vo svojej podstate veľmi podobná tomu, čo sa stane, keď spustíte zostavenie dockera a skončíte s novým obrazom Docker. V súlade s tým sa táto fáza vyskytuje pri spustení zostavy na platforme OpenShift.
V prípade obrázka Web App Builder je zodpovedný za inštaláciu závislostí vašej aplikácie a spustenie zostavy. . V predvolenom nastavení používa obrázok tvorcu zostavu zostavy spustenia npm, ale tú možno prepísať pomocou premennej prostredia NPM_BUILD.
Ako sme už povedali, umiestnenie hotovej, už postavenej aplikácie závisí od toho, aké nástroje používate. Napríklad v prípade React to bude priečinok ./build a pre aplikácie Angular to bude priečinok project_name/dist. A ako už bolo uvedené v predchádzajúcom príspevku, umiestnenie výstupného adresára, ktorý je predvolene nastavený na zostavenie, možno prepísať pomocou premennej prostredia OUTPUT_DIR. No, keďže umiestnenie výstupného priečinka sa líši od frameworku k frameworku, vygenerovaný výstup jednoducho skopírujete do štandardného priečinka na obrázku, konkrétne /opt/apt-root/output. To je dôležité pre pochopenie zvyšku tohto článku, ale zatiaľ sa rýchlo pozrime na ďalšiu fázu – fázu behu.
fáza behu
Táto fáza nastane, keď sa na novom obrázku vytvorenom počas fázy zostavovania uskutoční volanie spustenia ukotvenia. To isté sa deje pri nasadení na platforme OpenShift. Predvolené používa na obsluhu statického obsahu umiestneného vo vyššie uvedenom štandardnom výstupnom adresári.
Táto metóda je dobrá na rýchle nasadenie aplikácií, ale vo všeobecnosti sa neodporúča poskytovať statický obsah týmto spôsobom. No, keďže v skutočnosti poskytujeme iba statický obsah, nepotrebujeme mať Node.js nainštalovaný v našom obraze – postačí webový server.
Inými slovami, pri montáži potrebujeme jednu vec, pri realizácii inú. V tejto situácii prídu vhod reťazené stavby.
Zreťazené stavby
O tomto píšu v dokumentácii OpenShift:
"Dve zostavy môžu byť prepojené, pričom jedna generuje kompilovanú entitu a druhá hosťuje túto entitu v samostatnom obrázku, ktorý sa používa na spustenie tejto entity."
Inými slovami, môžeme použiť obrázok Web App Builder na spustenie našej zostavy a potom použiť obrázok webového servera, rovnaký NGINX, na poskytovanie nášho obsahu.
Môžeme teda použiť obrázok Web App Builder ako „čistý“ tvorca a zároveň mať malý runtime obrázok.
Teraz sa na to pozrime na konkrétnom príklade.
Na tréning použijeme , vytvorený pomocou nástroja príkazového riadka create-react-app.
Pomôže nám to dať všetko dokopy .
Pozrime sa na tento súbor podrobnejšie a začnime sekciou parametrov.
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
Všetko je tu celkom jasné, ale stojí za to venovať pozornosť parametru OUTPUT_DIR. Pre aplikáciu React v našom príklade sa nie je čoho obávať, pretože React používa predvolenú hodnotu ako výstupný priečinok, ale v prípade Angular alebo niečoho iného bude potrebné tento parameter podľa potreby zmeniť.
Teraz sa pozrime na časť 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'
Pozrite sa na tretí a štvrtý obrázok. Oba sú definované ako obrázky Docker a môžete jasne vidieť, odkiaľ pochádzajú.
Tretí obrázok je web-app-builder a pochádza z nodeshift/ubi8-s2i-web-app označených 10.x na .
Štvrtý je obrázok NGINX (verzia 1.12) s najnovšou značkou .
Teraz sa pozrime na prvé dva obrázky. Obe sú na začiatku prázdne a vytvárajú sa iba počas fázy zostavovania. Prvý obrázok, response-web-app-builder, bude výsledkom montážneho kroku, ktorý bude kombinovať obrázok web-app-builder-runtime a náš zdrojový kód. Preto sme k názvu tohto obrázku pridali „-builder“.
Druhý obrázok – reag-web-app-runtime – bude výsledkom skombinovania nginx-image-runtime a niektorých súborov z obrázku reag-web-app-builder. Tento obrázok sa použije aj počas nasadenia a bude obsahovať iba webový server a statické HTML, JavaScript, CSS našej aplikácie.
Zmätený? Teraz sa pozrime na zostavy zostavy a bude to trochu jasnejšie.
Naša šablóna má dve konfigurácie zostavy. Tu je prvý a je celkom štandardný:
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
Ako môžete vidieť, riadok s označením 1 hovorí, že výsledok tohto zostavenia bude umiestnený v rovnakom obrázku reagovať-web-app-builder, ktorý sme videli o niečo skôr v sekcii ImageStreams.
Riadok označený ako 2 vám hovorí, odkiaľ získate kód. V našom prípade ide o úložisko git a umiestnenie, ref a kontextový priečinok sú určené parametrami, ktoré sme už videli vyššie.
Riadok označený 3 je to, čo sme už videli v sekcii parametrov. Pridáva premennú prostredia OUTPUT_DIR, ktorá je v našom príklade zostavená.
Riadok označený 4 hovorí, že sa má použiť obrázok web-app-builder-runtime, ktorý sme už videli v sekcii ImageStream.
Riadok označený 5 hovorí, že chceme použiť prírastkové zostavenie, ak to podporuje obrázok S2I a obrázok Web App Builder áno. Pri prvom spustení, po dokončení fázy zostavovania, obrázok uloží priečinok node_modules do archívneho súboru. Potom pri ďalších spusteniach obrázok jednoducho rozbalí tento priečinok, aby sa skrátil čas zostavovania.
A nakoniec, riadok označený 6 je len niekoľkými spúšťačmi, aby sa zostava spustila automaticky, bez manuálneho zásahu, keď sa niečo zmení.
Celkovo ide o celkom štandardnú konfiguráciu zostavy.
Teraz sa pozrime na druhú konfiguráciu zostavenia. Je veľmi podobný tomu prvému, no je tu jeden 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 // 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
Takže druhá konfigurácia zostavy je reag-web-app-runtime a začína celkom štandardne.
Riadok označený 1 nie je žiadnou novinkou – jednoducho hovorí, že výsledok zostavenia je vložený do obrazu reag-web-app-runtime.
Riadok označený 2, ako v predchádzajúcej konfigurácii, označuje, odkiaľ získať zdrojový kód. Ale všimnite si, že tu hovoríme, že je to prevzaté z obrázka. Navyše z obrázka, ktorý sme práve vytvorili - z reakčného-webového-app-buildera (uvedeného v riadku označenom 3). Súbory, ktoré chceme použiť, sú vo vnútri obrázku a ich umiestnenie je tam nastavené v riadku označenom 4, v našom prípade je to /opt/app-root/output/. Ak si pamätáte, tu sú uložené súbory vygenerované na základe výsledkov budovania našej aplikácie.
Cieľový priečinok špecifikovaný vo výraze s označením 5 je jednoducho aktuálny adresár (toto je všetko, pamätajte, že beží v nejakej magickej veci nazývanej OpenShift a nie na vašom lokálnom počítači).
Časť stratégie – riadok označený 6 – je tiež podobná konfigurácii prvej zostavy. Iba tentoraz použijeme nginx-image-runtime, ktorý sme už videli v sekcii ImageStream.
Nakoniec, riadok označený 7 je sekcia spúšťačov, ktoré aktivujú túto zostavu vždy, keď sa zmení obrázok nástroja na tvorbu webových aplikácií.
Inak táto šablóna obsahuje celkom štandardnú konfiguráciu nasadenia, ako aj veci, ktoré sa týkajú služieb a trás, ale nebudeme to zachádzať do prílišných podrobností. Upozorňujeme, že obrázok, ktorý bude nasadený, je obrázok reagovať-web-app-runtime.
Nasadenie aplikácie
Takže teraz, keď sme sa pozreli na šablónu, poďme sa pozrieť, ako ju použiť na nasadenie aplikácie.
Na nasadenie našej šablóny môžeme použiť klientsky nástroj OpenShift s názvom oc:
$ 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 snímke obrazovky vyššie je zámerne inžiniersky spôsob, ako nájsť šablónu./openshiftio/application.yaml.
Druhý príkaz jednoducho vytvorí novú aplikáciu založenú na tejto šablóne.
Keď tieto príkazy fungujú, uvidíme, že máme dve zostavy:
A keď sa vrátime na obrazovku Prehľad, uvidíme spustený modul:
Kliknite na odkaz a prejdeme do našej aplikácie, ktorá je predvolenou stránkou aplikácie React:
Dodatok 1
Pre milovníkov Angular máme tiež .
Vzor je tu rovnaký, s výnimkou premennej OUTPUT_DIR.
Dodatok 2
V tomto článku sme použili NGINX ako webový server, ale je celkom jednoduché ho nahradiť Apache, stačí zmeniť šablónu v súbore na .
Záver
V prvej časti tejto série sme si ukázali, ako rýchlo nasadiť moderné webové aplikácie na platforme OpenShift. Dnes sme sa pozreli na to, čo robí obrázok webovej aplikácie a ako ho možno skombinovať s čistým webovým serverom, ako je NGINX, pomocou reťazených verzií na vytvorenie zostavy aplikácie pripravenej na výrobu. V ďalšom a poslednom článku tejto série si ukážeme, ako spustiť vývojový server pre vašu aplikáciu na OpenShift a zabezpečiť synchronizáciu lokálnych a vzdialených súborov.
Obsah tejto série článkov
- Časť 1: ;
- Časť 2: Ako používať nový obraz S2I s existujúcim obrazom servera HTTP, ako je NGINX, pomocou pridružených zostáv OpenShift na produkčné nasadenie;
- Časť 3: ako spustiť vývojový server pre vašu aplikáciu na platforme OpenShift a synchronizovať ju s lokálnym súborovým systémom.
Dodatočné zdroje
- Bezplatná e-kniha .
- Informácie o .
Zdroj: hab.com