Hæ allir! Þetta er önnur færslan í röðinni okkar þar sem við sýnum hvernig á að dreifa nútíma vefforritum á Red Hat OpenShift.
Í fyrri færslu snertum við örlítið möguleika nýju S2I (uppspretta-til-mynd) byggingarmyndarinnar, sem er hönnuð til að byggja og dreifa nútíma vefforritum á OpenShift pallinum. Síðan höfðum við áhuga á því að dreifa forriti fljótt og í dag munum við skoða hvernig á að nota S2I mynd sem „hreina“ byggingarmynd og sameina hana með tengdum OpenShift samsetningum.
Hrein byggingamynd
Eins og við nefndum í hluta XNUMX, eru flest nútíma vefforrit með svokallað byggingarstig, sem framkvæmir venjulega aðgerðir eins og kóða umbreytingu, samtengingu margra skráa og minnkun. Skrárnar sem fengnar eru vegna þessara aðgerða - og þetta er kyrrstæður HTML, JavaScript og CSS - eru geymdar í úttaksmöppunni. Staðsetning þessarar möppu fer venjulega eftir því hvaða byggingartól eru notuð og fyrir React verður þetta ./build mappan (við munum koma aftur að þessu nánar hér að neðan).
Uppruni-til-mynd (S2I)
Í þessari færslu snertum við ekki efnið „hvað er S2I og hvernig á að nota það“ (þú getur lesið meira um þetta ), en það er mikilvægt að gera sér grein fyrir þessum tveimur skrefum í þessu ferli til að skilja hvað Web App Builder mynd gerir.
Samsetningaráfangi
Samsetningarfasinn er mjög svipaður í eðli sínu og það sem gerist þegar þú keyrir docker build og endar með nýja Docker mynd. Samkvæmt því gerist þetta stig þegar byrjað er að byggja á OpenShift pallinum.
Ef um er að ræða Web App Builder mynd er það ábyrgt fyrir því að setja upp ósjálfstæði forritsins þíns og keyra smíðina. . Sjálfgefið er að smiðjumyndin notar npm run build bygginguna, en það er hægt að hnekkja þessu í gegnum NPM_BUILD umhverfisbreytuna.
Eins og við sögðum áðan fer staðsetning fullunnar, þegar byggða forritsins eftir því hvaða verkfæri þú notar. Til dæmis, þegar um React er að ræða mun þetta vera ./build mappan og fyrir Angular forrit mun það vera project_name/dist mappan. Og eins og þegar sést í fyrri færslu er hægt að hnekkja staðsetningu framleiðslumöppunnar, sem sjálfgefið er að byggja upp, í gegnum OUTPUT_DIR umhverfisbreytuna. Jæja, þar sem staðsetning úttaksmöppunnar er mismunandi frá ramma til ramma, afritarðu einfaldlega myndaða úttakið í venjulegu möppuna í myndinni, nefnilega /opt/apt-root/output. Þetta er mikilvægt til að skilja restina af þessari grein, en í bili skulum við líta fljótt á næsta stig - hlaupastigið.
hlaupa áfanga
Þetta stig á sér stað þegar símtal til tengivirkis er gert á nýju myndinni sem var búin til á samsetningarstigi. Sama gerist þegar verið er að dreifa á OpenShift pallinum. Sjálfgefið notar til að þjóna kyrrstæðu efni sem staðsett er í ofangreindri stöðluðu framleiðsluskrá.
Þessi aðferð er góð til að dreifa forritum hratt, en almennt er ekki mælt með því að þjóna kyrrstæðu efni á þennan hátt. Jæja, þar sem í raun og veru þjónum við aðeins kyrrstæðu efni, þurfum við ekki að hafa Node.js uppsett inni í myndinni okkar - vefþjónn dugar.
Með öðrum orðum, við samsetningu þurfum við eitt, þegar við framkvæmum þurfum við annað. Í þessum aðstæðum koma hlekkjaðar byggingar sér vel.
Fjötraðar byggingar
Þetta er það sem þeir skrifa um í OpenShift skjölunum:
„Hægt er að tengja tvær samsetningar saman, þar sem önnur býr til samansetta einingu og hin hýsir þá einingu í sérstakri mynd sem er notuð til að keyra þá einingu.
Með öðrum orðum, við getum notað Web App Builder myndina til að keyra byggingu okkar og síðan notað vefþjónsmyndina, sama NGINX, til að þjóna efninu okkar.
Þannig getum við notað Web App Builder myndina sem „hreinan“ smið og á sama tíma haft litla keyrslumynd.
Nú skulum við skoða þetta með ákveðnu dæmi.
Fyrir þjálfun munum við nota , búin til með því að nota create-react-app skipanalínutólið.
Það mun hjálpa okkur að setja allt saman .
Við skulum skoða þessa skrá nánar og byrja á færibreytuhlutanum.
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
Allt hér er nokkuð ljóst, en það er þess virði að borga eftirtekt til OUTPUT_DIR breytu. Fyrir React forritið í dæminu okkar er ekkert að hafa áhyggjur af, þar sem React notar sjálfgefið gildi sem úttaksmappa, en ef um Angular eða eitthvað annað er að ræða þarf að breyta þessari breytu eftir þörfum.
Nú skulum við kíkja á ImageStreams hlutann.
- 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'
Skoðaðu þriðju og fjórðu myndina. Þær eru báðar skilgreindar sem Docker myndir og þú getur greinilega séð hvaðan þær koma.
Þriðja myndin er web-app-builder og hún kemur frá nodeshift/ubi8-s2i-web-app merkt 10.x á .
Sú fjórða er NGINX mynd (útgáfa 1.12) með nýjasta merkinu á .
Nú skulum við líta á fyrstu tvær myndirnar. Þeir eru báðir tómir í upphafi og eru aðeins búnir til á byggingarstigi. Fyrsta myndin, react-web-app-builder, verður afrakstur samsetningarskrefs sem mun sameina vef-app-builder-runtime myndina og frumkóðann okkar. Þess vegna bættum við „-byggir“ við nafn þessarar myndar.
Önnur myndin - react-web-app-runtime - verður afleiðing af því að sameina nginx-image-runtime og nokkrar skrár úr react-web-app-builder myndinni. Þessi mynd verður einnig notuð meðan á dreifingu stendur og mun aðeins innihalda vefþjóninn og fastan HTML, JavaScript, CSS forritsins okkar.
Ruglaður? Nú skulum við skoða byggingarstillingarnar og þær verða aðeins skýrari.
Sniðmátið okkar hefur tvær byggingarstillingar. Hér er sá fyrsti og hann er frekar venjulegur:
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
Eins og þú sérð segir línan með merkimiða 1 að útkoman af þessari byggingu verði sett í sömu react-web-app-builder mynd og við sáum aðeins fyrr í ImageStreams hlutanum.
Línan merkt 2 segir þér hvaðan þú átt að fá kóðann. Í okkar tilviki er þetta git geymsla og staðsetning, tilvísun og samhengismöppur eru ákvörðuð af breytunum sem við sáum þegar hér að ofan.
Línan merkt 3 er það sem við sáum nú þegar í færibreytahlutanum. Það bætir við OUTPUT_DIR umhverfisbreytunni, sem í dæminu okkar er build.
Línan merkt 4 segir að nota web-app-builder-runtime myndina, sem við sáum þegar í ImageStream hlutanum.
Lína merkt 5 segir að við viljum nota stigvaxandi byggingu ef S2I myndin styður það og Web App Builder myndin gerir það. Við fyrstu ræsingu, eftir að samsetningarstigi hefur verið lokið, mun myndin vista möppuna node_modules í skjalasafn. Síðan, við síðari keyrslur, mun myndin einfaldlega renna niður þessari möppu til að draga úr byggingartíma.
Og að lokum, línan merkt 6 er aðeins nokkrar kveikjur til að láta smíðina keyra sjálfkrafa, án handvirkrar inngrips, þegar eitthvað breytist.
Á heildina litið er þetta frekar venjuleg smíðastilling.
Nú skulum við kíkja á seinni smíðastillinguna. Það er mjög líkt því fyrsta, en það er einn mikilvægur munur.
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
Þannig að önnur smíðastillingin er react-web-app-runtime og hún byrjar frekar staðlað.
Línan merkt 1 er ekkert nýtt - hún segir einfaldlega að byggingarniðurstaðan sé sett í react-web-app-runtime myndina.
Línan merkt 2, eins og í fyrri uppsetningu, gefur til kynna hvaðan á að fá frumkóðann. En taktu eftir því að hér erum við að segja að það sé tekið úr myndinni. Þar að auki, frá myndinni sem við bjuggum til - frá react-web-app-builder (tilgreint í línu merkt 3). Skrárnar sem við viljum nota eru inni í myndinni og staðsetning þeirra þar er sett í línu merkt 4, í okkar tilviki er það /opt/app-root/output/. Ef þú manst eftir, þá eru skrárnar sem myndaðar eru byggðar á niðurstöðum við að byggja upp forritið okkar geymdar.
Áfangamappan sem tilgreind er í hugtakinu með merkimiða 5 er einfaldlega núverandi möppu (þetta er allt, mundu, að keyra inni í einhverjum töfrandi hlut sem heitir OpenShift, en ekki á staðbundinni tölvu).
Stefnuhlutinn - lína merkt 6 - er líka svipuð fyrstu smíðastillingunni. Aðeins í þetta skiptið ætlum við að nota nginx-image-runtime, sem við sáum þegar í ImageStream hlutanum.
Að lokum er línan merkt 7 hluti af kveikjum sem mun virkja þessa byggingu í hvert skipti sem myndin bregðast við vefforritagerð breytist.
Annars inniheldur þetta sniðmát nokkuð staðlaða dreifingarstillingar, svo og hluti sem tengjast þjónustu og leiðum, en við munum ekki fara of mikið í það. Vinsamlegast athugaðu að myndin sem verður notuð er react-web-app-runtime myndin.
Dreifing forrita
Svo nú þegar við höfum skoðað sniðmátið skulum við sjá hvernig á að nota það til að dreifa forriti.
Við getum notað OpenShift biðlaratólið sem kallast oc til að dreifa sniðmátinu okkar:
$ 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
Fyrsta skipunin á skjámyndinni hér að ofan er vísvitandi verkfræðileg leið til að finna sniðmát./openshiftio/application.yaml.
Önnur skipunin býr einfaldlega til nýtt forrit byggt á þessu sniðmáti.
Eftir að þessar skipanir hafa virkað munum við sjá að við höfum tvær samsetningar:
Og þegar við snúum aftur á Yfirlitsskjáinn munum við sjá hleðsluna sem var hleypt af stokkunum:
Smelltu á hlekkinn og við munum fara í appið okkar, sem er sjálfgefin React App síða:
Viðbót 1
Fyrir Angular elskendur höfum við líka .
Mynstrið hér er það sama, nema fyrir OUTPUT_DIR breytuna.
Viðbót 2
Í þessari grein notuðum við NGINX sem vefþjón, en það er frekar auðvelt að skipta honum út fyrir Apache, breyttu bara sniðmátinu í skránni á .
Ályktun
Í fyrsta hluta þessarar seríu sýndum við hvernig á að dreifa nútíma vefforritum fljótt á OpenShift pallinum. Í dag skoðuðum við hvað vefforritsmynd gerir og hvernig hægt er að sameina hana með hreinum vefþjóni eins og NGINX með því að nota hlekkjaðar byggingar til að búa til framleiðslutilbúnari forritagerð. Í næstu og síðustu grein í þessari röð munum við sýna hvernig á að keyra þróunarþjón fyrir forritið þitt á OpenShift og tryggja samstillingu staðbundinna og fjarlægra skráa.
Efni þessarar greinaflokks
- Part 1: ;
- Hluti 2: Hvernig á að nota nýja S2I mynd með núverandi HTTP miðlara mynd, eins og NGINX, með því að nota tengdar OpenShift samsetningar til framleiðslu dreifingar;
- Hluti 3: hvernig á að keyra þróunarþjón fyrir forritið þitt á OpenShift pallinum og samstilla það við staðbundið skráarkerfi.
Viðbótarauðlindir
- Ókeypis rafbók .
- Upplýsingar um .
Heimild: www.habr.com