🥇Модерне апликације на ОпенСхифт, део 3: ОпенСхифт као развојно окружење и ОпенСхифт цеви

Поздрав свима на овом блогу! Ово је трећи пост у низу у којем показујемо како да примените модерне веб апликације на Ред Хат ОпенСхифт.

У претходна два поста показали смо како да применимо модерне веб апликације у само неколико корака и како да користимо нову С2И слику заједно са готовим имиџом ХТТП сервера, као што је НГИНКС, користећи уланчане верзије за оркестрирање имплементације производње .

Данас ћемо показати како да покренете развојни сервер за вашу апликацију на ОпенСхифт платформи и да га синхронизујете са локалним системом датотека, а такође ћемо говорити о томе шта су ОпенСхифт цевоводи и како се могу користити као алтернатива повезаним склоповима.

ОпенСхифт као развојно окружење

Ток рада развоја

Као што је већ наведено у први пост, типичан процес развоја за модерне веб апликације је једноставно нека врста „развојног сервера“ који прати промене у локалним датотекама. Када се појаве, покреће се израда апликације, а затим се ажурира у прегледачу.

У већини модерних оквира, такав „сервер за развој“ је уграђен у одговарајуће алате командне линије.

Локални пример

Прво, да видимо како ово функционише када локално покрећемо апликације. Узмимо апликацију као пример Реаговати из претходних чланака, иако се скоро исти концепти тока посла примењују у свим другим савременим оквирима.
Дакле, да бисмо покренули „дев сервер“ у нашем Реацт примеру, унећемо следећу команду:

$ npm run start

Затим ћемо у прозору терминала видети нешто овако:

И наша апликација ће се отворити у подразумеваном претраживачу:

Сада, ако унесемо измене у датотеку, апликација би требало да се ажурира у претраживачу.

ОК, све је јасно са развојем у локалном режиму, али како то постићи на ОпенСхифт-у?

Развојни сервер на ОпенСхифт-у

Ако се сећате, у претходни пост, погледали смо такозвану фазу покретања слике С2И и видели да је по подразумеваној вредности сервисни модул одговоран за сервисирање наше веб апликације.

Међутим, ако боље погледате покренути скрипту из тог примера, садржи променљиву окружења $НПМ_РУН, која вам омогућава да извршите своју команду.

На пример, можемо да користимо модул нодесхифт да применимо нашу апликацију:

$ npx nodeshift --deploy.env NPM_RUN="yarn start" --dockerImage=nodeshift/ubi8-s2i-web-app

Напомена: Горњи пример је скраћен да би илустровао општу идеју.

Овде смо додали променљиву окружења НПМ_РУН у нашу примену, која говори времену извођења да покрене команду за покретање иарн, која покреће Реацт развојни сервер унутар нашег ОпенСхифт под.

Ако погледате дневник тркачке капсуле, изгледаће отприлике овако:

Наравно, све ово неће бити ништа док не синхронизујемо локални код са кодом, који се такође прати за промене, али живи на удаљеном серверу.

Синхронизација даљинског и локалног кода

Срећом, нодесхифт може лако помоћи у синхронизацији, а можете користити команду ватцх да бисте пратили промене.

Дакле, након што смо покренули наредбу за постављање развојног сервера за нашу апликацију, можемо безбедно да користимо следећу команду:

$ npx nodeshift watch

Као резултат тога, биће успостављена веза са покренутим подом који смо креирали мало раније, синхронизација наших локалних датотека са удаљеним кластером ће бити активирана, а датотеке на нашем локалном систему ће почети да се надгледају за промене.

Стога, ако сада ажурирамо датотеку срц/Апп.јс, систем ће реаговати на ове промене, копирати их на удаљени кластер и покренути развојни сервер, који ће затим ажурирати нашу апликацију у претраживачу.

Да бисмо употпунили слику, хајде да покажемо како изгледају целе ове команде:

