Sveiki visi! Tai antras mūsų serijos įrašas, kuriame parodome, kaip diegti modernias žiniatinklio programas naudojant Red Hat OpenShift.
Ankstesniame įraše šiek tiek palietėme naujojo S2I (source-to-image) kūrimo priemonės vaizdo, skirto kurti ir diegti šiuolaikines žiniatinklio programas OpenShift platformoje, galimybes. Tada mus domino greito programos diegimo tema, o šiandien apžvelgsime, kaip naudoti S2I vaizdą kaip „gryną“ kūrimo atvaizdą ir sujungti jį su susijusiais „OpenShift“ rinkiniais.
Švarus statybininko vaizdas
Kaip minėjome XNUMX dalyje, dauguma šiuolaikinių žiniatinklio programų turi vadinamąją kūrimo stadiją, kuri paprastai atlieka tokias operacijas kaip kodo perkėlimas, kelių failų sujungimas ir sumažinimas. Failai, gauti atlikus šias operacijas – tai yra statinis HTML, JavaScript ir CSS – saugomi išvesties aplanke. Šio aplanko vieta paprastai priklauso nuo naudojamų kūrimo įrankių, o „React“ tai bus aplankas ./build (išsamiau prie to grįšime toliau).
Iš šaltinio į vaizdą (S2I)
Šiame įraše mes neliečiame temos „kas yra S2I ir kaip jį naudoti“ (daugiau apie tai galite paskaityti ), tačiau svarbu aiškiai suprasti du šio proceso veiksmus, kad suprastumėte, ką daro žiniatinklio programų kūrimo priemonės vaizdas.
Surinkimo etapas
Surinkimo fazė savo pobūdžiu yra labai panaši į tai, kas nutinka, kai paleidžiate „Docker build“ ir galiausiai sukuriate naują „Docker“ vaizdą. Atitinkamai, šis etapas įvyksta pradedant kūrimą „OpenShift“ platformoje.
Jei naudojate žiniatinklio programų kūrimo priemonės vaizdą, jis yra atsakingas už jūsų programos priklausomybių įdiegimą ir kūrimo paleidimą. . Pagal numatytuosius nustatymus kūrėjo vaizdas naudoja npm run build konstrukciją, tačiau ją galima nepaisyti naudojant aplinkos kintamąjį NPM_BUILD.
Kaip minėjome anksčiau, baigtos, jau sukurtos programos vieta priklauso nuo to, kokius įrankius naudojate. Pavyzdžiui, „React“ atveju tai bus aplankas ./build, o „Angular“ programoms – projekto_pavadinimas/dist. Ir, kaip jau buvo parodyta ankstesniame įraše, išvesties katalogo, kuris nustatytas sukurti pagal numatytuosius nustatymus, vieta gali būti pakeista naudojant aplinkos kintamąjį OUTPUT_DIR. Na, kadangi išvesties aplanko vieta įvairiose sistemose skiriasi, tiesiog nukopijuokite sugeneruotą išvestį į standartinį vaizdo aplanką, ty /opt/apt-root/output. Tai svarbu norint suprasti likusią šio straipsnio dalį, bet dabar greitai pažvelkime į kitą etapą – vykdymo fazę.
bėgimo fazė
Šis etapas įvyksta, kai iškviečiamas docker paleisti naujas vaizdas, sukurtas surinkimo etape. Tas pats atsitinka diegiant „OpenShift“ platformoje. Numatytas naudoja teikti statinį turinį, esantį aukščiau esančiame standartiniame išvesties kataloge.
Šis metodas yra geras norint greitai įdiegti programas, tačiau paprastai nerekomenduojama tokiu būdu teikti statinio turinio. Na, o kadangi realiai teikiame tik statinį turinį, mūsų paveikslėlyje nereikia įdiegti Node.js – pakaks žiniatinklio serverio.
Kitaip tariant, surenkant reikia vieno dalyko, vykdant – kito. Šioje situacijoje praverčia grandininės konstrukcijos.
Grandininiai statiniai
Apie tai jie rašo OpenShift dokumentacijoje:
„Galima susieti du rinkinius, iš kurių vienas generuoja sudarytą objektą, o kitas priglobia tą objektą atskirame paveikslėlyje, kuris naudojamas šiam objektui vykdyti.
Kitaip tariant, galime naudoti žiniatinklio programų kūrimo priemonės vaizdą, kad paleistume savo versiją, o tada naudoti žiniatinklio serverio vaizdą, tą patį NGINX, kad pateiktume turinį.
Taigi galime naudoti Web App Builder vaizdą kaip „gryną“ kūrimo priemonę ir tuo pačiu turėti nedidelį vykdymo laiką.
Dabar pažvelkime į tai konkrečiu pavyzdžiu.
Treniruotėms naudosime , sukurta naudojant komandinės eilutės įrankį Create-React-app.
Tai padės mums viską sujungti .
Pažvelkime į šį failą išsamiau ir pradėkime nuo parametrų skyriaus.
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
Čia viskas gana aišku, tačiau verta atkreipti dėmesį į parametrą OUTPUT_DIR. Mūsų pavyzdyje pateiktai programai „React“ nėra ko nerimauti, nes „React“ naudoja numatytąją reikšmę kaip išvesties aplanką, tačiau „Angular“ ar dar ko nors kito atveju šį parametrą reikės pakeisti, jei reikia.
Dabar pažvelkime į „ImageStreams“ skyrių.
- 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'
Pažvelkite į trečią ir ketvirtą vaizdus. Jie abu apibrėžiami kaip „Docker“ vaizdai, ir jūs galite aiškiai matyti, iš kur jie kilę.
Trečiasis vaizdas yra žiniatinklio programų kūrimo priemonė ir gaunamas iš nodeshift/ubi8-s2i-web-app, pažymėta 10.x. .
Ketvirtasis yra NGINX vaizdas (1.12 versija) su naujausia žyma .
Dabar pažiūrėkime į pirmuosius du vaizdus. Jie abu yra tušti pradžioje ir sukuriami tik kūrimo etape. Pirmasis vaizdas „react-web-app-builder“ bus surinkimo veiksmo, kuriame bus sujungtas žiniatinklio programos kūrimo priemonės vykdymo laikas ir mūsų šaltinio kodas, rezultatas. Todėl prie šio vaizdo pavadinimo pridėjome „-builder“.
Antrasis vaizdas – react-web-app-runtime – bus sujungus nginx-image-runtime ir kai kuriuos failus iš react-web-app-builder vaizdo. Šis vaizdas taip pat bus naudojamas diegiant ir jame bus tik mūsų programos žiniatinklio serveris ir statinis HTML, JavaScript, CSS.
Supainioti? Dabar pažvelkime į kūrimo konfigūracijas ir ji taps šiek tiek aiškesnė.
Mūsų šablone yra dvi kūrimo konfigūracijos. Štai pirmasis ir gana standartinis:
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
Kaip matote, eilutėje su etikete 1 rašoma, kad šio kūrimo rezultatas bus patalpintas tame pačiame „react-web-app-builder“ vaizde, kurį matėme šiek tiek anksčiau „ImageStreams“ skiltyje.
2 eilutėje nurodoma, iš kur gauti kodą. Mūsų atveju tai yra „git“ saugykla, o vieta, nuoroda ir kontekstinis aplankas nustatomi pagal parametrus, kuriuos jau matėme aukščiau.
Eilutę, pažymėtą 3, jau matėme parametrų skiltyje. Jis prideda aplinkos kintamąjį OUTPUT_DIR, kuris mūsų pavyzdyje yra kūrimas.
Eilutėje, pažymėtoje 4, nurodoma naudoti žiniatinklio programos kūrimo priemonės vykdymo atvaizdą, kurį jau matėme skiltyje „ImageStream“.
5 eilutėje nurodoma, kad norime naudoti laipsnišką kūrimą, jei S2I vaizdas jį palaiko, o žiniatinklio programų kūrimo priemonės vaizdas palaiko. Pirmą kartą paleidus, baigus surinkimo etapą, vaizdas išsaugos aplanką node_modules į archyvo failą. Tada vėlesniais paleidimais vaizdas tiesiog išpakuosis šį aplanką, kad sutrumpėtų kūrimo laikas.
Ir galiausiai, eilutė, pažymėta 6, yra tik keli aktyvikliai, leidžiantys sukurti automatiškai, be rankinio įsikišimo, kai kažkas pasikeičia.
Apskritai tai gana standartinė konfigūracija.
Dabar pažvelkime į antrąją kūrimo konfigūraciją. Jis labai panašus į pirmąjį, tačiau yra vienas svarbus skirtumas.
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
Taigi antrosios versijos konfigūracija yra „react-web-app-runtime“, ir ji prasideda gana standartiškai.
1 pažymėta eilutė nėra jokia naujiena – joje tiesiog sakoma, kad kūrimo rezultatas įtraukiamas į react-web-app-runtime vaizdą.
Eilutė, pažymėta 2, kaip ir ankstesnėje konfigūracijoje, nurodo, iš kur gauti šaltinio kodą. Tačiau atkreipkite dėmesį, kad čia mes sakome, kad tai paimta iš vaizdo. Be to, iš vaizdo, kurį ką tik sukūrėme - iš react-web-app-builder (nurodyta eilutėje, pažymėtoje 3). Failai, kuriuos norime naudoti, yra vaizdo viduje, o jų vieta yra nustatyta eilutėje, pažymėtoje 4, mūsų atveju tai yra /opt/app-root/output/. Jei prisimenate, čia saugomi failai, sukurti remiantis mūsų programos kūrimo rezultatais.
Paskirties aplankas, nurodytas termine su etikete 5, yra tiesiog dabartinis katalogas (atminkite, kad tai viskas, veikia kažkokiame stebuklingame dalyke, vadinamame OpenShift, o ne jūsų vietiniame kompiuteryje).
Strategijos skyrius – eilutė pažymėta 6 – taip pat panaši į pirmosios versijos konfigūraciją. Tik šį kartą naudosime nginx-image-runtime, ką jau matėme ImageStream skiltyje.
Galiausiai eilutė, pažymėta 7, yra aktyviklių sekcija, kuri suaktyvins šią versiją kiekvieną kartą, kai pasikeis „react-web-app-builder“ vaizdas.
Kitu atveju šiame šablone yra gana standartinė diegimo konfigūracija, taip pat su paslaugomis ir maršrutais susiję dalykai, bet mes nesigilinsime į tai. Atminkite, kad vaizdas, kuris bus įdiegtas, yra „react-web-app-runtime“ vaizdas.
Programos diegimas
Taigi dabar, kai peržiūrėjome šabloną, pažiūrėkime, kaip jį naudoti diegiant programą.
Norėdami įdiegti savo šabloną, galime naudoti „OpenShift“ kliento įrankį, vadinamą 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
Pirmoji komanda aukščiau esančioje ekrano kopijoje yra sąmoningai inžinerinis būdas rasti šabloną./openshiftio/application.yaml.
Antroji komanda tiesiog sukuria naują programą pagal šį šabloną.
Kai šios komandos veiks, pamatysime, kad turime du mazgus:
Grįžę į apžvalgos ekraną, pamatysime paleistą grupę:
Spustelėkite nuorodą ir pateksime į mūsų programą, kuri yra numatytasis „React App“ puslapis:
Papildymas 1 m
Angular mėgėjams taip pat turime .
Šablonas čia yra toks pat, išskyrus kintamąjį OUTPUT_DIR.
Papildymas 2 m
Šiame straipsnyje mes naudojome NGINX kaip žiniatinklio serverį, tačiau jį gana lengva pakeisti Apache, tereikia pakeisti šabloną faile apie .
išvada
Pirmoje šios serijos dalyje parodėme, kaip greitai įdiegti modernias žiniatinklio programas OpenShift platformoje. Šiandien pažvelgėme į tai, ką veikia žiniatinklio programos vaizdas ir kaip jį galima derinti su grynu žiniatinklio serveriu, pvz., NGINX, naudojant grandinines versijas, kad būtų sukurta labiau gamybai paruošta programos versija. Kitame ir paskutiniame šios serijos straipsnyje parodysime, kaip paleisti programos kūrimo serverį naudojant „OpenShift“ ir užtikrinti vietinių ir nuotolinių failų sinchronizavimą.
Šios straipsnių serijos turinys
- 1 dalis: ;
- 2 dalis: Kaip naudoti naują S2I vaizdą su esamu HTTP serverio atvaizdu, pvz., NGINX, naudojant susijusius OpenShift rinkinius gamybos diegimui;
- 3 dalis: kaip paleisti programos kūrimo serverį OpenShift platformoje ir sinchronizuoti jį su vietine failų sistema.
Papildomi resursai
- Elektroninė knyga nemokamai .
- Informacija apie .
Šaltinis: www.habr.com