Hi kollha! Din hija t-tieni post fis-serje tagħna li fiha nuru kif niskjeraw applikazzjonijiet moderni tal-web fuq Red Hat OpenShift.
Fil-post ta 'qabel, missna xi ftit fuq il-kapaċitajiet tal-immaġni tal-bennej S2I (sors għal immaġni) il-ġdida, li hija mfassla għall-bini u l-iskjerament ta' applikazzjonijiet moderni tal-web fuq il-pjattaforma OpenShift. Imbagħad konna interessati fis-suġġett ta 'skjerament malajr ta' applikazzjoni, u llum se nħarsu lejn kif nużaw immaġni S2I bħala immaġni tal-bennej "pura" u ngħaqqduha ma 'assemblaġġi OpenShift relatati.
Immaġni tal-bennej nadif
Kif semmejna fil-Parti XNUMX, il-biċċa l-kbira tal-applikazzjonijiet tal-web moderni għandhom l-hekk imsejjaħ stadju tal-bini, li tipikament iwettaq operazzjonijiet bħal traspilazzjoni tal-kodiċi, konkatenazzjoni ta 'fajls multipli, u minifikazzjoni. Il-fajls miksuba bħala riżultat ta 'dawn l-operazzjonijiet - u dan huwa HTML statiku, JavaScript u CSS - huma maħżuna fil-folder tal-output. Il-post ta 'dan il-folder normalment jiddependi fuq liema għodod tal-bini qed jintużaw, u għal React dan se jkun il-folder ./build (se nerġgħu lura għal dan f'aktar dettall hawn taħt).
Minn Sors għal Immaġini (S2I)
F'din il-kariga ma nmissux is-suġġett "x'inhu S2I u kif tużah" (tista' taqra aktar dwar dan ), iżda huwa importanti li tkun ċara dwar iż-żewġ passi f'dan il-proċess biex tifhem x'tagħmel immaġini tal-Web App Builder.
Fażi ta 'assemblaġġ
Il-fażi tal-assemblaġġ hija simili ħafna fin-natura għal dak li jiġri meta tmexxi docker build u tispiċċa b'immaġni Docker ġdida. Għaldaqstant, dan l-istadju jseħħ meta tibda bini fuq il-pjattaforma OpenShift.
Fil-każ ta' immaġni tal-Web App Builder, hija responsabbli għall-installazzjoni tad-dipendenzi tal-applikazzjoni tiegħek u t-tmexxija tal-bini. . B'mod awtomatiku, l-immaġni tal-bennej tuża n-npm run build construct, iżda dan jista' jiġi sostitwit permezz tal-varjabbli ambjentali NPM_BUILD.
Kif għidna qabel, il-post tal-applikazzjoni lesta, diġà mibnija jiddependi fuq liema għodda tuża. Pereżempju, fil-każ ta 'React dan se jkun il-folder ./build, u għall-applikazzjonijiet Angular se jkun il-folder project_name/dist. U, kif diġà muri fil-post ta 'qabel, il-post tad-direttorju tal-output, li huwa ssettjat biex jinbena awtomatikament, jista' jiġi sostitwit permezz tal-varjabbli ambjentali OUTPUT_DIR. Ukoll, peress li l-post tal-fowlder tal-produzzjoni jvarja minn qafas għal qafas, sempliċement tikkopja l-output iġġenerat fil-folder standard fl-immaġni, jiġifieri / opt/apt-root/output. Dan huwa importanti biex nifhmu l-bqija ta 'dan l-artikolu, iżda għalissa ejja nħarsu malajr lejn l-istadju li jmiss - il-fażi tal-ġirja.
fażi run
Dan l-istadju jseħħ meta ssir sejħa għal docker run fuq l-immaġni l-ġdida maħluqa matul l-istadju tal-assemblaġġ. L-istess jiġri meta l-iskjerament fuq il-pjattaforma OpenShift. Default użi biex iservi kontenut statiku li jinsab fid-direttorju tal-output standard t'hawn fuq.
Dan il-metodu huwa tajjeb biex l-applikazzjonijiet jiġu skjerati malajr, iżda ġeneralment mhux rakkomandat li jservi kontenut statiku b'dan il-mod. Ukoll, peress li fir-realtà naqdu biss kontenut statiku, m'għandniex bżonn Node.js installat ġewwa l-immaġni tagħna - server tal-web ikun biżżejjed.
Fi kliem ieħor, meta nassemblaġġ għandna bżonn ħaġa waħda, meta teżegwixxi neħtieġu oħra. F'din is-sitwazzjoni, il-bini b'katina jkunu utli.
Bini b'katina
Dan huwa dak li jiktbu dwaru fid-dokumentazzjoni OpenShift:
"Żewġ assemblaġġi jistgħu jiġu konnessi flimkien, b'wieħed jiġġenera entità kkumpilata u l-ieħor jospita dik l-entità f'immaġni separata li tintuża biex tmexxi dik l-entità."
Fi kliem ieħor, nistgħu nużaw l-immaġni tal-Web App Builder biex imexxu l-bini tagħna, u mbagħad nużaw l-immaġni tal-web server, l-istess NGINX, biex iservu l-kontenut tagħna.
Għalhekk, nistgħu nużaw l-immaġni tal-Web App Builder bħala bennej "pur" u fl-istess ħin ikollna immaġni ta 'runtime żgħira.
Issa ejja nħarsu lejn dan b'eżempju speċifiku.
Għat-taħriġ se nużaw , maħluqa bl-użu tal-għodda tal-linja tal-kmand create-react-app.
Se jgħinna npoġġu kollox flimkien .
Ejja nħarsu lejn dan il-fajl f'aktar dettall, u ibda bit-taqsima tal-parametri.
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
Kollox hawnhekk huwa pjuttost ċar, iżda ta 'min joqgħod attent għall-parametru OUTPUT_DIR. Għall-applikazzjoni React fl-eżempju tagħna, m'hemm xejn għalfejn tinkwieta, peress li React juża l-valur default bħala l-folder tal-output, iżda fil-każ ta 'Angular jew xi ħaġa oħra, dan il-parametru jeħtieġ li jinbidel kif meħtieġ.
Issa ejja nagħtu ħarsa lejn it-taqsima 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'
Agħti ħarsa lejn it-tielet u r-raba' immaġini. It-tnejn huma definiti bħala stampi Docker, u tista 'tara b'mod ċar minn fejn ġejjin.
It-tielet immaġini hija web-app-builder u ġejja minn nodeshift/ubi8-s2i-web-app tagged 10.x fuq .
Ir-raba 'hija immaġni NGINX (verżjoni 1.12) bl-aħħar tikketta mixgħula .
Issa ejja nħarsu lejn l-ewwel żewġ immaġini. It-tnejn huma vojta fil-bidu u huma maħluqa biss matul il-fażi tal-bini. L-ewwel immaġni, react-web-app-builder, se tkun ir-riżultat ta 'pass ta' assemblaġġ li se jgħaqqad l-immaġni tal-web-app-builder-runtime u l-kodiċi tas-sors tagħna. Huwa għalhekk li żidna "-bennej" mal-isem ta 'din l-immaġni.
It-tieni immaġni - react-web-app-runtime - se tkun ir-riżultat tal-kombinazzjoni ta 'nginx-image-runtime u xi fajls mill-immaġni react-web-app-builder. Din l-immaġni se tintuża wkoll waqt l-iskjerament u se jkun fiha biss is-server tal-web u HTML statiku, JavaScript, CSS tal-applikazzjoni tagħna.
Konfuż? Issa ejja nagħtu ħarsa lejn il-konfigurazzjonijiet tal-bini u se ssir ftit aktar ċara.
Il-mudell tagħna għandu żewġ konfigurazzjonijiet tal-bini. Hawn l-ewwel waħda, u hija pjuttost standard:
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
Kif tistgħu taraw, il-linja bit-tikketta 1 tgħid li r-riżultat ta 'din il-bini se jitqiegħed fl-istess immaġini react-web-app-builder li rajna ftit qabel fit-taqsima ImageStreams.
Il-linja bit-tikketta 2 tgħidlek minn fejn tikseb il-kodiċi. Fil-każ tagħna, dan huwa repożitorju git, u l-post, ref u folder tal-kuntest huma determinati mill-parametri li diġà rajna hawn fuq.
Il-linja bit-tikketta 3 hija dik li diġà rajna fit-taqsima tal-parametri. Hija żżid il-varjabbli ambjentali OUTPUT_DIR, li fl-eżempju tagħna huwa build.
Il-linja bit-tikketta 4 tgħid li tuża l-immaġni tal-web-app-builder-runtime, li diġà rajna fit-taqsima ImageStream.
Il-linja bit-tikketta 5 tgħid li rridu nużaw bini inkrementali jekk l-immaġni S2I tappoġġjaha, u l-immaġni tal-Web App Builder tagħmel. Fl-ewwel tnedija, wara li jitlesta l-istadju tal-assemblaġġ, l-immaġni se ssalva l-folder node_modules f'fajl tal-arkivju. Imbagħad, fuq ġirjiet sussegwenti, l-immaġini se sempliċiment unzip dan il-folder biex tnaqqas il-ħin tal-bini.
U fl-aħħarnett, il-linja ttikkettjata 6 hija biss ftit triggers biex il-bini jaħdem awtomatikament, mingħajr intervent manwali, meta xi ħaġa tinbidel.
B'mod ġenerali din hija konfigurazzjoni tal-bini pjuttost standard.
Issa ejja nagħtu ħarsa lejn it-tieni konfigurazzjoni tal-bini. Huwa simili ħafna għall-ewwel waħda, iżda hemm differenza waħda importanti.
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
Allura t-tieni konfigurazzjoni tal-bini hija react-web-app-runtime, u tibda pjuttost standard.
Il-linja bit-tikketta 1 mhi xejn ġdida - sempliċement tgħid li r-riżultat tal-bini jitqiegħed fl-immaġni react-web-app-runtime.
Il-linja bit-tikketta 2, bħal fil-konfigurazzjoni preċedenti, tindika minn fejn tikseb il-kodiċi tas-sors. Imma innota li hawn qed ngħidu li hija meħuda mill-immaġni. Barra minn hekk, mill-immaġni li għadna kemm ħloqna - minn react-web-app-builder (indikata fil-linja ttikkettjata 3). Il-fajls li rridu nużaw huma ġewwa l-immaġini u l-post tagħhom hemm huwa stabbilit f'linja ttikkettjata 4, fil-każ tagħna huwa /opt/app-root/output/. Jekk tiftakar, dan huwa fejn jinħażnu l-fajls iġġenerati bbażati fuq ir-riżultati tal-bini tal-applikazzjoni tagħna.
Il-folder tad-destinazzjoni speċifikat fit-terminu bit-tikketta 5 huwa sempliċement id-direttorju attwali (dan kollu, ftakar, jaħdem ġewwa xi ħaġa maġika msejħa OpenShift, u mhux fuq il-kompjuter lokali tiegħek).
It-taqsima tal-istrateġija - linja mmarkata 6 - hija wkoll simili għall-ewwel konfigurazzjoni tal-bini. Din id-darba biss se nużaw nginx-image-runtime, li diġà rajna fit-taqsima ImageStream.
Fl-aħħarnett, il-linja ttikkettjata 7 hija sezzjoni ta ' triggers li se jattiva din il-bini kull darba li l-immaġni react-web-app-builder tinbidel.
Inkella, dan il-mudell fih konfigurazzjoni ta 'skjerament pjuttost standard, kif ukoll affarijiet li għandhom x'jaqsmu ma' servizzi u rotot, iżda mhux se nidħlu f'dak id-dettall wisq. Jekk jogħġbok innota li l-immaġni li se tiġi skjerata hija l-immaġni react-web-app-runtime.
Skjerament ta' Applikazzjoni
Allura issa li ħares lejn il-mudell, ejja naraw kif tużah biex tiskjera applikazzjoni.
Nistgħu nużaw l-għodda tal-klijent OpenShift imsejħa oc biex niskjeraw il-mudell tagħna:
$ 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
L-ewwel kmand fil-screenshot ta 'hawn fuq huwa mod apposta ta' inġinerija biex issib mudell./openshiftio/application.yaml.
It-tieni kmand sempliċement joħloq applikazzjoni ġdida bbażata fuq dan il-mudell.
Wara li jaħdmu dawn il-kmandi, se naraw li għandna żewġ assemblaġġi:
U nerġgħu lura għall-iskrin Ħarsa ġenerali, se naraw il-pod imnedija:
Ikklikkja l-link u niġu meħuda għall-app tagħna, li hija l-paġna default React App:
Suppliment 1
Għal min iħobb Angular għandna wkoll .
Il-mudell hawnhekk huwa l-istess, ħlief għall-varjabbli OUTPUT_DIR.
Suppliment 2
F'dan l-artikolu użajna NGINX bħala server tal-web, iżda huwa pjuttost faċli li tissostitwiha b'Apache, ibdel biss il-mudell fil-fajl fuq .
Konklużjoni
Fl-ewwel parti ta’ din is-serje, urejna kif niskjeraw malajr applikazzjonijiet moderni tal-web fuq il-pjattaforma OpenShift. Illum ħarsu lejn x'tagħmel immaġini tal-Web App u kif tista 'tiġi kkombinata ma' server tal-web pur bħal NGINX bl-użu ta 'bini b'katina biex tinħoloq bini ta' applikazzjoni aktar lest għall-produzzjoni. Fl-artiklu li jmiss u l-aħħar f'din is-serje, aħna ser nuru kif tħaddem server ta 'żvilupp għall-applikazzjoni tiegħek fuq OpenShift u niżguraw is-sinkronizzazzjoni ta' fajls lokali u remoti.
Kontenut ta' din is-serje ta' artikli
- Parti 1: ;
- Parti 2: Kif tuża immaġni S2I ġdida b'immaġni ta 'server HTTP eżistenti, bħal NGINX, bl-użu ta' assemblaġġi OpenShift assoċjati għall-iskjerament tal-produzzjoni;
- Parti 3: kif tħaddem server ta' żvilupp għall-applikazzjoni tiegħek fuq il-pjattaforma OpenShift u tissinkronizzaha mas-sistema tal-fajls lokali.
Riżorsi Addizzjonali
- E-book b'xejn .
- Informazzjoni dwar .
Sors: www.habr.com