$ npx nodeshift --strictSSL=false --dockerImage=nodeshift/ubi8-s2i-web-app --build.env YARN_ENABLED=true --expose --deploy.env NPM_RUN="yarn start" --deploy.port 3000

$ npx nodeshift watch --strictSSL=false

Команда ватцх је апстракција на врху команде оц рсинц, можете сазнати више о томе како функционише овде.

Ово је био пример за Реацт, али потпуно исти метод се може користити са другим оквирима, само подесите променљиву окружења НПМ_РУН по потреби.

Опенсхифт Пипелинес

Затим ћемо причати о алату као што је ОпенСхифт Пипелинес и како се може користити као алтернатива уланчаним градњама.

Шта су ОпенСхифт цевоводи

ОпенСхифт Пипелинес је ЦИ/ЦД систем континуиране интеграције и испоруке дизајниран за организовање цевовода користећи Тектон. Тектон је флексибилан ЦИ/ЦД оквир отвореног кода који је урођен у Кубернетесу који вам омогућава да аутоматизујете примену на различитим платформама (Кубернетес, без сервера, виртуелне машине, итд.) апстраховањем од основног слоја.

Разумевање овог чланка захтева одређено знање о цевоводима, па вам топло препоручујемо да прво прочитате званични уџбеник.

Постављање вашег радног окружења

Да бисте се играли са примерима у овом чланку, прво морате да припремите своје радно окружење:

Инсталирајте и конфигуришите кластер ОпенСхифт 4. Наши примери користе ЦодеРеади контејнере (ЦРД) за ово, упутства за инсталацију за које можете пронаћи овде.
Након што је кластер спреман, потребно је да на њега инсталирате Пипелине Оператор. Не плашите се, лако је, упутства за инсталацију овде.
Преузимање Тектон ЦЛИ (ткн) овде.
Покрените алат командне линије цреате-реацт-апп да креирате апликацију коју ћете затим применити (ово је једноставна апликација Реаговати).
(Опционално) Клонирајте спремиште да бисте покренули пример апликације локално са нпм инсталл, а затим нпм старт.

Репозиторијум апликације ће такође имати к8с фолдер, који ће садржати Кубернетес/ОпенСхифт ИАМЛ-ове који се користе за примену апликације. Постојаће задаци, задаци кластера, ресурси и канали које ћемо креирати у овом спремишта.

Геттинг стартед

Први корак за наш пример је креирање новог пројекта у ОпенСхифт кластеру. Назовимо овај пројекат вебапп-пипелине и креирајмо га следећом командом:

$ oc new-project webapp-pipeline

Ово име пројекта ће се касније појавити у коду, па ако одлучите да га назовете неким другим, не заборавите да у складу с тим уредите пример кода. Почевши од ове тачке, нећемо ићи одозго надоле, већ одоздо према горе: то јест, прво ћемо креирати све компоненте транспортера, а тек онда сам транспортер.

Дакле, пре свега...

Задаци

Хајде да направимо неколико задатака, који ће онда помоћи у примени апликације у оквиру нашег цевовода. Први задатак - аппли_манифестс_таск - је одговоран за примену ИАМЛ-а оних Кубернетес ресурса (услуга, распоређивање и рута) који се налазе у к8с фасцикли наше апликације. Други задатак – упдате_деплоимент_таск – одговоран је за ажурирање већ постављене слике на ону коју је креирао наш цевовод.

Не брините ако још није јасно. У ствари, ови задаци су нешто попут услужних програма, а ми ћемо их детаљније погледати мало касније. За сада, хајде да их креирамо:

$ oc create -f https://raw.githubusercontent.com/nodeshift/webapp-pipeline-tutorial/master/tasks/update_deployment_task.yaml
$ oc create -f https://raw.githubusercontent.com/nodeshift/webapp-pipeline-tutorial/master/tasks/apply_manifests_task.yaml

Затим, користећи команду ткн ЦЛИ, проверићемо да ли су задаци креирани:

$ tkn task ls

NAME                AGE
apply-manifests     1 minute ago
update-deployment   1 minute ago

