Aloha kākou! ʻO kēia ka lua o ka pou i kā mākou pūʻulu kahi e hōʻike ai mākou i ka hoʻonohonoho ʻana i nā noi pūnaewele hou ma Red Hat OpenShift.
Ma ka pou mua, ua hoʻopā iki mākou i nā hiki o ke kiʻi kūkulu hale S2I (kumu-i-kiʻi) hou, i hoʻolālā ʻia no ke kūkulu ʻana a me ka lawe ʻana i nā noi pūnaewele hou ma ka OpenShift platform. A laila ua hoihoi mākou i ke kumuhana o ka hoʻopuka wikiwiki ʻana i kahi noi, a i kēia lā e nānā mākou pehea e hoʻohana ai i kahi kiʻi S2I ma ke ʻano he kiʻi kūkulu "maʻemaʻe" a hui pū me nā hui OpenShift pili.
Kiʻi kūkulu maʻemaʻe
E like me kā mākou i ʻōlelo ai ma ka Māhele XNUMX, ʻo ka hapa nui o nā noi pūnaewele hou i kapa ʻia he kahua kūkulu, e hana maʻamau i nā hana e like me ka transpilation code, multi file concatenation, a me ka minification. ʻO nā faila i loaʻa ma muli o kēia mau hana - a he HTML static kēia, JavaScript a me CSS - mālama ʻia i loko o ka waihona puka. ʻO ka wahi o kēia waihona e hilinaʻi pinepine ʻia i nā mea hana e hoʻohana ʻia ai, a no React ʻo ia ka ./build folder (e hoʻi mākou i kēia me nā kikoʻī ma lalo).
Puna-i-Kiʻi (S2I)
Ma kēia pou ʻaʻole mākou e hoʻopā i ke kumuhana "he aha ka S2I a pehea e hoʻohana ai" (hiki iā ʻoe ke heluhelu hou e pili ana i kēia ), akā he mea nui e akaka e pili ana i nā ʻanuʻu ʻelua o kēia kaʻina hana e hoʻomaopopo i ka hana a kahi kiʻi Pūnaewele App Builder.
Māhele hui
Ua like loa ke ʻano o ka hui ʻana i ka mea e hana ana i ka wā e holo ai ʻoe i ka docker build a hoʻopau i kahi kiʻi Docker hou. No laila, hiki i kēia kaʻina ke hoʻomaka i kahi kūkulu ma ka OpenShift platform.
I ka hihia o kahi kiʻi Web App Builder, nona ke kuleana no ka hoʻokomo ʻana i nā hilinaʻi o kāu noi a me ka holo ʻana i ke kūkulu. . Ma ka maʻamau, hoʻohana ke kiʻi kūkulu hale i ka npm run build construct, akā hiki ke hoʻopau ʻia ma o ka NPM_BUILD environment variable.
E like me kā mākou i ʻōlelo ai ma mua, ʻo ka wahi o ka noi i hoʻopau ʻia i kūkulu ʻia e pili ana i nā mea hana āu e hoʻohana ai. No ka laʻana, i ka hihia o React ʻo ia ka ./build folder, a no nā noi Angular ʻo ia ka project_name/dist folder. A, e like me ka mea i hōʻike mua ʻia ma ka pou mua, kahi o ka papa kuhikuhi puka, i hoʻonohonoho ʻia e kūkulu ma ke ʻano maʻamau, hiki ke hoʻopau ʻia ma o ka OUTPUT_DIR environment variable. ʻAe, no ka mea ʻokoʻa ka wahi o ka waihona puka mai ka framework a framework, e kope wale ʻoe i ka mea i hana ʻia i ka waihona maʻamau i ke kiʻi, ʻo ia hoʻi / opt/apt-root/output. He mea nui kēia no ka hoʻomaopopo ʻana i ke koena o kēia ʻatikala, akā i kēia manawa e nānā koke kākou i ka pae aʻe - ka pae holo.
pae holo
Hana ʻia kēia kaʻina i ka wā i hana ʻia ai kahi kelepona i ka holo docker ma ke kiʻi hou i hana ʻia i ka wā o ka hui. Pēlā nō ka hana ʻana i ka wā e kau ana ma ka platform OpenShift. Paʻamau hoʻohana e lawelawe i ka maʻiʻo static i loaʻa i ka papa kuhikuhi puka maʻamau.
Maikaʻi kēia ʻano hana no ka hoʻolalelale wikiwiki ʻana i nā noi, akā ʻaʻole ia e ʻōlelo ʻia e lawelawe i nā ʻike static ma kēia ala. ʻAe, ʻoiai ʻo ka ʻoiaʻiʻo mākou e lawelawe wale nei i ka ʻikepili static, ʻaʻole pono mākou i hoʻokomo ʻia ʻo Node.js i loko o kā mākou kiʻi - lawa kahi kikowaena pūnaewele.
I nā huaʻōlelo ʻē aʻe, i ka wā e ʻākoakoa ai mākou e pono ai kekahi mea, i ka wā e hoʻokō ai pono mākou i kahi mea ʻē aʻe. I kēia kūlana, hiki ke hoʻohana ʻia nā kaulahao.
Kapili kaulahao
ʻO kēia kā lākou e kākau nei ma ka palapala OpenShift:
"Hiki ke hoʻopili ʻia ʻelua hui, me ka hoʻokumu ʻana o kahi hui i hui ʻia a ʻo kekahi e mālama ana i kēlā hui i kahi kiʻi ʻokoʻa i hoʻohana ʻia e holo i kēlā hui."
I nā huaʻōlelo ʻē aʻe, hiki iā mākou ke hoʻohana i ke kiʻi Web App Builder e holo i kā mākou kūkulu, a laila hoʻohana i ke kiʻi kikowaena pūnaewele, ka NGINX like, e lawelawe i kā mākou ʻike.
No laila, hiki iā mākou ke hoʻohana i ke kiʻi Web App Builder ma ke ʻano he mea hana "maʻemaʻe" a ma ka manawa like he kiʻi runtime liʻiliʻi.
I kēia manawa e nānā kākou i kēia me kahi laʻana kikoʻī.
No ke aʻo ʻana e hoʻohana mākou , hana ʻia me ka mea hana laina kauoha create-react-app.
E kōkua iā mākou e hoʻohui i nā mea a pau .
E nānā pono kākou i kēia faila, a hoʻomaka me ka ʻāpana ʻāpana.
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
Maikaʻi nā mea a pau ma aneʻi, akā pono e hoʻolohe i ka ʻāpana OUTPUT_DIR. No ka noi React i kā mākou hiʻohiʻona, ʻaʻohe mea e hopohopo ai, no ka mea, hoʻohana ʻo React i ka waiwai paʻamau e like me ka waihona puka, akā i ka hihia o Angular a i ʻole kekahi mea ʻē aʻe, pono e hoʻololi ʻia kēia ʻāpana e like me ka mea e pono ai.
I kēia manawa, e nānā kākou i ka ʻāpana 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'
E nānā i ke kolu a me ka hā o nā kiʻi. Ua wehewehe ʻia lāua ʻelua e like me nā kiʻi Docker, a hiki iā ʻoe ke ʻike maopopo i kahi i hele mai ai lākou.
ʻO ke kolu o ke kiʻi he web-app-builder a hele mai ia mai nodeshift/ubi8-s2i-web-app i hōʻailona ʻia 10.x ma .
ʻO ka hā he kiʻi NGINX (version 1.12) me ka hōʻailona hou loa .
I kēia manawa, e nānā kākou i nā kiʻi mua ʻelua. Ua nele lāua i ka hoʻomaka ʻana a ua hana ʻia i ka wā o ke kūkulu ʻana. ʻO ke kiʻi mua, react-web-app-builder, ʻo ia ka hopena o kahi kaʻina hui e hoʻohui i ke kiʻi web-app-builder-runtime a me kā mākou kumu kumu. ʻO ia ke kumu i hoʻohui ai mākou i ka "-builder" i ka inoa o kēia kiʻi.
ʻO ke kiʻi ʻelua - react-web-app-runtime - ʻo ia ka hopena o ka hoʻohui ʻana i ka nginx-image-runtime a me kekahi mau faila mai ke kiʻi react-web-app-builder. E hoʻohana ʻia kēia kiʻi i ka wā o ka hoʻolaha ʻana a loaʻa wale i ka kikowaena pūnaewele a me ka HTML static, JavaScript, CSS o kā mākou noi.
Huikau? I kēia manawa, e nānā kākou i nā hoʻonohonoho kūkulu a e maʻalahi iki.
ʻElua mau hoʻonohonoho kūkulu ʻana i kā mākou template. Eia ka mea mua, a he maʻamau loa ia:
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
E like me kāu e ʻike ai, ʻōlelo ka laina me ka lepili 1 e kau ʻia ka hopena o kēia kūkulu ʻana i ke kiʻi react-web-app-builder like a mākou i ʻike ai ma mua o ka ʻāpana ImageStreams.
ʻO ka laina i kapa ʻia ʻo 2 e haʻi iā ʻoe i kahi e loaʻa ai ke code. I kā mākou hihia, he waihona git kēia, a ua hoʻoholo ʻia ka wahi, ref a me ka folder context e nā ʻāpana a mākou i ʻike ai ma luna.
ʻO ka laina i kapa ʻia ʻo 3 ka mea a mākou i ʻike mua ai ma ka ʻāpana ʻāpana. Hoʻohui ia i ka hoʻololi kaiapuni OUTPUT_DIR, kahi i kūkulu ʻia i kā mākou hiʻohiʻona.
ʻO ka laina i kapa ʻia ʻo 4 e ʻōlelo nei e hoʻohana i ke kiʻi web-app-builder-runtime, a mākou i ʻike mua ai ma ka ʻāpana ImageStream.
ʻO ka laina i kapa ʻia ʻo 5 e ʻōlelo nei makemake mākou e hoʻohana i kahi kūkulu hoʻonui inā kākoʻo ke kiʻi S2I iā ia, a hana ke kiʻi Web App Builder. I ka hoʻomaka mua ʻana, ma hope o ka pau ʻana o ka pae hui, e mālama ke kiʻi i ka waihona node_modules i kahi faila waihona. A laila, ma nā holo hope, e wehe wale ke kiʻi i kēia waihona e hōʻemi i ka manawa kūkulu.
A ʻo ka mea hope loa, ʻo ka laina i kapa ʻia ʻo 6 he mau mea hoʻomaka wale nō ia e holo pono ai ke kūkulu ʻana, me ka ʻole o ka hana lima, ke hoʻololi kekahi mea.
Ma ke ʻano holoʻokoʻa he hoʻonohonoho kūkulu maʻamau kēia.
I kēia manawa, e nānā kākou i ka hoʻonohonoho kūkulu lua. Ua like loa ia me ka mea mua, akā aia kekahi ʻokoʻa nui.
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
No laila ʻo ka lua o ka hoʻonohonoho kūkulu ʻana he react-web-app-runtime, a hoʻomaka ia ma ke ʻano maʻamau.
ʻAʻole mea hou ka laina i kapa ʻia ʻo 1 - ʻōlelo wale ia ua hoʻokomo ʻia ka hopena kūkulu i loko o ke kiʻi react-web-app-runtime.
ʻO ka laina i kapa ʻia ʻo 2, e like me ka hoʻonohonoho mua, hōʻike i kahi e loaʻa ai ke code kumu. Akā e ʻike ʻoe eia mākou e ʻōlelo nei ua lawe ʻia mai ke kiʻi. Eia kekahi, mai ke kiʻi a mākou i hana ai - mai react-web-app-builder (i hōʻike ʻia ma ka laina i kapa ʻia ʻo 3). Aia nā faila a mākou e makemake ai e hoʻohana i loko o ke kiʻi a ua hoʻonohonoho ʻia ko lākou wahi ma ka laina i kapa ʻia ʻo 4, i kā mākou hihia ʻo ia /opt/app-root/output/. Inā ʻoe e hoʻomanaʻo, ʻo ia kahi e mālama ʻia ai nā faila e pili ana i nā hopena o ke kūkulu ʻana i kā mākou noi.
ʻO ka waihona wahi i kuhikuhi ʻia ma ka huaʻōlelo me ka lepili 5 ʻo ia wale nō ka papa kuhikuhi o kēia manawa (ʻo kēia wale nō, e hoʻomanaʻo, e holo ana i loko o kekahi mea kupanaha i kapa ʻia ʻo OpenShift, ʻaʻole ma kāu kamepiula kūloko).
ʻO ka māhele hoʻolālā - laina i kapa ʻia ʻo 6 - ua like pū me ka hoʻonohonoho kūkulu mua. I kēia manawa wale nō mākou e hoʻohana ai i ka nginx-image-runtime, a mākou i ʻike ai ma ka ʻāpana ImageStream.
ʻO ka mea hope loa, ʻo ka laina i kapa ʻia ʻo 7 kahi ʻāpana o nā mea e hoʻāla ai i kēia kūkulu i kēlā me kēia manawa ke hoʻololi ʻia ke kiʻi react-web-app-builder.
A i ʻole, loaʻa i kēia template kahi hoʻonohonoho hoʻonohonoho maʻamau maʻamau, a me nā mea e pili ana i nā lawelawe a me nā ala, akā ʻaʻole mākou e komo i kēlā kikoʻī nui loa. E ʻoluʻolu, ʻo ke kiʻi e kau ʻia ʻo ia ke kiʻi react-web-app-runtime.
Hoʻolaha Noi
No laila i kēia manawa ua nānā mākou i ka template, e ʻike kākou pehea e hoʻohana ai ia mea e kau ai i kahi noi.
Hiki iā mākou ke hoʻohana i ka mea hoʻohana OpenShift mea kūʻai aku i kapa ʻia ʻo oc e kau i kā mākou 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
ʻO ke kauoha mua ma ke kiʻi paʻi kiʻi ma luna nei he ala ʻenekinia e ʻimi ai i kahi template./openshiftio/application.yaml.
Hoʻokumu wale ke kauoha ʻelua i kahi noi hou e pili ana i kēia hoʻohālike.
Ma hope o ka hana ʻana o kēia mau kauoha, e ʻike mākou he ʻelua hui mākou:
A i ka hoʻi ʻana i ka pale Overview, e ʻike mākou i ka pod i hoʻokuʻu ʻia:
Kaomi i ka loulou a e lawe ʻia mākou i kā mākou app, ʻo ia ka ʻaoʻao React App paʻamau:
Pākuʻi 1
No ka poʻe aloha Angular iā mākou kekahi .
Ua like ke kumu ma aneʻi, koe wale nō ka hoʻololi OUTPUT_DIR.
Pākuʻi 2
Ma kēia ʻatikala ua hoʻohana mākou iā NGINX ma ke ʻano he kikowaena pūnaewele, akā maʻalahi ke hoʻololi iā ia me Apache, e hoʻololi wale i ka template i ka faila. maluna o .
hopena
Ma ka ʻāpana mua o kēia pūʻulu, ua hōʻike mākou pehea e hoʻolalelale wikiwiki ai i nā noi pūnaewele hou ma ka OpenShift platform. I kēia lā, nānā mākou i ka hana a kahi kiʻi Web App a pehea e hiki ai ke hoʻohui ʻia me kahi kikowaena pūnaewele maʻemaʻe e like me NGINX me ka hoʻohana ʻana i nā kaulahao i kūkulu ʻia e hana ai i kahi kūkulu noiʻi mākaukau. Ma ka ʻatikala aʻe a hope loa i kēia pūʻulu, e hōʻike mākou pehea e holo ai i kahi kikowaena hoʻomohala no kāu noi ma OpenShift a hōʻoia i ka hoʻonohonoho ʻana o nā faila kūloko a mamao.
Nā mea i loko o kēia pūʻulu ʻatikala
- Mahele 1: ;
- Māhele 2: Pehea e hoʻohana ai i kahi kiʻi S2I hou me kahi kiʻi kikowaena HTTP e kū nei, e like me NGINX, me ka hoʻohana ʻana i nā hui OpenShift pili no ka hoʻolaha ʻana;
- Mahele 3: pehea e holo ai i kahi kikowaena hoʻomohala no kāu noi ma ka OpenShift platform a hoʻonohonoho pū me ka ʻōnaehana faila kūloko.
Nā Punawai Hou
- E-puke manuahi .
- ʻIkepili ma .
Source: www.habr.com