Helo pawb! Dyma'r ail swydd yn ein cyfres lle rydyn ni'n dangos sut i ddefnyddio cymwysiadau gwe modern ar Red Hat OpenShift.
Yn y swydd flaenorol, fe wnaethom gyffwrdd ychydig ar alluoedd delwedd adeiladwr newydd S2I (ffynhonnell-i-ddelwedd), sydd wedi'i gynllunio ar gyfer adeiladu a defnyddio cymwysiadau gwe modern ar lwyfan OpenShift. Yna roedd gennym ddiddordeb yn y pwnc o ddefnyddio cymhwysiad yn gyflym, a heddiw byddwn yn edrych ar sut i ddefnyddio delwedd S2I fel delwedd adeiladwr “pur” a'i gyfuno â chynulliadau OpenShift cysylltiedig.
Delwedd adeiladwr glân
Fel y soniasom yn Rhan XNUMX, mae gan y rhan fwyaf o gymwysiadau gwe modern yr hyn a elwir yn gam adeiladu, sydd fel arfer yn cyflawni gweithrediadau megis trawslwytho cod, cydgadwynu ffeiliau lluosog, a minimeiddiad. Mae'r ffeiliau a geir o ganlyniad i'r gweithrediadau hyn - sef HTML statig, JavaScript a CSS - yn cael eu storio yn y ffolder allbwn. Mae lleoliad y ffolder hon fel arfer yn dibynnu ar ba offer adeiladu sy'n cael eu defnyddio, ac ar gyfer React dyma fydd y ffolder ./build (dyma ni'n dod yn ôl at hwn yn fanylach isod).
Ffynhonnell-i-Delwedd (S2I)
Yn y post hwn nid ydym yn cyffwrdd ar y testun “beth yw S2I a sut i'w ddefnyddio” (gallwch ddarllen mwy am hyn ), ond mae'n bwysig bod yn glir am y ddau gam yn y broses hon i ddeall beth mae delwedd Web App Builder yn ei wneud.
Cyfnod Cynulliad
Mae'r cyfnod cydosod yn debyg iawn o ran ei natur i'r hyn sy'n digwydd pan fyddwch chi'n rhedeg adeiladu docwyr ac yn y pen draw gyda delwedd Dociwr newydd. Yn unol â hynny, mae'r cam hwn yn digwydd wrth ddechrau adeiladu ar y platfform OpenShift.
Yn achos delwedd Web App Builder, mae'n gyfrifol am osod dibyniaethau eich cais a rhedeg yr adeiladu. . Yn ddiofyn, mae delwedd yr adeiladwr yn defnyddio lluniad adeiladu rhediad npm, ond gellir diystyru hyn trwy newidyn amgylchedd NPM_BUILD.
Fel y dywedasom yn gynharach, mae lleoliad y cymhwysiad gorffenedig, sydd eisoes wedi'i adeiladu, yn dibynnu ar ba offer rydych chi'n eu defnyddio. Er enghraifft, yn achos React hwn fydd y ffolder ./build, ac ar gyfer cymwysiadau Angular dyma fydd y ffolder project_name/dist. Ac, fel y dangoswyd eisoes yn y post blaenorol, gellir diystyru lleoliad y cyfeiriadur allbwn, sydd wedi'i osod i adeiladu yn ddiofyn, trwy'r newidyn amgylchedd OUTPUT_DIR. Wel, gan fod lleoliad y ffolder allbwn yn wahanol o fframwaith i fframwaith, rydych chi'n copïo'r allbwn a gynhyrchir i'r ffolder safonol yn y ddelwedd, sef /opt/apt-root/output. Mae hyn yn bwysig ar gyfer deall gweddill yr erthygl hon, ond am y tro gadewch i ni edrych yn gyflym ar y cam nesaf - y cyfnod rhedeg.
cyfnod rhedeg
Mae'r cam hwn yn digwydd pan wneir galwad i rediad docwr ar y ddelwedd newydd a grëwyd yn ystod y cam cydosod. Mae'r un peth yn digwydd wrth ddefnyddio platfform OpenShift. Diofyn defnyddiau i wasanaethu cynnwys statig sydd wedi'i leoli yn y cyfeiriadur allbwn safonol uchod.
Mae'r dull hwn yn dda ar gyfer defnyddio cymwysiadau yn gyflym, ond yn gyffredinol ni argymhellir gwasanaethu cynnwys statig fel hyn. Wel, oherwydd mewn gwirionedd dim ond cynnwys statig rydyn ni'n ei wasanaethu, nid oes angen Node.js wedi'i osod y tu mewn i'n delwedd - bydd gweinydd gwe yn ddigon.
Mewn geiriau eraill, wrth gydosod mae angen un peth arnom, wrth gyflawni mae angen peth arall arnom. Yn y sefyllfa hon, mae adeiladau cadwyn yn dod yn ddefnyddiol.
Adeiladau cadwynog
Dyma beth maen nhw'n ysgrifennu amdano yn y ddogfennaeth OpenShift:
“Gellir cysylltu dau gynulliad gyda’i gilydd, gydag un yn cynhyrchu endid a luniwyd a’r llall yn cynnal yr endid hwnnw mewn delwedd ar wahân a ddefnyddir i redeg yr endid hwnnw.”
Mewn geiriau eraill, gallwn ddefnyddio delwedd Web App Builder i redeg ein hadeiladwaith, ac yna defnyddio delwedd y gweinydd gwe, yr un NGINX, i wasanaethu ein cynnwys.
Felly, gallwn ddefnyddio delwedd Web App Builder fel adeiladwr “pur” ac ar yr un pryd cael delwedd amser rhedeg bach.
Nawr, gadewch i ni edrych ar hyn gydag enghraifft benodol.
Ar gyfer hyfforddiant byddwn yn defnyddio , a grëwyd gan ddefnyddio'r offeryn llinell orchymyn create-react-app.
Bydd yn ein helpu i roi popeth at ei gilydd .
Gadewch i ni edrych ar y ffeil hon yn fwy manwl, a dechrau gyda'r adran paramedrau.
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
Mae popeth yma yn eithaf clir, ond mae'n werth talu sylw i'r paramedr OUTPUT_DIR. Ar gyfer y cymhwysiad React yn ein hesiampl, nid oes unrhyw beth i boeni amdano, gan fod React yn defnyddio'r gwerth diofyn fel y ffolder allbwn, ond yn achos Angular neu rywbeth arall, bydd angen newid y paramedr hwn yn ôl yr angen.
Nawr, gadewch i ni edrych ar yr adran 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'
Edrychwch ar y trydydd a'r bedwaredd ddelwedd. Mae'r ddau wedi'u diffinio fel delweddau Docker, a gallwch chi weld yn glir o ble maen nhw'n dod.
Mae'r drydedd ddelwedd yn web-app-builder ac mae'n dod o nodeshift/ubi8-s2i-web-app wedi'i dagio 10.x ymlaen .
Mae'r pedwerydd yn ddelwedd NGINX (fersiwn 1.12) gyda'r tag diweddaraf ymlaen .
Nawr, gadewch i ni edrych ar y ddwy ddelwedd gyntaf. Mae'r ddau yn wag ar y dechrau ac yn cael eu creu yn ystod y cyfnod adeiladu yn unig. Bydd y ddelwedd gyntaf, react-web-app-builder, yn ganlyniad i gam cydosod a fydd yn cyfuno'r ddelwedd gwe-app-builder-runtime a'n cod ffynhonnell. Dyna pam y gwnaethom ychwanegu “-builder” at enw'r ddelwedd hon.
Bydd yr ail ddelwedd - react-web-app-runtime - yn ganlyniad i gyfuno nginx-image-runtime a rhai ffeiliau o'r ddelwedd react-web-app-builder. Bydd y ddelwedd hon hefyd yn cael ei defnyddio yn ystod y defnydd a bydd ond yn cynnwys gweinydd gwe a HTML statig, JavaScript, CSS ein rhaglen.
Wedi drysu? Nawr, gadewch i ni edrych ar y ffurfweddau adeiladu a bydd yn dod ychydig yn gliriach.
Mae gan ein templed ddau gyfluniad adeiladu. Dyma'r un cyntaf, ac mae'n eithaf safonol:
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
Fel y gallwch weld, mae'r llinell gyda label 1 yn dweud y bydd canlyniad y gwaith adeiladu hwn yn cael ei roi yn yr un ddelwedd adweithydd-gwe-app-builder a welsom ychydig yn gynharach yn yr adran ImageStreams.
Mae'r llinell sydd wedi'i labelu 2 yn dweud wrthych o ble i gael y cod. Yn ein hachos ni, ystorfa git yw hon, ac mae'r lleoliad, y cyf a'r ffolder cyd-destun yn cael eu pennu gan y paramedrau a welsom eisoes uchod.
Y llinell wedi'i labelu 3 yw'r hyn a welsom eisoes yn yr adran paramedrau. Mae'n ychwanegu'r newidyn amgylchedd OUTPUT_DIR, sydd yn ein hesiampl ni yn adeiladu.
Mae'r llinell sydd wedi'i labelu 4 yn dweud i ddefnyddio'r ddelwedd gwe-app-builder-runtime a welsom eisoes yn yr adran ImageStream.
Mae llinell wedi'i labelu 5 yn dweud ein bod am ddefnyddio adeiladwaith cynyddrannol os yw delwedd S2I yn ei gefnogi, ac mae delwedd Web App Builder yn ei gefnogi. Yn y lansiad cyntaf, ar ôl cwblhau'r cam cydosod, bydd y ddelwedd yn cadw'r ffolder node_modules i mewn i ffeil archif. Yna, ar rediadau dilynol, bydd y ddelwedd yn dadsipio'r ffolder hon i leihau amser adeiladu.
Ac yn olaf, dim ond ychydig o sbardunau yw'r llinell sydd wedi'i labelu 6 i wneud i'r adeiladu redeg yn awtomatig, heb ymyrraeth â llaw, pan fydd rhywbeth yn newid.
Ar y cyfan mae hwn yn gyfluniad adeiladu eithaf safonol.
Nawr, gadewch i ni edrych ar y cyfluniad ail adeilad. Mae'n debyg iawn i'r un cyntaf, ond mae un gwahaniaeth pwysig.
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
Felly yr ail ffurfweddiad adeiladu yw react-web-app-runtime, ac mae'n cychwyn yn eithaf safonol.
Nid yw'r llinell sydd wedi'i labelu 1 yn ddim byd newydd - mae'n dweud yn syml bod canlyniad yr adeiladu yn cael ei roi yn y ddelwedd react-web-app-runtime.
Mae'r llinell sydd wedi'i labelu 2, fel yn y ffurfweddiad blaenorol, yn nodi o ble i gael y cod ffynhonnell. Ond sylwch mai yma yr ydym yn dywedyd ei fod wedi ei gymeryd o'r ddelw. Ar ben hynny, o'r ddelwedd yr ydym newydd ei chreu - o react-web-app-builder (a nodir yn llinell wedi'i labelu 3). Mae'r ffeiliau yr ydym am eu defnyddio y tu mewn i'r ddelwedd ac mae eu lleoliad yno wedi'i osod yn unol â'r label 4, yn ein hachos ni, /opt/app-root/output/ ydyw. Os cofiwch, dyma lle mae'r ffeiliau a gynhyrchir yn seiliedig ar ganlyniadau adeiladu ein cais yn cael eu storio.
Yn syml, y ffolder cyrchfan a nodir yn y term gyda label 5 yw'r cyfeiriadur cyfredol (dyma'r cyfan, cofiwch, yn rhedeg y tu mewn i rywbeth hudolus o'r enw OpenShift, ac nid ar eich cyfrifiadur lleol).
Mae adran y strategaeth – llinell 6 – hefyd yn debyg i ffurfweddiad yr adeilad cyntaf. Dim ond y tro hwn rydyn ni'n mynd i ddefnyddio nginx-image-runtime, a welsom eisoes yn yr adran ImageStream.
Yn olaf, mae'r llinell sydd wedi'i labelu 7 yn adran o sbardunau a fydd yn actifadu'r adeiladwaith hwn bob tro y bydd y ddelwedd adweithydd-gwe-app-adeiladwr yn newid.
Fel arall, mae'r templed hwn yn cynnwys cyfluniad defnydd eithaf safonol, yn ogystal â phethau sy'n ymwneud â gwasanaethau a llwybrau, ond ni fyddwn yn mynd i mewn i ormod o fanylion. Sylwch mai'r ddelwedd a fydd yn cael ei defnyddio yw'r ddelwedd react-web-app-runtime.
Defnyddio Cais
Felly nawr ein bod ni wedi edrych ar y templed, gadewch i ni weld sut i'w ddefnyddio i ddefnyddio cais.
Gallwn ddefnyddio'r offeryn cleient OpenShift o'r enw oc i ddefnyddio ein templed:
$ 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
Mae'r gorchymyn cyntaf yn y sgrin uchod yn ffordd fwriadol beirianyddol i ddod o hyd i dempled./openshiftio/application.yaml.
Mae'r ail orchymyn yn syml yn creu cais newydd yn seiliedig ar y templed hwn.
Ar ôl i'r gorchmynion hyn weithio, byddwn yn gweld bod gennym ddau gynulliad:
Ac yn dychwelyd i'r sgrin Trosolwg, fe welwn y pod a lansiwyd:
Cliciwch ar y ddolen a byddwn yn mynd â ni i'n app, sef tudalen ddiofyn React App:
Atodiad 1
Ar gyfer cariadon Angular mae gennym ni hefyd .
Mae'r patrwm yma yr un peth, heblaw am y newidyn OUTPUT_DIR.
Atodiad 2
Yn yr erthygl hon fe wnaethom ddefnyddio NGINX fel gweinydd gwe, ond mae'n eithaf hawdd ei ddisodli ag Apache, dim ond newid y templed yn y ffeil ar .
Casgliad
Yn rhan gyntaf y gyfres hon, fe wnaethom ddangos sut i ddefnyddio cymwysiadau gwe modern yn gyflym ar blatfform OpenShift. Heddiw, fe wnaethom edrych ar yr hyn y mae delwedd Web App yn ei wneud a sut y gellir ei chyfuno â gweinydd gwe pur fel NGINX gan ddefnyddio adeiladau cadwyn i greu adeiladwaith cymhwysiad sy'n fwy parod i gynhyrchu. Yn yr erthygl nesaf a therfynol yn y gyfres hon, byddwn yn dangos sut i redeg gweinydd datblygu ar gyfer eich cais ar OpenShift a sicrhau cydamseru ffeiliau lleol ac anghysbell.
Cynnwys y gyfres hon o erthyglau
- Rhan 1: ;
- Rhan 2: Sut i ddefnyddio delwedd S2I newydd gyda delwedd gweinydd HTTP sy'n bodoli eisoes, fel NGINX, gan ddefnyddio gwasanaethau OpenShift cysylltiedig ar gyfer defnydd cynhyrchu;
- Rhan 3: sut i redeg gweinydd datblygu ar gyfer eich cais ar y llwyfan OpenShift a'i gydamseru â'r system ffeiliau leol.
Adnoddau Ychwanegol
- E-lyfr am ddim .
- Gwybodaeth am .
Ffynhonnell: hab.com