Sannu duka! Wannan shine matsayi na biyu a cikin jerin mu wanda a cikinsa muke nuna yadda ake tura aikace-aikacen yanar gizo na zamani akan Red Hat OpenShift.
A cikin sakon da ya gabata, mun dan tabo iyawar sabon hoton maginin S2I (tushen-zuwa hoto), wanda aka tsara don ginawa da tura aikace-aikacen gidan yanar gizo na zamani akan dandalin OpenShift. Sa'an nan kuma mun kasance da sha'awar batun ƙaddamar da aikace-aikacen da sauri, kuma a yau za mu dubi yadda ake amfani da hoton S2I a matsayin hoton maginin "tsarki" da kuma haɗa shi da taron OpenShift masu dangantaka.
Tsaftace hoton magini
Kamar yadda muka ambata a cikin Sashe na XNUMX, yawancin aikace-aikacen gidan yanar gizo na zamani suna da abin da ake kira matakin ginawa, wanda yawanci yana aiwatar da ayyuka kamar fassarar lambobi, haɗa fayiloli da yawa, da ragewa. Fayilolin da aka samu a sakamakon waɗannan ayyuka - kuma wannan a tsaye HTML, JavaScript da CSS - ana adana su a cikin babban fayil ɗin fitarwa. Wurin da wannan babban fayil ɗin yake yawanci ya dogara da kayan aikin gini da ake amfani da su, kuma don React wannan shine babban fayil ɗin ./build (zamu dawo kan wannan dalla-dalla a ƙasa).
Tushen-zuwa Hoto (S2I)
A cikin wannan sakon ba mu taɓa batun "menene S2I da yadda ake amfani da shi ba" (zaku iya karanta ƙarin game da wannan). ), amma yana da mahimmanci a fayyace matakai biyu na wannan tsari don fahimtar abin da hoton Gidan Yanar Gizo ke yi.
Zaman taro
Tsarin taro yayi kama da abin da ke faruwa lokacin da kuke gudanar da ginin docker kuma ku ƙare da sabon hoton Docker. Saboda haka, wannan matakin yana faruwa lokacin da aka fara gini akan dandalin OpenShift.
Game da hoton Maginin Gidan Yanar Gizo, yana da alhakin shigar da abubuwan dogaro da aikace-aikacen ku da gudanar da ginin. . Ta hanyar tsoho, hoton maginin yana amfani da ginin npm run gini, amma ana iya soke wannan ta hanyar canjin yanayi na NPM_BUILD.
Kamar yadda muka fada a baya, wurin da aka gama, aikace-aikacen da aka riga aka gina ya dogara da kayan aikin da kuke amfani da su. Misali, a yanayin React wannan zai zama babban fayil ɗin ./build, kuma don aikace-aikacen Angular zai zama babban fayil ɗin project_name/dist. Kuma, kamar yadda aka riga aka nuna a cikin post ɗin da ya gabata, wurin da wurin da ake fitarwa, wanda aka saita don ginawa ta tsohuwa, ana iya soke shi ta hanyar canjin yanayi na OUTPUT_DIR. To, tunda wurin babban fayil ɗin fitarwa ya bambanta daga tsarin zuwa tsarin, kawai kuna kwafin abin da aka samar zuwa daidaitaccen babban fayil ɗin da ke cikin hoton, wato /opt/apt-root/output. Wannan yana da mahimmanci don fahimtar sauran wannan labarin, amma a yanzu bari mu dubi mataki na gaba da sauri - lokacin gudu.
tafiyar lokaci
Wannan matakin yana faruwa ne lokacin da aka yi kira zuwa gudu na docker akan sabon hoton da aka ƙirƙira yayin matakin taro. Hakanan yana faruwa lokacin turawa akan dandalin OpenShift. Tsohuwar amfani don ba da abun ciki a tsaye wanda yake a cikin daidaitaccen jagorar fitarwa na sama.
Wannan hanyar tana da kyau don tura aikace-aikace cikin sauri, amma gabaɗaya ba a ba da shawarar yin amfani da abun ciki na tsaye ta wannan hanyar ba. Da kyau, tun da a zahiri muna ba da abun ciki ne kawai, ba ma buƙatar shigar da Node.js a cikin hotonmu - sabar gidan yanar gizo zai wadatar.
Ma'ana, lokacin da ake taruwa muna buƙatar abu ɗaya, lokacin aiwatarwa muna buƙatar wani. A wannan yanayin, ginin da aka ɗaure ya zo da amfani.
Sarkar gini
Wannan shi ne abin da suke rubutawa a cikin takardun OpenShift:
"Za a iya haɗa taruka biyu tare, tare da ɗaya yana samar da ƙungiyar da aka haɗa, ɗayan kuma yana ɗaukar nauyin wannan mahallin a cikin wani hoto daban wanda ake amfani da shi don gudanar da wannan mahallin."
A wasu kalmomi, za mu iya amfani da Hoton Mai Gina Gidan Yanar Gizo don gudanar da ginin mu, sannan mu yi amfani da hoton sabar gidan yanar gizo, NGINX iri ɗaya, don ba da abubuwan da muke ciki.
Don haka, za mu iya amfani da Hoton Maginin Gidan Gidan Yanar Gizo a matsayin maginin “tsabta” kuma a lokaci guda muna da ƙaramin hoton lokacin aiki.
Yanzu bari mu kalli wannan da takamaiman misali.
Don horarwa za mu yi amfani da su , ƙirƙira ta amfani da kayan aikin layin umarni na ƙirƙira-react-app.
Zai taimake mu hada komai tare .
Bari mu kalli wannan fayil daki-daki, kuma mu fara da sashin sigogi.
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
Komai anan a bayyane yake, amma yana da kyau a kula da sigar OUTPUT_DIR. Don aikace-aikacen React a cikin misalinmu, babu wani abin damuwa, tunda React yana amfani da ƙimar tsoho a matsayin babban fayil ɗin fitarwa, amma a cikin yanayin Angular ko wani abu dabam, wannan sigar za ta buƙaci canzawa idan ya cancanta.
Yanzu bari mu kalli sashin 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'
Dubi hotuna na uku da na huɗu. Dukansu an bayyana su azaman hotunan Docker, kuma kuna iya ganin inda suka fito.
Hoto na uku shine maginin yanar gizo-app kuma ya fito daga nodeshift/ubi8-s2i-web-app mai alamar 10.x akan .
Na huɗu shine hoton NGINX (Sigar 1.12) tare da sabuwar alamar a kunne .
Yanzu bari mu kalli hotuna biyu na farko. Dukansu fanko ne a farkon kuma an halicce su ne kawai a lokacin ginin. Hoton farko, react-web-app-builder, zai kasance sakamakon matakin taro wanda zai haɗa hoton yanar gizo-app-builder-runtime image da lambar tushen mu. Shi ya sa muka ƙara “-builder” zuwa sunan wannan hoton.
Hoto na biyu - react-web-app-runtime - zai kasance sakamakon hada nginx-image-runtime da wasu fayiloli daga hoton react-web-app-builder. Hakanan za'a yi amfani da wannan hoton yayin turawa kuma zai ƙunshi sabar yanar gizo kawai da tsayayyen HTML, JavaScript, CSS na aikace-aikacen mu.
A rude? Yanzu bari mu dubi tsarin gine-gine kuma zai zama dan kadan.
Samfurin mu yana da saitunan ginawa guda biyu. Ga na farko, kuma yana da kyakkyawan ma'auni:
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
Kamar yadda kake gani, layin da ke da lakabin 1 ya ce sakamakon wannan ginin za a sanya shi a cikin hoto guda ɗaya na amsa-web-app-builder wanda muka gani a baya a cikin sashin ImageStreams.
Layin da aka yiwa lakabin 2 yana gaya muku inda zaku sami lambar. A cikin yanayinmu, wannan ma'ajiyar git ce, kuma wurin, ref da babban fayil ɗin mahallin an ƙayyade su ta sigogin da muka riga muka gani a sama.
Layin da aka yiwa lakabi da 3 shine abin da muka riga muka gani a cikin sassan sigogi. Yana ƙara canjin yanayi OUTPUT_DIR, wanda a cikin misalinmu shine ginawa.
Layin da aka yi wa lakabi da 4 ya ce a yi amfani da hoton gidan yanar gizo-app-builder-runtime, wanda muka riga muka gani a sashin ImageStream.
Layin da aka yi wa lakabi da 5 yana cewa muna son yin amfani da haɓaka haɓakawa idan hoton S2I ya goyi bayansa, kuma hoton Gidan Yanar Gizon yana aikatawa. A farkon ƙaddamarwa, bayan an gama matakin taro, hoton zai adana babban fayil ɗin node_modules a cikin fayil ɗin ajiya. Bayan haka, a kan gudu masu zuwa, hoton zai buɗe wannan babban fayil ɗin kawai don rage lokacin ginawa.
Kuma a ƙarshe, layin da aka lakafta 6 shine ƴan abubuwan da ke haifar da ginawa ta atomatik, ba tare da sa hannun hannu ba, lokacin da wani abu ya canza.
Gabaɗaya wannan kyakkyawan daidaitaccen tsarin ginin gini ne.
Yanzu bari mu kalli tsarin gini na biyu. Yana kama da na farko, amma akwai bambanci mai mahimmanci guda ɗaya.
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
Don haka saitin ginin na biyu shine react-web-app-runtime, kuma yana farawa da kyakkyawan misali.
Layin da aka yiwa lakabin 1 ba sabon abu ba ne - kawai yana cewa an saka sakamakon ginawa a cikin hoton lokaci-lokaci-in-app-react.
Layin da aka yiwa lakabi da 2, kamar yadda yake a cikin tsarin da ya gabata, yana nuna inda ake samun lambar tushe daga. Amma ku lura a nan muna cewa an ɗauke shi daga hoton. Bugu da ƙari, daga hoton da muka ƙirƙira - daga mai ginawa-web-app-mai ginawa (an nuna a layi mai lamba 3). Fayilolin da muke son amfani da su suna cikin hoton kuma an saita wurinsu a layi mai lamba 4, a cikin yanayin mu shine /opt/app-root/output/. Idan kun tuna, a nan ne ake adana fayilolin da aka samar dangane da sakamakon gina aikace-aikacen mu.
Babban fayil ɗin da aka ƙayyade a cikin kalmar tare da lakabin 5 shine kawai kundin adireshi na yanzu (wannan shine duka, ku tuna, yana gudana cikin wani abu na sihiri da ake kira OpenShift, kuma ba akan kwamfutar ku ba).
Sashin dabarun - layin da aka yiwa lakabi da 6 - shima yayi kama da tsarin ginin farko. A wannan lokacin ne kawai za mu yi amfani da nginx-image-runtime, wanda muka riga muka gani a cikin sashin ImageStream.
A ƙarshe, layin da aka yiwa lakabin 7 wani yanki ne na abubuwan da za su kunna wannan ginin a duk lokacin da hoton magini-web-app ya canza.
In ba haka ba, wannan samfuri ya ƙunshi kyawawan ƙayyadaddun tsarin tura aiki, da abubuwan da suka shafi ayyuka da hanyoyi, amma ba za mu shiga cikin wannan daki-daki ba. Da fatan za a lura cewa hoton da za a tura shine hoton react-web-app-runtime.
Aiwatar da Aikace-aikacen
Don haka yanzu da muka kalli samfurin, bari mu ga yadda ake amfani da shi wajen tura aikace-aikacen.
Za mu iya amfani da kayan aikin abokin ciniki na OpenShift da ake kira oc don tura samfurin mu:
$ 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
Umarni na farko a cikin hoton da ke sama hanya ce ta injiniya da gangan don nemo samfuri./openshiftio/application.yaml.
Umurni na biyu kawai yana ƙirƙirar sabon aikace-aikacen bisa wannan samfuri.
Bayan waɗannan umarni sun yi aiki, za mu ga cewa muna da majalisai guda biyu:
Kuma komawa zuwa allon dubawa, za mu ga kwas ɗin da aka ƙaddamar:
Danna hanyar haɗin yanar gizon kuma za a kai mu zuwa app ɗin mu, wanda shine tsohon shafin React App:
Ƙarin 1
Ga masu son Angular kuma muna da .
Tsarin a nan iri ɗaya ne, ban da madaidaicin OUTPUT_DIR.
Ƙarin 2
A cikin wannan labarin mun yi amfani da NGINX azaman sabar gidan yanar gizo, amma yana da sauƙin maye gurbin shi da Apache, kawai canza samfuri a cikin fayil ɗin. a kan .
ƙarshe
A kashi na farko na wannan silsilar, mun nuna yadda ake saurin tura aikace-aikacen gidan yanar gizo na zamani akan dandalin OpenShift. A yau mun kalli abin da hoton Gidan Yanar Gizo ke yi da kuma yadda za a iya haɗa shi tare da sabar gidan yanar gizo mai tsabta kamar NGINX ta yin amfani da ginin da aka ɗaure don ƙirƙirar ƙirar aikace-aikacen da aka shirya. A cikin labari na gaba kuma na ƙarshe a cikin wannan jerin, za mu nuna yadda ake gudanar da sabar ci gaba don aikace-aikacenku akan OpenShift da tabbatar da aiki tare na fayiloli na gida da na nesa.
Abubuwan da ke cikin wannan jerin labaran
- Kashi na 1: ;
- Sashe na 2: Yadda ake amfani da sabon hoton S2I tare da hoton uwar garken HTTP data kasance, kamar NGINX, ta amfani da majalissar OpenShift masu alaƙa don ƙaddamar da samarwa;
- Sashe na 3: yadda ake gudanar da sabar ci gaba don aikace-aikacenku akan dandalin OpenShift kuma kuyi aiki tare da tsarin fayil na gida.
Ƙarin Albarkatu
- E-littafi na kyauta .
- Bayani akan .
source: www.habr.com