Напомена: Ово су локални задаци за ваш тренутни пројекат.

Задаци кластера

Кластерски задаци су у основи исти као и једноставни задаци. То јест, то је вишекратна колекција корака који се комбинују на овај или онај начин када се извршава одређени задатак. Разлика је у томе што је задатак кластера доступан свуда у оквиру кластера. Да бисмо видели листу задатака кластера који се аутоматски креирају приликом додавања Оператора цевовода, поново ћемо користити ткн ЦЛИ команду:

$ tkn clustertask ls

NAME                       AGE
buildah                    1 day ago
buildah-v0-10-0            1 day ago
jib-maven                  1 day ago
kn                         1 day ago
maven                      1 day ago
openshift-client           1 day ago
openshift-client-v0-10-0   1 day ago
s2i                        1 day ago
s2i-go                     1 day ago
s2i-go-v0-10-0             1 day ago
s2i-java-11                1 day ago
s2i-java-11-v0-10-0        1 day ago
s2i-java-8                 1 day ago
s2i-java-8-v0-10-0         1 day ago
s2i-nodejs                 1 day ago
s2i-nodejs-v0-10-0         1 day ago
s2i-perl                   1 day ago
s2i-perl-v0-10-0           1 day ago
s2i-php                    1 day ago
s2i-php-v0-10-0            1 day ago
s2i-python-3               1 day ago
s2i-python-3-v0-10-0       1 day ago
s2i-ruby                   1 day ago
s2i-ruby-v0-10-0           1 day ago
s2i-v0-10-0                1 day ago

Сада направимо два кластер задатка. Први ће генерисати С2И слику и послати је у интерни ОпенСхифт регистар; други је да изградимо нашу слику засновану на НГИНКС-у, користећи апликацију коју смо већ направили као садржај.

Креирајте и пошаљите слику

Када креирамо први задатак, поновићемо оно што смо већ урадили у претходном чланку о повезаним склоповима. Подсетимо се да смо користили С2И слику (уби8-с2и-веб-апп) да „направимо“ нашу апликацију и завршили са сликом ускладиштеном у ОпенСхифт интерном регистру. Сада ћемо користити ову слику С2И веб апликације да креирамо ДоцкерФиле за нашу апликацију, а затим ћемо користити Буилдах да урадимо стварну изградњу и гурнемо резултујућу слику у ОпенСхифт интерни регистар, пошто је то управо оно што ОпенСхифт ради када примените своје апликације користећи НодеСхифт .

Како смо све ово знали, питате се? Од званична верзија званичног Ноде.јс, само смо га копирали и изменили за себе.

Дакле, сада направимо задатак кластера с2и-веб-апп:

$ oc create -f https://raw.githubusercontent.com/nodeshift/webapp-pipeline-tutorial/master/clustertasks/s2i-web-app-task.yaml

Нећемо ово детаљно анализирати, већ ћемо се фокусирати само на параметар ОУТПУТ_ДИР:

params:
      - name: OUTPUT_DIR
        description: The location of the build output directory
        default: build

Подразумевано, овај параметар је једнак буилд-у, где Реацт ставља састављени садржај. Други оквири користе различите путање, на пример, у Емберу је дист. Резултат нашег првог задатка кластера биће слика која садржи ХТМЛ, ЈаваСцрипт и ЦСС које смо прикупили.

Направите слику засновану на НГИНКС-у

Што се тиче нашег другог задатка кластера, требало би да направи слику засновану на НГИНКС-у, користећи садржај апликације коју смо већ направили. У суштини, ово је део претходног одељка где смо погледали уланчане градње.

Да бисмо то урадили, ми ћемо - потпуно исто као малопре - креирати кластер задатак вебапп-буилд-рунтиме:

$ oc create -f https://raw.githubusercontent.com/nodeshift/webapp-pipeline-tutorial/master/clustertasks/webapp-build-runtime-task.yaml

