Сайн уу! Энэ бол Red Hat OpenShift дээр орчин үеийн вэб програмуудыг хэрхэн байрлуулахыг харуулсан цувралын хоёр дахь нийтлэл юм.
Өмнөх нийтлэлдээ бид OpenShift платформ дээр орчин үеийн вэб програмуудыг бүтээх, байрлуулахад зориулагдсан шинэ S2I (эх сурвалжаас зураг) бүтээгч дүрсийн чадавхийг бага зэрэг хөндсөн. Дараа нь бид програмыг хурдан байршуулах сэдвийг сонирхож байсан бөгөөд өнөөдөр бид S2I дүрсийг "цэвэр" бүтээгч дүрс болгон хэрхэн ашиглаж, холбогдох OpenShift угсралтуудтай хослуулах талаар авч үзэх болно.
Цэвэр барилгын зураг
XNUMX-р хэсэгт дурьдсанчлан ихэнх орчин үеийн вэб програмууд нь код шилжүүлэх, олон файлыг нэгтгэх, багасгах зэрэг үйлдлүүдийг гүйцэтгэдэг бүтээх үе шаттай байдаг. Эдгээр үйлдлийн үр дүнд олж авсан файлууд - энэ нь статик HTML, JavaScript болон CSS - гаралтын хавтсанд хадгалагддаг. Энэ фолдерын байршил нь ихэвчлэн ямар бүтээх хэрэглүүр ашиглаж байгаагаас хамаардаг ба React-ийн хувьд энэ нь ./build хавтас байх болно (бид энэ талаар доор дэлгэрэнгүй ярих болно).
Эх сурвалжаас зураг (S2I)
Энэ нийтлэлд бид "S2I гэж юу вэ, түүнийг хэрхэн ашиглах вэ" гэсэн сэдвийг хөндөөгүй (та энэ талаар дэлгэрэнгүй унших боломжтой. ), гэхдээ Web App Builder дүрс юу хийдгийг ойлгохын тулд энэ үйл явцын хоёр алхмын талаар тодорхой байх нь чухал юм.
Угсралтын үе шат
Угсрах үе шат нь docker build-г ажиллуулж, шинэ Docker дүрстэй болоход тохиолддог үйл явцтай маш төстэй юм. Үүний дагуу энэ үе шат нь OpenShift платформ дээр бүтээх ажлыг эхлүүлэх үед тохиолддог.
Web App Builder зургийн хувьд энэ нь таны аппликешны хамаарлыг суулгах, бүтээх ажлыг гүйцэтгэх үүрэгтэй. . Анхдагчаар, бүтээгчийн зураг нь npm run build Build-ийг ашигладаг боловч үүнийг NPM_BUILD орчны хувьсагчаар дамжуулан дарж болно.
Өмнө дурьдсанчлан, дууссан, аль хэдийн баригдсан програмын байршил нь таны ямар хэрэгсэл ашиглаж байгаагаас хамаарна. Жишээлбэл, React-ийн хувьд энэ нь ./build хавтас байх ба Angular програмуудын хувьд энэ нь project_name/dist хавтас байх болно. Өмнөх нийтлэлд үзүүлсэнчлэн анхдагчаар бүтээхээр тохируулсан гаралтын лавлахын байршлыг OUTPUT_DIR орчны хувьсагчаар дамжуулан дарж болно. За, гаралтын хавтасны байршил нь фреймворк болгонд өөр өөр байдаг тул та үүсгэсэн гаралтыг зурган дээрх стандарт хавтас буюу /opt/apt-root/output руу хуулахад л болно. Энэ нь нийтлэлийн үлдсэн хэсгийг ойлгоход чухал ач холбогдолтой боловч одоо дараагийн үе шат болох гүйлтийн үе шатыг хурдан харцгаая.
ажиллуулах үе шат
Угсрах үе шатанд шинээр үүсгэсэн зураг дээр docker run руу дуудлага хийх үед энэ үе шат тохиолддог. OpenShift платформ дээр байршуулах үед ижил зүйл тохиолддог. Өгөгдмөл ашигладаг дээрх стандарт гаралтын лавлахад байрлах статик контентод үйлчлэх.
Энэ арга нь програмуудыг хурдан байрлуулахад тохиромжтой боловч статик контентыг ийм байдлаар ашиглахыг зөвлөдөггүй. Бодит байдал дээр бид зөвхөн статик контентоор үйлчилдэг тул зураг дотор Node.js суулгах шаардлагагүй - вэб сервер хангалттай.
Өөрөөр хэлбэл, угсрахдаа нэг зүйл, гүйцэтгэхэд өөр зүйл хэрэгтэй болно. Ийм нөхцөлд гинжлэгдсэн барилга нь ашигтай байдаг.
Гинжлэгдсэн барилга
Энэ бол тэдний бичсэн зүйл юм OpenShift баримт бичигт:
"Хоёр ассемблейг хооронд нь холбож болох бөгөөд нэг нь эмхэтгэсэн аж ахуйн нэгжийг үүсгэж, нөгөө нь тухайн аж ахуйн нэгжийг ажиллуулахад ашигладаг тусдаа дүр төрхийг байрлуулж болно."
Өөрөөр хэлбэл, бид вэб програм бүтээгч дүрсийг ашиглан бүтээцээ ажиллуулж, дараа нь вэб серверийн дүрс буюу ижил NGINX-ийг ашиглан контентоо ашиглаж болно.
Тиймээс бид Web App Builder дүрсийг "цэвэр" бүтээгч болгон ашиглахын зэрэгцээ бага хэмжээний ажиллах үеийн дүрстэй болно.
Одоо үүнийг тодорхой жишээгээр харцгаая.
Сургалтын хувьд бид ашиглах болно , create-react-app командын мөрийн хэрэгслийг ашиглан үүсгэсэн.
Энэ нь бүх зүйлийг нэгтгэхэд тусална .
Энэ файлыг илүү нарийвчлан авч үзээд параметрийн хэсгээс эхэлье.
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
Энд бүх зүйл тодорхой байгаа боловч OUTPUT_DIR параметрт анхаарлаа хандуулах нь зүйтэй. Манай жишээн дээрх React програмын хувьд санаа зовох зүйл байхгүй, учир нь React нь гаралтын хавтас болгон анхдагч утгыг ашигладаг боловч Angular эсвэл өөр ямар нэг зүйлийн хувьд шаардлагатай бол энэ параметрийг өөрчлөх шаардлагатай болно.
Одоо 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'
Гурав, дөрөв дэх зургийг үзээрэй. Тэдгээрийг хоёуланг нь Docker дүрс гэж тодорхойлсон бөгөөд та хаанаас ирснийг тодорхой харж болно.
Гурав дахь зураг нь web-app-builder бөгөөд 8.x дээр тэмдэглэгдсэн nodeshift/ubi2-s10i-web-app-аас ирдэг. .
Дөрөв дэх нь хамгийн сүүлийн шошготой NGINX дүрс (хувилбар 1.12) юм .
Одоо эхний хоёр зургийг харцгаая. Тэд хоёулаа эхэндээ хоосон бөгөөд зөвхөн бүтээх үе шатанд л үүсдэг. Эхний зураг болох react-web-app-builder нь вэб-app-builder-ажлын үеийн зураг болон манай эх кодыг нэгтгэх угсралтын алхамын үр дүн байх болно. Тиймээс бид энэ зургийн нэр дээр "-Builder" гэж нэмсэн.
Хоёрдахь зураг болох react-web-app-runtime нь nginx-image-runtime болон react-web-app-builder зургийн зарим файлуудыг нэгтгэсний үр дүн байх болно. Энэ зургийг мөн байршуулах явцад ашиглах бөгөөд зөвхөн вэб сервер болон манай програмын статик HTML, JavaScript, CSS-г агуулна.
Андуурах уу? Одоо бүтээх тохиргоог харцгаая, энэ нь бага зэрэг тодорхой болно.
Манай загвар нь хоёр бүтээх тохиргоотой. Энд эхнийх нь бөгөөд энэ нь нэлээд стандарт юм:
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
Таны харж байгаагаар 1-р шошготой мөрөнд энэ бүтээцийн үр дүн нь ImageStreams хэсэгт бидний өмнө нь харсан урвалын вэб-апп-байгуулагчийн зураг дээр тавигдах болно гэж хэлж байна.
2 гэсэн шошготой мөр нь кодыг хаанаас авахыг зааж өгнө. Манай тохиолдолд энэ нь git репозитор бөгөөд байршил, реф болон контекст хавтас нь дээр дурдсан параметрүүдээр тодорхойлогддог.
3 гэж тэмдэглэсэн мөр нь параметрийн хэсэгт аль хэдийн харсан зүйл юм. Энэ нь бидний жишээн дээр бүтээгдсэн OUTPUT_DIR орчны хувьсагчийг нэмдэг.
4 гэсэн шошготой мөрөнд бид ImageStream хэсэгт аль хэдийн үзсэн web-app-builder-ажлын үеийн дүрсийг ашиглахыг хэлдэг.
5-р шошготой мөрөнд хэрэв S2I зураг, мөн Web App Builder-ийн зураг дэмждэг бол бид нэмэлт бүтээцийг ашиглахыг хүсч байна. Эхний эхлүүлэх үед угсралтын үе шат дууссаны дараа зураг нь node_modules хавтсыг архивын файлд хадгалах болно. Дараа нь дараагийн гүйлтүүд дээр зураг бүтээх хугацааг багасгахын тулд энэ хавтсыг зүгээр л задлах болно.
Эцэст нь хэлэхэд, 6 гэж тэмдэглэгдсэн мөр нь ямар нэг зүйл өөрчлөгдөхөд гар ажиллагаагүйгээр угсралтыг автоматаар ажиллуулах цөөн хэдэн өдөөгч юм.
Ерөнхийдөө энэ бол нэлээд стандарт барилгын тохиргоо юм.
Одоо хоёр дахь бүтээх тохиргоог харцгаая. Энэ нь эхнийхтэй маш төстэй боловч нэг чухал ялгаа бий.
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
Тиймээс хоёр дахь бүтээх тохиргоо нь react-web-app-runtime бөгөөд энэ нь нэлээд стандартаар эхэлдэг.
1 гэж тэмдэглэсэн мөр нь шинэ зүйл биш бөгөөд энэ нь бүтээх үр дүнг react-web-app-runtime дүрсэнд оруулсан гэсэн үг юм.
Өмнөх тохиргооны нэгэн адил 2 гэсэн шошготой мөр нь эх кодыг хаанаас авахыг заана. Гэхдээ энд бид зурагнаас авсан гэж хэлж байгааг анзаараарай. Түүгээр ч барахгүй, бидний саяхан бүтээсэн зургаас - react-web-app-builder-аас (3-р шошготой мөрөнд заасан). Бидний ашиглахыг хүссэн файлууд нь зургийн дотор байгаа бөгөөд тэдгээрийн байршлыг 4 гэсэн мөрөнд оруулсан байгаа бөгөөд манай тохиолдолд энэ нь /opt/app-root/output/ байна. Хэрэв та санаж байгаа бол манай програмыг бүтээх үр дүнд үндэслэн үүсгэсэн файлууд энд хадгалагддаг.
5-р шошготой нэр томъёонд заасан очих хавтас нь зүгээр л одоогийн лавлах (энэ нь таны компьютер дээр биш OpenShift хэмээх ид шидийн зүйл дотор ажилладаг гэдгийг санаарай).
Стратегийн хэсэг - 6 гэсэн тэмдэглэгээтэй мөр нь мөн анхны бүтээх тохиргоотой төстэй. Зөвхөн энэ удаад бид ImageStream хэсэгт үзсэн nginx-image-runtime-г ашиглах болно.
Эцэст нь, 7 гэсэн тэмдэглэгээтэй мөр нь урвалын вэб-апп-байгуулагчийн дүрс өөрчлөгдөх бүрт энэ бүтцийг идэвхжүүлдэг триггерүүдийн хэсэг юм.
Үгүй бол энэ загвар нь нэлээд стандарт байршуулалтын тохиргоо, түүнчлэн үйлчилгээ, маршруттай холбоотой зүйлсийг агуулсан боловч бид тийм ч их дэлгэрэнгүй мэдээлэл өгөхгүй. Байршуулах зураг нь react-web-app-runtime зураг гэдгийг анхаарна уу.
Хэрэглээний байршуулалт
Загварыг үзсэнийхээ дараа програмыг ашиглахдаа хэрхэн ашиглахыг харцгаая.
Бид загвараа байрлуулахын тулд oc нэртэй OpenShift клиент хэрэгслийг ашиглаж болно:
$ 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
Дээрх дэлгэцийн агшин дахь эхний команд нь загвар олох зориудаар боловсруулсан инженерийн арга юм./openshiftio/application.yaml.
Хоёрдахь тушаал нь энэ загвар дээр тулгуурлан шинэ програм үүсгэдэг.
Эдгээр тушаалуудыг ажиллуулсны дараа бид хоёр чуулгантай болохыг харах болно.
Тойм дэлгэц рүү буцаж ирэхэд бид эхлүүлсэн подволкийг харах болно:
Холбоос дээр товшвол бид анхдагч React App хуудас болох манай програм руу шилжих болно.
Нэмэлт 1
Angular дурлагчдын хувьд бид бас бий .
Энд байгаа загвар нь OUTPUT_DIR хувьсагчаас бусад тохиолдолд ижил байна.
Нэмэлт 2
Энэ нийтлэлд бид NGINX-ийг вэб сервер болгон ашигласан, гэхдээ үүнийг Apache-ээр солих нь маш хялбар тул файл дахь загварыг өөрчлөхөд л хангалттай. тухай .
дүгнэлт
Энэ цувралын эхний хэсэгт бид орчин үеийн вэб програмуудыг OpenShift платформ дээр хэрхэн хурдан байрлуулахыг харуулсан. Өнөөдөр бид вэб програмын зураг юу хийдэг, түүнийг NGINX гэх мэт цэвэр вэб сервертэй хэрхэн гинжлэгдсэн бүтэцтэй хослуулж, үйлдвэрлэлд илүү бэлэн програм бүтээх боломжтойг харлаа. Энэ цувралын дараагийн бөгөөд эцсийн өгүүллээр бид OpenShift дээр өөрийн програмын хөгжүүлэлтийн серверийг хэрхэн ажиллуулж, дотоод болон алсын файлуудын синхрончлолыг хангахыг харуулах болно.
Энэ цуврал нийтлэлийн агуулга
- 1-р хэсэг: ;
- 2-р хэсэг: NGINX зэрэг одоо байгаа HTTP серверийн дүрс бүхий шинэ S2I дүрсийг үйлдвэрлэлийн байршуулалтад холбогдох OpenShift угсралтыг ашиглан хэрхэн ашиглах вэ;
- 3-р хэсэг: OpenShift платформ дээр өөрийн програмын хөгжүүлэлтийн серверийг хэрхэн ажиллуулж, дотоод файлын системтэй синхрончлох талаар.
Нэмэлт нөөц
- Үнэгүй цахим ном .
- тухай мэдээлэл .
Эх сурвалж: www.habr.com