Kumusta tanan! Kini ang ikaduha nga post sa among serye diin gipakita namon kung giunsa ang pag-deploy sa mga modernong aplikasyon sa web sa Red Hat OpenShift.
Sa miaging post, medyo natandog namo ang mga kapabilidad sa bag-ong S2I (source-to-image) builder image, nga gidisenyo alang sa pagtukod ug pag-deploy sa modernong mga web application sa OpenShift platform. Unya interesado kami sa hilisgutan sa dali nga pag-deploy sa usa ka aplikasyon, ug karon atong tan-awon kung giunsa ang paggamit sa usa ka imahe sa S2I ingon usa ka "putli" nga imahe sa tigtukod ug gihiusa kini sa mga may kalabutan nga mga asembliya sa OpenShift.
Limpyo nga magtutukod nga imahe
Sama sa among gihisgutan sa Bahin XNUMX, kadaghanan sa modernong mga aplikasyon sa web adunay gitawag nga yugto sa pagtukod, nga kasagarang nagpahigayon sa mga operasyon sama sa transpilation sa code, multiple file concatenation, ug minification. Ang mga file nga nakuha isip resulta niini nga mga operasyon - ug kini mao ang static nga HTML, JavaScript ug CSS - gitipigan sa output folder. Ang lokasyon sa kini nga folder kasagaran nagdepende sa kung unsang mga gamit sa pagtukod ang gigamit, ug alang sa React kini ang ./build folder (balikon namon kini sa dugang nga detalye sa ubos).
Tinubdan-sa-Hulagway (S2I)
Sa kini nga post wala kami magtandog sa hilisgutan nga "unsa ang S2I ug kung giunsa kini gamiton" (mahimo nimong mabasa ang dugang bahin niini ), apan importante nga klarohon ang bahin sa duha ka mga lakang niini nga proseso aron masabtan kung unsa ang gibuhat sa imahe sa Web App Builder.
Yugto sa asembliya
Ang yugto sa asembliya parehas kaayo sa kinaiyahan sa kung unsa ang mahitabo kung imong gipadagan ang pagtukod sa docker ug matapos ang usa ka bag-ong imahe sa Docker. Tungod niini, kini nga yugto mahitabo sa pagsugod sa usa ka pagtukod sa OpenShift nga plataporma.
Sa kaso sa usa ka Web App Builder nga imahe, kini ang responsable sa pag-install sa mga dependency sa imong aplikasyon ug pagpadagan sa pagtukod. . Sa kasagaran, ang tigtukod nga imahe naggamit sa npm run build construct, apan kini mahimong ma-override pinaagi sa NPM_BUILD environment variable.
Sama sa giingon namon kaniadto, ang lokasyon sa nahuman, natukod na nga aplikasyon nagdepende kung unsang mga himan ang imong gigamit. Pananglitan, sa kaso sa React kini ang ./build folder, ug alang sa Angular nga aplikasyon kini ang project_name/dist folder. Ug, sama sa gipakita na sa miaging post, ang lokasyon sa direktoryo sa output, nga gitakda nga tukuron pinaagi sa default, mahimong ma-override pinaagi sa OUTPUT_DIR environment variable. Aw, tungod kay ang lokasyon sa output folder lahi gikan sa framework ngadto sa framework, imong kopyahon lang ang namugna nga output ngadto sa standard folder sa hulagway, nga mao ang /opt/apt-root/output. Importante kini aron masabtan ang nahabilin niining artikuloha, apan sa pagkakaron atong tan-awon dayon ang sunod nga yugto - ang run phase.
run phase
Kini nga yugto mahitabo kung ang usa ka tawag sa docker run gihimo sa bag-ong imahe nga gihimo sa yugto sa asembliya. Ang parehas nga mahitabo kung mag-deploy sa OpenShift platform. Default naggamit sa pag-alagad sa static nga sulod nga nahimutang sa ibabaw sa standard output directory.
Kini nga pamaagi maayo alang sa dali nga pag-deploy sa mga aplikasyon, apan sa kasagaran dili girekomenda nga mag-alagad sa static nga sulud niini nga paagi. Aw, tungod kay sa tinuod nag-alagad lamang kami sa static nga sulod, dili na namo kinahanglan nga i-install ang Node.js sulod sa among imahe - igo na ang web server.
Sa laing pagkasulti, sa dihang mag-assemble kita nagkinahanglan og usa ka butang, sa dihang mag-execute nagkinahanglan kita og lain. Niini nga sitwasyon, ang mga kadena nga pagtukod magamit.
Kinadena nga mga pagtukod
Mao kini ang ilang gisulat sa dokumentasyon sa OpenShift:
"Duha ka mga asembliya mahimong masumpay, nga ang usa nagmugna og usa ka hiniusa nga entidad ug ang lain nga nag-host sa maong entidad sa usa ka lahi nga hulagway nga gigamit sa pagpadagan sa maong entidad."
Sa laing pagkasulti, mahimo natong gamiton ang imahe sa Web App Builder sa pagpadagan sa atong pagtukod, ug dayon gamiton ang imahe sa web server, ang samang NGINX, aron sa pag-alagad sa atong sulod.
Sa ingon, mahimo natong gamiton ang imahe sa Web App Builder isip usa ka "pure" nga magtutukod ug sa samang higayon adunay gamay nga runtime nga imahe.
Karon atong tan-awon kini uban sa usa ka piho nga pananglitan.
Para sa training among gamiton , gihimo gamit ang create-react-app command line tool.
Makatabang kini kanato sa paghiusa sa tanan .
Atong tan-awon ang kini nga file sa mas detalyado, ug magsugod sa seksyon sa mga parameter.
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
Ang tanan dinhi klaro kaayo, apan angay nga hatagan pagtagad ang parameter nga OUTPUT_DIR. Alang sa aplikasyon sa React sa among panig-ingnan, walaβy angay kabalak-an, tungod kay ang React naggamit sa default nga kantidad ingon ang output folder, apan sa kaso sa Angular o uban pa, kini nga parameter kinahanglan usbon kung gikinahanglan.
Karon atong tan-awon ang seksyon sa 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'
Tan-awa ang ikatulo ug ikaupat nga mga hulagway. Pareho silang gihubit nga mga imahe sa Docker, ug klaro nimo nga makita kung diin sila gikan.
Ang ikatulo nga imahe mao ang web-app-builder ug kini gikan sa nodeshift/ubi8-s2i-web-app nga adunay tag 10.x sa .
Ang ikaupat usa ka NGINX nga imahe (bersyon 1.12) nga adunay pinakabag-o nga tag sa .
Karon atong tan-awon ang unang duha ka mga hulagway. Pareho silang walay sulod sa pagsugod ug gimugna lamang sa panahon sa pagtukod. Ang unang hulagway, react-web-app-builder, maoy resulta sa usa ka assembly nga lakang nga maghiusa sa web-app-builder-runtime image ug sa atong source code. Mao nga gidugang namon ang "-builder" sa ngalan niini nga imahe.
Ang ikaduha nga imahe - react-web-app-runtime - mao ang resulta sa paghiusa sa nginx-image-runtime ug pipila ka mga file gikan sa react-web-app-builder nga imahe. Ang kini nga imahe magamit usab sa panahon sa pag-deploy ug maglangkob lamang sa web server ug static nga HTML, JavaScript, CSS sa among aplikasyon.
Naglibog? Karon atong tan-awon ang mga configuration sa pagtukod ug kini mahimong mas klaro.
Ang among template adunay duha ka mga configuration sa pagtukod. Ania ang una, ug kini medyo sukaranan:
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
Sama sa imong nakita, ang linya nga adunay label nga 1 nag-ingon nga ang resulta sa kini nga pagtukod ibutang sa parehas nga react-web-app-builder nga imahe nga among nakita sa sayo pa sa seksyon sa Mga ImageStreams.
Ang linya nga gimarkahan og 2 nagsulti kanimo kung asa makuha ang code. Sa among kaso, kini usa ka git repository, ug ang lokasyon, ref ug folder sa konteksto gitino sa mga parameter nga nakita na namon sa ibabaw.
Ang linya nga gimarkahan nga 3 mao ang nakita na namon sa seksyon sa mga parameter. Gidugang niini ang OUTPUT_DIR environment variable, nga sa among panig-ingnan mao ang pagtukod.
Ang linya nga gimarkahan nga 4 nag-ingon nga gamiton ang imahe sa web-app-builder-runtime, nga nakita na namon sa seksyon sa ImageStream.
Ang linya nga gimarkahan nga 5 nag-ingon nga gusto namon nga mogamit usa ka incremental nga pagtukod kung ang imahe sa S2I nagsuporta niini, ug ang imahe sa Web App Builder. Sa una nga paglansad, pagkahuman makompleto ang yugto sa asembliya, i-save sa imahe ang folder nga node_modules sa usa ka file sa archive. Unya, sa sunod nga mga pagdagan, ang imahe yano nga mag-unzip niini nga folder aron makunhuran ang oras sa pagtukod.
Ug sa katapusan, ang linya nga gimarkahan nga 6 usa ra ka pipila nga nag-aghat aron awtomatiko nga himuon ang pagtukod, nga walaβy manual nga interbensyon, kung adunay pagbag-o.
Sa kinatibuk-an kini usa ka medyo standard nga pag-configure sa pagtukod.
Karon atong tan-awon ang ikaduha nga configuration sa pagtukod. Kini susama kaayo sa una, apan adunay usa ka importante nga kalainan.
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
Mao nga ang ikaduha nga pag-configure sa pagtukod mao ang react-web-app-runtime, ug nagsugod kini nga medyo sukaranan.
Ang linya nga gimarkahan og 1 dili bag-o - kini nag-ingon lamang nga ang resulta sa pagtukod gibutang sa react-web-app-runtime nga imahe.
Ang linya nga gimarkahan og 2, sama sa miaging configuration, nagpaila kung asa makuha ang source code. Apan matikdi nga dinhi kita nag-ingon nga kini gikuha gikan sa larawan. Dugang pa, gikan sa imahe nga bag-o lang namon gibuhat - gikan sa react-web-app-builder (gipakita sa linya nga gimarkahan 3). Ang mga file nga gusto namon gamiton naa sa sulod sa imahe ug ang ilang lokasyon didto gibutang sa linya nga gimarkahan nga 4, sa among kaso kini /opt/app-root/output/. Kung nahinumduman nimo, dinhi gitipigan ang mga file nga namugna base sa mga resulta sa pagtukod sa among aplikasyon.
Ang destinasyon nga folder nga gipiho sa termino nga adunay label nga 5 mao lamang ang kasamtangan nga direktoryo (kini ang tanan, hinumdumi, nga nagdagan sulod sa usa ka mahika nga butang nga gitawag og OpenShift, ug dili sa imong lokal nga kompyuter).
Ang seksyon sa estratehiya - linya nga gimarkahan nga 6 - parehas usab sa una nga pag-configure sa pagtukod. Niining higayona lang magamit namon ang nginx-image-runtime, nga nakita na namon sa seksyon sa ImageStream.
Sa katapusan, ang linya nga gimarkahan nga 7 usa ka seksyon sa mga nag-trigger nga mag-aktibo niini nga pagtukod sa matag higayon nga mabag-o ang imahe sa react-web-app-builder.
Kung dili, kini nga template adunay igo nga sukaranan nga pag-configure sa pag-deploy, ingon man ang mga butang nga adunay kalabotan sa mga serbisyo ug ruta, apan dili kami maghisgot sa labi ka daghang detalye. Palihug timan-i nga ang imahe nga i-deploy mao ang react-web-app-runtime nga imahe.
Pag-deploy sa Aplikasyon
Busa karon nga atong gitan-aw ang template, atong tan-awon kon unsaon kini paggamit sa pag-deploy og aplikasyon.
Magamit namo ang OpenShift client tool nga gitawag og oc para i-deploy ang among template:
$ 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
Ang unang sugo sa screenshot sa ibabaw kay usa ka tinuyo nga paagi sa pag-engineer sa pagpangita ug template./openshiftio/application.yaml.
Ang ikaduha nga sugo nagmugna lang og bag-ong aplikasyon base niini nga template.
Human kini nga mga sugo molihok, atong makita nga kita adunay duha ka mga asembliya:
Ug pagbalik sa screen sa Overview, atong makita ang gilusad pod:
I-klik ang link ug kami dad-on sa among app, nga mao ang default nga React App page:
Dugang 1
Para sa mga Angular lovers naa pud mi .
Ang sumbanan dinhi parehas, gawas sa OUTPUT_DIR variable.
Dugang 2
Niini nga artikulo gigamit namon ang NGINX ingon usa ka web server, apan dali ra kini ilisan sa Apache, usba lang ang template sa file. sa .
konklusyon
Sa una nga bahin sa kini nga serye, gipakita namon kung giunsa ang dali nga pag-deploy sa mga modernong aplikasyon sa web sa platform sa OpenShift. Karon among gitan-aw kung unsa ang gibuhat sa usa ka imahe sa Web App ug kung giunsa kini makombinar sa usa ka putli nga web server sama sa NGINX gamit ang mga kadena nga pagtukod aron makahimo usa ka labi ka andam nga paghimo sa aplikasyon. Sa sunod ug kataposang artikulo niini nga serye, among ipakita kon unsaon pagpadagan ang development server para sa imong aplikasyon sa OpenShift ug pagseguro sa pag-synchronize sa lokal ug hilit nga mga file.
Ang sulod niini nga serye sa mga artikulo
- Bahin 1: ;
- Bahin 2: Giunsa paggamit ang usa ka bag-ong imahe sa S2I nga adunay naglungtad nga imahe sa HTTP server, sama sa NGINX, gamit ang kauban nga mga asembliya sa OpenShift alang sa pag-deploy sa produksiyon;
- Bahin 3: unsaon pagpadagan ang development server para sa imong aplikasyon sa OpenShift platform ug i-synchronize kini sa local file system.
Dugang nga mga Kapanguhaan
- Libre nga e-libro .
- Impormasyon sa .
Source: www.habr.com