Ако погледате код ових задатака кластера, можете видети да он не наводи Гит спремиште са којим радимо нити имена слика које креирамо. Ми само специфицирамо шта тачно преносимо у Гит, или одређену слику где треба да буде излазна коначна слика. Због тога се ови задаци кластера могу поново користити када радите са другим апликацијама.

И овде грациозно прелазимо на следећу тачку...

Ресурси

Дакле, пошто, као што смо управо рекли, задаци кластера треба да буду што је могуће општији, морамо да креирамо ресурсе који ће се користити као улаз (Гит спремиште) и као излаз (коначне слике). Први ресурс који нам треба је Гит, где се налази наша апликација, отприлике овако:

# This resource is the location of the git repo with the web application source
apiVersion: tekton.dev/v1alpha1
kind: PipelineResource
metadata:
  name: web-application-repo
spec:
  type: git
  params:
    - name: url
      value: https://github.com/nodeshift-starters/react-pipeline-example
    - name: revision
      value: master

Овде ПипелинеРесоурце је типа гит. Урл кључ у одељку парамс указује на одређено спремиште и наводи главну грану (ово је опционо, али ми га пишемо ради потпуности).

Сада треба да креирамо ресурс за слику где ће бити сачувани резултати задатка с2и-веб-апп, ово се ради овако:

# This resource is the result of running "npm run build",  the resulting built files will be located in /opt/app-root/output
apiVersion: tekton.dev/v1alpha1
kind: PipelineResource
metadata:
  name: built-web-application-image
spec:
  type: image
  params:
    - name: url
      value: image-registry.openshift-image-registry.svc:5000/webapp-pipeline/built-web-application:latest

Овде је ПипелинеРесоурце типа имаге, а вредност параметра урл указује на интерни ОпенСхифт Имаге Регистри, посебно онај који се налази у именском простору вебапп-пипелине-а. Не заборавите да промените ово подешавање ако користите други именски простор.

И на крају, последњи ресурс који нам је потребан биће такође типа имаге и ово ће бити коначна НГИНКС слика која ће се затим користити током постављања:

# This resource is the image that will be just the static html, css, js files being run with nginx
apiVersion: tekton.dev/v1alpha1
kind: PipelineResource
metadata:
  name: runtime-web-application-image
spec:
  type: image
  params:
    - name: url
      value: image-registry.openshift-image-registry.svc:5000/webapp-pipeline/runtime-web-application:latest

Опет, имајте на уму да овај ресурс складишти слику у интерном ОпенСхифт регистру у именском простору вебапп-пипелине-а.

Да бисмо креирали све ове ресурсе одједном, користимо команду цреате:

$ oc create -f https://raw.githubusercontent.com/nodeshift/webapp-pipeline-tutorial/master/resources/resource.yaml

Можете бити сигурни да су ресурси креирани овако:

$ tkn resource ls

Транспортни цевовод

Сада када имамо све потребне компоненте, хајде да саставимо цевовод од њих тако што ћемо га креирати следећом командом:

$ oc create -f https://raw.githubusercontent.com/nodeshift/webapp-pipeline-tutorial/master/pipelines/build-and-deploy-react.yaml

Али пре него што покренемо ову команду, погледајмо ове компоненте. Прво је име:

apiVersion: tekton.dev/v1alpha1
kind: Pipeline
metadata:
  name: build-and-deploy-react

Затим у одељку са спецификацијама видимо индикацију ресурса које смо креирали раније:

spec:
  resources:
    - name: web-application-repo
      type: git
    - name: built-web-application-image
      type: image
    - name: runtime-web-application-image
      type: image

Затим креирамо задатке које наш цевовод треба да заврши. Пре свега, мора да изврши задатак с2и-веб-апп који смо већ креирали:

tasks:
    - name: build-web-application
      taskRef:
        name: s2i-web-app
        kind: ClusterTask

Овај задатак узима улазне (гир ресурс) и излазне (изграђене-веб-апликације-ресурс-имаге) параметре. Такође му прослеђујемо посебан параметар тако да не верификује ТЛС пошто користимо самопотписане сертификате:

