Nyob zoo sawv daws! Qhov no yog qhov thib ob tshaj tawm hauv peb cov series uas peb qhia yuav ua li cas xa cov ntawv thov web niaj hnub ntawm Red Hat OpenShift.
Hauv cov ntawv tshaj tawm dhau los, peb tau kov me ntsis ntawm lub peev xwm ntawm S2I tshiab (qhov chaw-rau-daim duab) tsim cov duab, uas yog tsim los tsim thiab siv lub vev xaib niaj hnub siv ntawm OpenShift platform. Tom qab ntawd peb tau xav txog lub ntsiab lus ntawm kev xa daim ntawv thov sai sai, thiab hnub no peb yuav saib yuav ua li cas siv cov duab S2I ua "dawb huv" cov duab tsim thiab muab sib xyaw nrog OpenShift cov rooj sib tham.
Cleaner duab
Raws li peb tau hais hauv Tshooj XNUMX, feem ntau cov ntawv thov web niaj hnub muaj qhov hu ua theem tsim, uas feem ntau ua haujlwm xws li kev hloov pauv code, ntau cov ntaub ntawv sib txuas, thiab minification. Cov ntaub ntawv tau txais los ntawm cov haujlwm no - thiab qhov no yog qhov zoo li HTML, JavaScript thiab CSS - khaws cia rau hauv cov ntawv tso tawm. Qhov chaw ntawm daim nplaub tshev no feem ntau yog nyob ntawm seb cov cuab yeej tsim tau siv li cas, thiab rau React qhov no yuav yog ./build folder (peb yuav rov qab los rau qhov kev nthuav dav ntxiv hauv qab no).
Source-to-Image (S2I)
Hauv tsab xov xwm no peb tsis txhob kov lub ntsiab lus "S2I yog dab tsi thiab yuav siv nws li cas" (koj tuaj yeem nyeem ntxiv txog qhov no ), tab sis nws yog ib qho tseem ceeb kom paub meej txog ob kauj ruam hauv cov txheej txheem no kom nkag siab tias Web App Builder duab ua li cas.
Kev sib dhos theem
Lub sijhawm sib dhos yog qhov zoo sib xws rau qhov tshwm sim thaum koj khiav docker tsim thiab xaus nrog Docker duab tshiab. Raws li, theem no tshwm sim thaum pib tsim ntawm OpenShift platform.
Nyob rau hauv rooj plaub ntawm Web App Builder duab, nws yog lub luag haujlwm rau kev txhim kho koj daim ntawv thov kev vam khom thiab khiav qhov tsim. . Los ntawm lub neej ntawd, cov duab tsim siv npm khiav tsim tsim, tab sis qhov no tuaj yeem hla dhau los ntawm NPM_BUILD ib puag ncig hloov pauv.
Raws li peb tau hais ua ntej, qhov chaw ntawm qhov ua tiav, twb tau tsim daim ntawv thov nyob ntawm seb koj siv cov cuab yeej twg. Piv txwv li, nyob rau hauv rooj plaub ntawm React qhov no yuav yog ./build folder, thiab rau Angular daim ntawv thov nws yuav yog qhov project_name/dist folder. Thiab, raws li twb tau qhia nyob rau hauv tsab xov xwm dhau los, qhov chaw ntawm cov ntaub ntawv tso tawm, uas tau teeb tsa los ntawm lub neej ntawd, tuaj yeem hla dhau los ntawm OUTPUT_DIR ib puag ncig hloov pauv. Zoo, txij li qhov chaw ntawm cov zis nplaub tshev txawv ntawm lub moj khaum mus rau lub moj khaum, koj tsuas yog luam tawm cov khoom tsim tawm mus rau tus qauv nplaub tshev hauv daim duab, uas yog /opt/apt-root/output. Qhov no yog qhov tseem ceeb rau kev nkag siab txog qhov seem ntawm tsab xov xwm no, tab sis tam sim no cia saib sai sai rau theem tom ntej - theem khiav.
khiav theem
Cov theem no tshwm sim thaum hu rau docker khiav yog ua rau ntawm cov duab tshiab tsim thaum lub sij hawm sib dhos. Tib yam tshwm sim thaum xa tawm ntawm OpenShift platform. Default siv los pab cov ntsiab lus zoo li qub nyob rau hauv cov txheej txheem tso zis saum toj no.
Txoj kev no yog qhov zoo rau kev siv cov ntawv thov sai sai, tab sis feem ntau nws tsis pom zoo los ua cov ntsiab lus zoo li no. Zoo, txij li qhov tseeb peb tsuas yog ua haujlwm zoo li qub, peb tsis xav tau Node.js ntsia hauv peb cov duab - lub vev xaib server yuav txaus.
Hauv lwm lo lus, thaum sib sau peb xav tau ib yam, thaum ua tiav peb xav tau lwm yam. Hauv qhov xwm txheej no, chained tsim los ua ke.
chained tsim
Nov yog qhov lawv sau txog hauv cov ntaub ntawv OpenShift:
"Ob lub rooj sib txoos tuaj yeem txuas ua ke, nrog rau ib qho tsim ib lub koom haum muab tso ua ke thiab lwm qhov hosting qhov chaw nyob rau hauv ib daim duab cais uas siv los khiav qhov chaw."
Hauv lwm lo lus, peb tuaj yeem siv Web App Builder duab los khiav peb cov tsim, thiab tom qab ntawd siv lub web server duab, tib NGINX, los pab peb cov ntsiab lus.
Yog li, peb tuaj yeem siv Web App Builder duab ua "ntshiab" tsim thiab tib lub sijhawm muaj cov duab me me.
Tam sim no cia saib qhov no nrog ib qho piv txwv tshwj xeeb.
Rau kev cob qhia peb yuav siv , tsim siv cov cuab yeej tsim-react-app hais kom ua kab.
Nws yuav pab peb muab txhua yam ua ke .
Cia peb saib cov ntaub ntawv no kom ntxaws ntxiv, thiab pib nrog cov ntu ntu.
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
Txhua yam ntawm no yog qhov tseeb zoo nkauj, tab sis nws tsim nyog them nqi rau OUTPUT_DIR parameter. Rau daim ntawv thov React hauv peb qhov piv txwv, tsis muaj dab tsi yuav txhawj txog, txij li React siv tus nqi qub raws li cov ntawv tso tawm, tab sis nyob rau hauv rooj plaub ntawm Angular lossis lwm yam, qhov ntsuas no yuav tsum tau hloov pauv raws li qhov tsim nyog.
Tam sim no cia peb saib ntawm ntu 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'
Ua tib zoo saib cov duab peb thiab plaub. Lawv ob leeg txhais tau tias yog Docker cov duab, thiab koj tuaj yeem pom meej tias lawv tuaj qhov twg.
Daim duab thib peb yog web-app-builder thiab nws los ntawm nodeshift/ubi8-s2i-web-app tagged 10.x ntawm .
Qhov thib plaub yog NGINX duab (version 1.12) nrog rau qhov tseeb tag rau .
Tam sim no cia saib thawj ob daim duab. Lawv yog ob qho tib si khoob thaum pib thiab tsuas yog tsim thaum lub sijhawm tsim. Thawj daim duab, react-web-app-builder, yuav yog qhov tshwm sim ntawm cov kauj ruam sib dhos uas yuav muab cov duab web-app-builder-runtime thiab peb qhov chaws. Yog vim li cas peb ntxiv "-builder" rau lub npe ntawm daim duab no.
Daim duab thib ob - react-web-app-runtime - yuav yog qhov tshwm sim ntawm kev sib txuas nginx-image-runtime thiab qee cov ntaub ntawv los ntawm cov duab react-web-app-builder. Cov duab no tseem yuav raug siv thaum lub sijhawm xa mus thiab tsuas yog muaj lub vev xaib server thiab zoo li HTML, JavaScript, CSS ntawm peb daim ntawv thov.
Tsis meej pem? Tam sim no cia peb saib cov kev tsim kho thiab nws yuav dhau los ua kom pom me ntsis.
Peb cov template muaj ob lub configurations. Nov yog thawj tus, thiab nws yog tus qauv zoo nkauj:
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
Raws li koj tuaj yeem pom, kab nrog daim ntawv lo 1 hais tias qhov tshwm sim ntawm qhov kev tsim no yuav muab tso rau hauv tib lub ntsej muag-web-app-builder duab uas peb pom me ntsis ua ntej hauv ntu ImageStreams.
Kab ntawv 2 qhia koj tias yuav tau tus lej ntawm qhov twg. Hauv peb cov ntaub ntawv, qhov no yog git repository, thiab qhov chaw, ref thiab cov ntsiab lus nplaub tshev raug txiav txim siab los ntawm cov kev txwv peb twb pom saum toj no.
Cov kab sau npe 3 yog qhov peb twb pom hauv ntu ntu. Nws ntxiv OUTPUT_DIR ib puag ncig hloov pauv, uas hauv peb qhov piv txwv yog tsim.
Cov kab ntawv sau npe 4 hais tias siv lub vev xaib-app-builder-runtime duab, uas peb twb pom hauv ntu ImageStream.
Kab sau npe 5 hais tias peb xav siv qhov kev tsim kho ntxiv yog tias daim duab S2I txhawb nqa nws, thiab Web App Builder duab ua. Thaum thawj zaug tso tawm, tom qab lub rooj sib txoos ua tiav, cov duab yuav khaws cov node_modules nplaub tshev rau hauv cov ntaub ntawv archive. Tom qab ntawd, ntawm kev khiav tom ntej, cov duab yuav yooj yim unzip daim nplaub tshev no kom txo tau lub sijhawm tsim.
Thiab thaum kawg, kab ntawv sau npe 6 tsuas yog ob peb yam ua rau kev tsim ua haujlwm tau txais, tsis muaj kev cuam tshuam los ntawm phau ntawv, thaum qee yam hloov pauv.
Zuag qhia tag nrho qhov no yog ib tug zoo nkauj qauv tsim configuration.
Tam sim no cia peb saib ntawm qhov thib ob tsim configuration. Nws zoo ib yam li thawj tus, tab sis muaj ib qho tseem ceeb sib txawv.
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
Yog li qhov thib ob tsim configuration yog react-web-app-runtime, thiab nws pib tawm tus qauv zoo nkauj.
Cov kab ntawv sau npe 1 tsis muaj dab tsi tshiab - nws tsuas yog hais tias cov txiaj ntsig tsim tau muab tso rau hauv cov duab react-web-app-runtime.
Cov kab ntawv sau npe 2, raws li nyob rau hauv kev teeb tsa yav dhau los, qhia qhov twg kom tau txais qhov chaws los ntawm. Tab sis nco ntsoov tias ntawm no peb tab tom hais tias nws yog coj los ntawm daim duab. Ntxiv mus, los ntawm cov duab uas peb nyuam qhuav tsim - los ntawm react-web-app-builder (qhia hauv kab sau npe 3). Cov ntaub ntawv peb xav siv yog nyob rau hauv daim duab thiab lawv qhov chaw nyob rau hauv kab ntawv sau npe 4, nyob rau hauv peb cov ntaub ntawv nws yog /opt/app-root/output/. Yog tias koj nco qab, qhov no yog qhov uas cov ntaub ntawv tsim tawm raws li cov txiaj ntsig ntawm kev tsim peb daim ntawv thov raug khaws cia.
Cov ntaub ntawv lo lus uas tau teev tseg hauv lo lus nrog daim ntawv lo 5 tsuas yog daim ntawv teev npe tam sim no (qhov no yog tag nrho, nco ntsoov, khiav hauv qee yam khoom siv yees siv hu ua OpenShift, thiab tsis nyob hauv koj lub computer hauv zos).
Tshooj tswv yim - kab sau npe 6 - kuj zoo ib yam li thawj qhov kev teeb tsa. Tsuas yog lub sijhawm no peb yuav siv nginx-image-runtime, uas peb twb pom hauv ntu ImageStream.
Thaum kawg, kab ntawv sau npe 7 yog ib feem ntawm qhov tshwm sim uas yuav qhib qhov tsim no txhua zaus cov duab react-web-app-builder hloov pauv.
Txwv tsis pub, cov qauv no muaj cov qauv kev xa tawm zoo nkauj, nrog rau cov khoom uas cuam tshuam rau cov kev pabcuam thiab cov kev, tab sis peb yuav tsis mus rau qhov nthuav dav heev. Thov nco ntsoov tias daim duab uas yuav raug xa tawm yog cov duab react-web-app-runtime.
Daim ntawv thov Deployment
Yog li tam sim no uas peb tau saib ntawm tus qauv, cia peb pom yuav ua li cas siv nws los xa daim ntawv thov.
Peb tuaj yeem siv OpenShift tus neeg siv khoom hu ua oc los xa peb cov qauv:
$ 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
Thawj qhov hais kom ua hauv lub screenshot saum toj no yog txhob txwm tshaj tawm txoj hauv kev los nrhiav tus qauv./openshiftio/application.yaml.
Cov lus txib thib ob tsuas yog tsim ib daim ntawv thov tshiab raws li tus qauv no.
Tom qab cov lus txib no ua haujlwm, peb yuav pom tias peb muaj ob lub rooj sib txoos:
Thiab rov qab mus rau Cov Txheej Txheem Txheej Txheem, peb yuav pom cov pod launched:
Nyem qhov txuas thiab peb yuav raug coj mus rau peb lub app, uas yog lub neej ntawd React App nplooj ntawv:
Ntxiv 1
Rau Angular lovers peb kuj muaj .
Cov qauv ntawm no yog tib yam, tshwj tsis yog rau qhov sib txawv ntawm OUTPUT_DIR.
Ntxiv 2
Hauv tsab xov xwm no peb siv NGINX ua lub vev xaib server, tab sis nws yooj yim heev los hloov nws nrog Apache, tsuas yog hloov cov qauv hauv cov ntaub ntawv. rau .
xaus
Hauv thawj ntu ntawm cov koob no, peb tau qhia yuav ua li cas sai sai xa cov ntawv thov web niaj hnub ntawm OpenShift platform. Niaj hnub no peb saib qhov Web App duab ua li cas thiab yuav ua li cas nws tuaj yeem ua ke nrog lub vev xaib dawb huv zoo li NGINX siv cov chained tsim los tsim ntau cov ntawv thov tsim. Nyob rau hauv tsab xov xwm tom ntej thiab zaum kawg hauv cov koob no, peb yuav qhia yuav ua li cas khiav lub server txhim kho rau koj daim ntawv thov ntawm OpenShift thiab xyuas kom muaj kev sib koom ua ke ntawm cov ntaub ntawv hauv zos thiab cov chaw taws teeb.
Cov ntsiab lus ntawm cov kab lus no
- Ntu 1: ;
- Ntu 2: Yuav ua li cas siv cov duab S2I tshiab nrog cov duab HTTP neeg rau zaub mov uas twb muaj lawm, xws li NGINX, siv OpenShift sib koom ua ke rau kev xa tawm ntau lawm;
- Ntu 3: yuav ua li cas khiav ib qho kev loj hlob server rau koj daim ntawv thov ntawm OpenShift platform thiab synchronize nws nrog cov ntaub ntawv hauv zos.
Cov peev txheej ntxiv
- Dawb e-phau ntawv .
- Cov ntaub ntawv ntawm .
Tau qhov twg los: www.hab.com