Здраво свима! Ово је други пост у нашој серији у којем показујемо како да примените модерне веб апликације на Ред Хат ОпенСхифт.
У претходном посту, мало смо се дотакли могућности новог С2И (извор-то-слику) буилдер имиџа, који је дизајниран за прављење и примену модерних веб апликација на ОпенСхифт платформи. Затим нас је занимала тема брзог постављања апликације, а данас ћемо погледати како да користимо С2И слику као „чисту“ слику градитеља и комбинујемо је са сродним ОпенСхифт склоповима.
Чиста слика градитеља
Као што смо поменули у првом делу, већина модерних веб апликација има такозвану фазу израде, која обично обавља операције као што су транспилација кода, вишеструка конкатенација датотека и минификација. Датотеке добијене као резултат ових операција – а то је статички ХТМЛ, ЈаваСцрипт и ЦСС – чувају се у излазној фасцикли. Локација ове фасцикле обично зависи од тога који алати за прављење се користе, а за Реацт ово ће бити фасцикла ./буилд (на то ћемо се вратити детаљније у наставку).
Од извора до слике (С2И)
У овом посту се не дотичемо теме „шта је С2И и како га користити“ (више о томе можете прочитати ), али важно је да буде јасно у вези са два корака у овом процесу да бисте разумели шта ради слика Веб Апп Буилдер-а.
Фаза монтаже
Фаза монтаже је по природи врло слична ономе што се дешава када покренете доцкер буилд и завршите са новом Доцкер сликом. Сходно томе, ова фаза се јавља приликом покретања градње на ОпенСхифт платформи.
У случају слике Веб Апп Буилдер-а, она је одговорна за инсталирање зависности ваше апликације и покретање изградње. . Подразумевано, слика градитеља користи конструкцију нпм рун буилд, али ово се може заменити кроз променљиву окружења НПМ_БУИЛД.
Као што смо раније рекли, локација готове, већ изграђене апликације зависи од алата које користите. На пример, у случају Реацт-а ово ће бити фасцикла ./буилд, а за Ангулар апликације то ће бити фасцикла пројецт_наме/дист. И, као што је већ приказано у претходном посту, локација излазног директоријума, која је подразумевано подешена за изградњу, може се заменити преко ОУТПУТ_ДИР променљиве окружења. Па, пошто се локација излазне фасцикле разликује од оквира до оквира, једноставно копирате генерисани излаз у стандардни фолдер на слици, односно /опт/апт-роот/оутпут. Ово је важно за разумевање остатка овог чланка, али за сада хајде да брзо погледамо следећу фазу - фазу покретања.
фаза трчања
Ова фаза се дешава када се изврши позив доцкер рун-у на новој слици креираној током фазе склапања. Исто се дешава када се примењује на ОпенСхифт платформи. Уобичајено користи да служи статички садржај који се налази у горњем стандардном излазном директоријуму.
Овај метод је добар за брзо постављање апликација, али се генерално не препоручује да се на овај начин приказује статички садржај. Па, пошто у стварности опслужујемо само статички садржај, не треба нам Ноде.јс инсталиран унутар наше слике - веб сервер ће бити довољан.
Другим речима, при склапању нам је потребна једна ствар, при извођењу нам је потребна друга. У овој ситуацији, ланчане конструкције добро долазе.
Цхаинед буилдс
О томе пишу у ОпенСхифт документацији:
„Два склопа могу бити повезана заједно, при чему један генерише преведени ентитет, а други хостује тај ентитет у засебној слици која се користи за покретање тог ентитета.
Другим речима, можемо да користимо слику Веб Апп Буилдер-а за покретање наше израде, а затим да користимо слику веб сервера, исти НГИНКС, за послуживање нашег садржаја.
Дакле, можемо да користимо слику Веб Апп Буилдер-а као „чист” креатор и истовремено имамо малу рунтиме слику.
Сада погледајмо ово на конкретном примеру.
За обуку ћемо користити , креиран помоћу алата командне линије цреате-реацт-апп.
То ће нам помоћи да све спојимо .
Погледајмо ову датотеку детаљније и почнимо са одељком параметара.
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
Овде је све прилично јасно, али вреди обратити пажњу на параметар ОУТПУТ_ДИР. За Реацт апликацију у нашем примеру, нема разлога за бригу, пошто Реацт користи подразумевану вредност као излазну фасциклу, али у случају Ангулара или нечег другог, овај параметар ће морати да се промени по потреби.
Хајде сада да погледамо одељак ИмагеСтреамс.
- 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'
Погледајте трећу и четврту слику. Обе су дефинисане као Доцкер слике и можете јасно видети одакле долазе.
Трећа слика је веб-апп-буилдер и долази из нодесхифт/уби8-с2и-веб-апп означене 10.к на .
Четврта је НГИНКС слика (верзија 1.12) са најновијом укљученом ознаком .
Сада погледајмо прве две слике. Оба су празна на почетку и креирају се само током фазе изградње. Прва слика, реацт-веб-апп-буилдер, биће резултат корака састављања који ће комбиновати слику времена извођења веб-апп-буилдер и наш изворни код. Због тога смо имену ове слике додали „-буилдер“.
Друга слика - реацт-веб-апп-рунтиме - биће резултат комбиновања нгинк-имаге-рунтиме и неких датотека са слике реацт-веб-апп-буилдер. Ова слика ће се такође користити током постављања и садржаће само веб сервер и статички ХТМЛ, ЈаваСцрипт, ЦСС наше апликације.
Збуњен? Хајде сада да погледамо конфигурације изградње и биће мало јасније.
Наш шаблон има две конфигурације израде. Ево првог, и прилично је стандардан:
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 каже да ће резултат ове израде бити смештен у исту слику реацт-веб-апп-буилдер коју смо видели мало раније у одељку ИмагеСтреамс.
Линија са ознаком 2 вам говори одакле да добијете код. У нашем случају, ово је гит спремиште, а локација, реф и контекст фолдер су одређени параметрима које смо већ видели изнад.
Линија означена са 3 је оно што смо већ видели у одељку са параметрима. Додаје променљиву окружења ОУТПУТ_ДИР, која је у нашем примеру буилд.
Линија означена са 4 каже да се користи слика времена извођења веб-апп-буилдер-а, коју смо већ видели у одељку ИмагеСтреам.
Линија са ознаком 5 каже да желимо да користимо инкременталну изградњу ако је С2И слика подржава, а слика Веб Апп Буилдер-а. Приликом првог покретања, након завршетка фазе склапања, слика ће сачувати фасциклу ноде_модулес у архивску датотеку. Затим, приликом наредних покретања, слика ће једноставно распаковати ову фасциклу да би смањила време израде.
И на крају, линија са ознаком 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
Дакле, друга конфигурација изградње је реацт-веб-апп-рунтиме, и почиње прилично стандардно.
Линија са ознаком 1 није ништа ново - она једноставно каже да се резултат изградње ставља у слику реацт-веб-апп-рунтиме.
Линија са ознаком 2, као у претходној конфигурацији, показује одакле да добијете изворни код. Али приметите да овде говоримо да је преузето са слике. Штавише, са слике коју смо управо креирали - из реацт-веб-апп-буилдер (назначеног у реду означеном са 3). Датотеке које желимо да користимо налазе се унутар слике и њихова локација је постављена у линији означеној са 4, у нашем случају то је /опт/апп-роот/оутпут/. Ако се сећате, овде се чувају фајлови генерисани на основу резултата изградње наше апликације.
Одредишна фасцикла наведена у термину са ознаком 5 је једноставно тренутни директоријум (ово је све, запамтите, ради унутар неке магичне ствари која се зове ОпенСхифт, а не на вашем локалном рачунару).
Одељак стратегије – линија са ознаком 6 – такође је сличан првој конфигурацији изградње. Само овог пута ћемо користити нгинк-имаге-рунтиме, што смо већ видели у одељку ИмагеСтреам.
Коначно, линија са ознаком 7 је део окидача који ће активирати ову конструкцију сваки пут када се слика реацт-веб-апп-буилдер промени.
Иначе, овај шаблон садржи прилично стандардну конфигурацију за примену, као и ствари које се односе на услуге и руте, али нећемо улазити превише у детаље. Имајте на уму да је слика која ће бити распоређена слика реацт-веб-апп-рунтиме.
Примена апликације
Сада када смо погледали шаблон, хајде да видимо како да га користимо за примену апликације.
Можемо да користимо ОпенСхифт клијентски алат који се зове оц да применимо наш шаблон:
$ 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
Прва команда на слици изнад је намерно инжењерски начин да се пронађе шаблон./опенсхифтио/апплицатион.иамл.
Друга команда једноставно креира нову апликацију на основу овог шаблона.
Након што ове команде раде, видећемо да имамо два склопа:
И враћајући се на екран Преглед, видећемо покренуту под:
Кликните на везу и бићемо одведени на нашу апликацију, која је подразумевана страница Реацт апликације:
Додатак 1
За љубитеље Ангулара такође имамо .
Образац овде је исти, осим за променљиву ОУТПУТ_ДИР.
Додатак 2
У овом чланку смо користили НГИНКС као веб сервер, али га је прилично лако заменити Апацхе-ом, само промените шаблон у датотеци на .
Закључак
У првом делу ове серије показали смо како брзо применити модерне веб апликације на ОпенСхифт платформи. Данас смо погледали шта ради слика веб апликације и како се може комбиновати са чистим веб сервером као што је НГИНКС користећи уланчане верзије да бисмо креирали верзију апликације која је спремнија за производњу. У следећем и последњем чланку у овој серији, показаћемо како да покренете развојни сервер за вашу апликацију на ОпенСхифт-у и обезбедите синхронизацију локалних и удаљених датотека.
Садржај ове серије чланака
- Део КСНУМКС-а: ;
- Део 2: Како користити нову С2И слику са постојећом сликом ХТТП сервера, као што је НГИНКС, користећи придружене ОпенСхифт склопове за примену у производњи;
- Део 3: како покренути развојни сервер за вашу апликацију на ОпенСхифт платформи и синхронизовати га са локалним системом датотека.
Додатна средства
- Бесплатна е-књига .
- Информације о .
Извор: ввв.хабр.цом