resources:
        inputs:
          - name: source
            resource: web-application-repo
        outputs:
          - name: image
            resource: built-web-application-image
      params:
        - name: TLSVERIFY
          value: "false"

Следећи задатак је скоро исти, само што се овде зове задатак кластера вебапп-буилд-рунтиме који смо већ креирали:

name: build-runtime-image
    taskRef:
      name: webapp-build-runtime
      kind: ClusterTask

Као и код претходног задатка, прослеђујемо ресурс, али сада је то уграђена-веб-апликација-слика (излаз нашег претходног задатка). И као излаз поново постављамо слику. Пошто се овај задатак мора извршити након претходног, додајемо поље рунАфтер:

resources:
        inputs:
          - name: image
            resource: built-web-application-image
        outputs:
          - name: image
            resource: runtime-web-application-image
        params:
        - name: TLSVERIFY
          value: "false"
      runAfter:
        - build-web-application

Следећа два задатка су одговорна за коришћење сервиса, рутирања и имплементације ИАМЛ датотека које живе у к8с директоријуму наше веб апликације, као и за ажурирање ове имплементације приликом креирања нових слика. Ова два задатка кластера дефинисали смо на почетку чланка.

Покретање транспортера

Дакле, сви делови нашег цевовода су креирани, а ми ћемо га покренути следећом командом:

$ tkn pipeline start build-and-deploy-react

У овој фази, командна линија се користи интерактивно и потребно је да изаберете одговарајуће ресурсе као одговор на сваки њен захтев: за гит ресурс изаберите веб-апплицатион-репо, затим за први ресурс слике, изграђен-веб-апплицатион -имаге, и коначно, за други ресурс слике –рунтиме-веб-апплицатион-имаге:

? Choose the git resource to use for web-application-repo: web-application-repo (https://github.com/nodeshift-starters/react-pipeline-example)
? Choose the image resource to use for built-web-application-image: built-web-application-image (image-registry.openshift-image-registry.svc:5000/webapp-pipeline/built-web-
application:latest)
? Choose the image resource to use for runtime-web-application-image: runtime-web-application-image (image-registry.openshift-image-registry.svc:5000/webapp-pipeline/runtim
e-web-application:latest)
Pipelinerun started: build-and-deploy-react-run-4xwsr

Сада хајде да проверимо статус цевовода помоћу следеће команде:

$ tkn pipeline logs -f

Када је цевовод покренут и апликација је распоређена, можемо затражити објављену руту са следећом командом:

$ oc get route react-pipeline-example --template='http://{{.spec.host}}'

За већу визуелизацију, можете погледати наш цевовод у режиму за програмере веб конзоле у одељку Цевоводи, као што је приказано на сл. 1.

Фиг. 1. Преглед текућих цевовода.

Кликом на текући цевовод приказује се додатне детаље, као што је приказано на слици 2.

Пиринач. 2. Додатне информације о гасоводу.

Након више информација, можете видети покренуте апликације у приказу топологија, као што је приказано на сл.3.

Слика 3. Лансирана махуна.

Кликом на кружић у горњем десном углу иконе отвара се наша апликација, као што је приказано на слици 4.

Пиринач. 4. Покретање Реацт апликације.

Закључак

Дакле, показали смо како да покренете развојни сервер за вашу апликацију на ОпенСхифт-у и да га синхронизујете са локалним системом датотека. Такође смо погледали како да симулирамо шаблон ланчане градње користећи ОпенСхифт Пипелинес. Све примере кодова из овог чланка можете пронаћи овде.

Додатни ресурси (ЕН)

Најаве предстојећих вебинара

Почињемо серију вебинара у петак о домаћем искуству користећи Ред Хат ОпенСхифт Цонтаинер Платформу и Кубернетес:

Извор: ввв.хабр.цом

Модерне апликације на ОпенСхифт-у, део 3: ОпенСхифт као развојно окружење и ОпенСхифт цевоводи