Salaam wote! Hili ni chapisho la pili katika mfululizo wetu ambalo tunaonyesha jinsi ya kupeleka programu za kisasa za wavuti kwenye Red Hat OpenShift.
Katika chapisho lililopita, tuligusia kidogo uwezo wa picha mpya ya kijenzi ya S2I (chanzo-kwa-picha), ambayo imeundwa kwa ajili ya kujenga na kupeleka programu za kisasa za wavuti kwenye jukwaa la OpenShift. Kisha tulivutiwa na mada ya kupeleka programu haraka, na leo tutaangalia jinsi ya kutumia picha ya S2I kama picha ya wajenzi "safi" na kuichanganya na makusanyiko yanayohusiana ya OpenShift.
Safi picha ya wajenzi
Kama tulivyotaja katika Sehemu ya XNUMX, programu nyingi za kisasa za wavuti zina kinachojulikana kama hatua ya uundaji, ambayo kwa kawaida hufanya shughuli kama vile utafsiri wa msimbo, uunganishaji wa faili nyingi na upunguzaji. Faili zilizopatikana kutokana na shughuli hizi - na hii ni HTML tuli, JavaScript na CSS - zimehifadhiwa kwenye folda ya pato. Mahali pa folda hii kwa kawaida hutegemea zana za ujenzi zinazotumika, na kwa React hii itakuwa ./build folda (tutarejea kwa hili kwa undani zaidi hapa chini).
Chanzo-kwa-Picha (S2I)
Katika chapisho hili hatugusi mada "S2I ni nini na jinsi ya kuitumia" (unaweza kusoma zaidi juu ya hii. ), lakini ni muhimu kuwa wazi kuhusu hatua mbili katika mchakato huu ili kuelewa kile ambacho picha ya Kijenzi cha Programu ya Wavuti hufanya.
Awamu ya Bunge
Awamu ya kusanyiko ni sawa kwa asili na kile kinachotokea unapoendesha ujenzi wa kizimbani na kuishia na picha mpya ya Docker. Ipasavyo, hatua hii hufanyika wakati wa kuanza ujenzi kwenye jukwaa la OpenShift.
Kwa upande wa picha ya Kijenzi cha Programu ya Wavuti, ina jukumu la kusakinisha vitegemezi vya programu yako na kuendesha muundo. . Kwa chaguo-msingi, picha ya mjenzi hutumia npm run build construct, lakini hii inaweza kubatilishwa kupitia utofauti wa mazingira wa NPM_BUILD.
Kama tulivyosema hapo awali, eneo la programu iliyokamilishwa, iliyojengwa tayari inategemea ni zana gani unayotumia. Kwa mfano, katika kesi ya React hii itakuwa ./build folda, na kwa programu za Angular itakuwa project_name/dist folda. Na, kama ilivyoonyeshwa tayari katika chapisho lililopita, eneo la saraka ya pato, ambayo imewekwa kwa msingi, inaweza kubatilishwa kupitia utofauti wa mazingira wa OUTPUT_DIR. Kweli, kwa kuwa eneo la folda ya pato hutofautiana kutoka kwa mfumo hadi mfumo, unakili tu matokeo yaliyotolewa kwenye folda ya kawaida kwenye picha, ambayo ni /opt/apt-root/output. Hii ni muhimu kwa kuelewa wengine wa makala hii, lakini kwa sasa hebu tuangalie haraka hatua inayofuata - awamu ya kukimbia.
awamu ya kukimbia
Hatua hii hutokea wakati simu ya docker inafanywa kwenye picha mpya iliyoundwa wakati wa hatua ya kusanyiko. Vile vile hufanyika wakati wa kupeleka kwenye jukwaa la OpenShift. Chaguomsingi hutumia kutumikia maudhui tuli yaliyo katika saraka ya pato ya hapo juu.
Njia hii ni nzuri kwa kupeleka programu haraka, lakini kwa ujumla haipendekezi kutumikia yaliyomo tuli kwa njia hii. Naam, kwa kuwa kwa kweli tunatoa maudhui tuli pekee, hatuhitaji Node.js kusakinishwa ndani ya picha yetu - seva ya wavuti itatosha.
Kwa maneno mengine, wakati wa kukusanyika tunahitaji kitu kimoja, wakati wa kutekeleza tunahitaji kingine. Katika hali hii, ujenzi wa minyororo huja kwa manufaa.
Minyororo hujenga
Hiki ndicho wanachoandika katika hati za OpenShift:
"Makusanyiko mawili yanaweza kuunganishwa pamoja, huku moja ikitengeneza huluki iliyokusanywa na nyingine ikiandaa huluki hiyo katika picha tofauti inayotumika kuendesha huluki hiyo."
Kwa maneno mengine, tunaweza kutumia picha ya Kijenzi cha Programu ya Wavuti kuendesha muundo wetu, na kisha kutumia picha ya seva ya wavuti, NGINX sawa, kutumikia maudhui yetu.
Kwa hivyo, tunaweza kutumia picha ya Kijenzi cha Programu ya Wavuti kama kijenzi "safi" na wakati huo huo kuwa na picha ndogo ya wakati wa utekelezaji.
Sasa hebu tuangalie hili kwa mfano maalum.
Kwa mafunzo tutatumia , iliyoundwa kwa kutumia zana ya amri ya kuunda-react-app.
Itatusaidia kuweka kila kitu pamoja .
Hebu tuangalie faili hii kwa undani zaidi, na tuanze na sehemu ya vigezo.
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
Kila kitu hapa ni wazi, lakini inafaa kulipa kipaumbele kwa parameter ya OUTPUT_DIR. Kwa programu ya React katika mfano wetu, hakuna kitu cha kuwa na wasiwasi juu, kwani React hutumia dhamana ya chaguo-msingi kama folda ya pato, lakini kwa upande wa Angular au kitu kingine, parameta hii itahitaji kubadilishwa inapohitajika.
Sasa hebu tuangalie sehemu ya 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'
Tazama picha ya tatu na ya nne. Zote zinafafanuliwa kama picha za Docker, na unaweza kuona wazi zinatoka wapi.
Picha ya tatu ni kijenzi-programu-ya tovuti na inatoka kwa nodeshift/ubi8-s2i-web-app iliyotambulishwa 10.x kwenye .
Ya nne ni picha ya NGINX (toleo la 1.12) ikiwa na lebo ya hivi punde zaidi .
Sasa hebu tuangalie picha mbili za kwanza. Wote ni tupu mwanzoni na huundwa tu wakati wa awamu ya ujenzi. Picha ya kwanza, react-web-app-builder, itakuwa tokeo la hatua ya mkusanyiko ambayo itachanganya taswira ya wakati wa utekelezaji ya programu-tumizi na msimbo wetu wa chanzo. Ndiyo sababu tuliongeza "-mjenzi" kwa jina la picha hii.
Picha ya pili - react-web-app-runtime - itakuwa matokeo ya kuchanganya nginx-image-runtime na faili zingine kutoka kwa picha ya react-web-app-builder. Picha hii pia itatumika wakati wa kutumwa na itakuwa na seva ya wavuti tu na HTML tuli, JavaScript, CSS ya programu yetu.
Changanyikiwa? Sasa hebu tuangalie usanidi wa kujenga na itakuwa wazi kidogo.
Kiolezo chetu kina usanidi wa muundo mbili. Hii ndio ya kwanza, na ni kiwango kizuri:
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
Kama unavyoona, mstari ulio na lebo ya 1 unasema kwamba matokeo ya muundo huu yatawekwa katika picha ile ile ya react-web-programu-builder ambayo tuliona mapema kidogo katika sehemu ya ImageStreams.
Mstari ulioandikwa 2 unakuambia wapi pa kupata msimbo. Kwa upande wetu, hii ni hazina ya git, na eneo, ref na folda ya muktadha imedhamiriwa na vigezo ambavyo tayari tumeona hapo juu.
Mstari ulioandikwa 3 ndio ambao tayari tumeona katika sehemu ya vigezo. Inaongeza utofauti wa mazingira wa OUTPUT_DIR, ambao kwa mfano wetu ni kujenga.
Mstari ulioandikwa 4 unasema kutumia picha ya wakati wa utekelezaji ya programu-tumizi ya mjenzi, ambayo tayari tumeiona kwenye sehemu ya ImageStream.
Mstari ulio na lebo ya 5 unasema kwamba tunataka kutumia muundo wa nyongeza ikiwa picha ya S2I itaiunga mkono, na picha ya Web App Builder inafanya hivyo. Katika uzinduzi wa kwanza, baada ya hatua ya kusanyiko kukamilika, picha itahifadhi folda ya node_modules kwenye faili ya kumbukumbu. Kisha, kwa uendeshaji unaofuata, picha itafungua tu folda hii ili kupunguza muda wa kujenga.
Na hatimaye, mstari unaoitwa 6 ni vichochezi vichache tu vya kufanya ujenzi uendeshe kiotomatiki, bila uingiliaji wa mwongozo, wakati kitu kinabadilika.
Kwa ujumla huu ni usanidi mzuri wa kawaida wa kujenga.
Sasa hebu tuangalie usanidi wa pili wa kujenga. Inafanana sana na ile ya kwanza, lakini kuna tofauti moja muhimu.
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
Kwa hivyo usanidi wa pili wa ujenzi ni react-web-app-runtime, na huanza kwa kiwango kizuri.
Laini iliyoandikwa 1 sio mpya - inasema tu kwamba matokeo ya ujenzi yamewekwa kwenye picha ya react-web-app-runtime.
Mstari ulioandikwa 2, kama ilivyo katika usanidi uliopita, unaonyesha mahali pa kupata msimbo wa chanzo. Lakini ona kwamba hapa tunasema kwamba imechukuliwa kutoka kwenye picha. Zaidi ya hayo, kutoka kwa picha ambayo tumeunda hivi punde - kutoka kwa react-web-app-builder (iliyoonyeshwa kwenye mstari ulioandikwa 3). Faili tunazotaka kutumia ziko ndani ya picha na eneo lao hapo limewekwa kwenye mstari ulioandikwa 4, kwa upande wetu ni /opt/app-root/output/. Ikiwa unakumbuka, hapa ndipo faili zinazozalishwa kulingana na matokeo ya kuunda programu yetu huhifadhiwa.
Folda ya mwishilio iliyoainishwa katika neno na lebo ya 5 ni saraka ya sasa (hii ndiyo yote, kumbuka, inaendesha ndani ya kitu cha kichawi kinachoitwa OpenShift, na sio kwenye kompyuta yako ya karibu).
Sehemu ya mkakati - mstari unaoitwa 6 - pia ni sawa na usanidi wa kwanza wa kujenga. Wakati huu tu tutatumia nginx-image-runtime, ambayo tayari tumeona katika sehemu ya ImageStream.
Hatimaye, mstari ulioandikwa 7 ni sehemu ya vichochezi ambavyo vitawezesha muundo huu kila wakati picha ya react-web-app-builder inabadilika.
Vinginevyo, kiolezo hiki kina usanidi wa kawaida wa utumiaji, pamoja na vitu vinavyohusiana na huduma na njia, lakini hatutaelezea kwa undani zaidi. Tafadhali kumbuka kuwa picha ambayo itatumwa ni picha ya react-web-app-runtime.
Usambazaji wa Maombi
Kwa hivyo sasa kwa kuwa tumeangalia kiolezo, hebu tuone jinsi ya kuitumia kupeleka programu.
Tunaweza kutumia zana ya mteja ya OpenShift inayoitwa oc kupeleka kiolezo chetu:
$ 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
Amri ya kwanza katika picha ya skrini iliyo hapo juu ni njia ya kimakusudi ya kihandisi ya kutafuta kiolezo./openshiftio/application.yaml.
Amri ya pili inaunda tu programu mpya kulingana na kiolezo hiki.
Baada ya amri hizi kufanya kazi, tutaona kwamba tunayo makusanyiko mawili:
Na kurudi kwenye skrini ya Muhtasari, tutaona pod iliyozinduliwa:
Bofya kiungo na tutapelekwa kwenye programu yetu, ambayo ni ukurasa chaguomsingi wa React App:
Nyongeza 1
Kwa wapenzi wa Angular pia tunayo .
Mchoro hapa ni sawa, isipokuwa kwa tofauti ya OUTPUT_DIR.
Nyongeza 2
Katika nakala hii tulitumia NGINX kama seva ya wavuti, lakini ni rahisi sana kuibadilisha na Apache, badilisha tu templeti kwenye faili. juu ya .
Hitimisho
Katika sehemu ya kwanza ya mfululizo huu, tulionyesha jinsi ya kupeleka kwa haraka programu za kisasa za wavuti kwenye jukwaa la OpenShift. Leo tuliangalia picha ya Programu ya Wavuti hufanya nini na jinsi inavyoweza kuunganishwa na seva safi ya wavuti kama NGINX kwa kutumia miundo iliyofungwa ili kuunda muundo wa programu tayari kwa uzalishaji. Katika makala inayofuata na ya mwisho katika mfululizo huu, tutaonyesha jinsi ya kuendesha seva ya ukuzaji ya programu yako kwenye OpenShift na kuhakikisha usawazishaji wa faili za ndani na za mbali.
Yaliyomo katika mfululizo huu wa makala
- Sehemu ya 1: ;
- Sehemu ya 2: Jinsi ya kutumia picha mpya ya S2I iliyo na picha iliyopo ya seva ya HTTP, kama vile NGINX, kwa kutumia mikusanyiko inayohusishwa ya OpenShift kwa usambazaji wa uzalishaji;
- Sehemu ya 3: jinsi ya kuendesha seva ya ukuzaji ya programu yako kwenye jukwaa la OpenShift na kuisawazisha na mfumo wa faili wa ndani.
Rasilimali za Ziada
- E-kitabu cha bure .
- Taarifa juu ya .
Chanzo: mapenzi.com