Moderne aplikacije na OpenShift, dio 3: OpenShift kao razvojno okruženje i OpenShift cjevovodi

Pozdrav svima na ovom blogu! Ovo je treći post u nizu u kojem vam pokazujemo kako da implementirate moderne web aplikacije na Red Hat OpenShift.

Moderne aplikacije na OpenShift, dio 3: OpenShift kao razvojno okruženje i OpenShift cjevovodi

U prethodna dva posta pokrili smo kako implementirati moderne web aplikacije u samo nekoliko koraka i kako koristiti novu S2I sliku zajedno sa unaprijed izgrađenom slikom HTTP servera kao što je NGINX koristeći ulančane buildove za primenu u proizvodnji.

Danas ćemo pokazati kako pokrenuti razvojni server za vašu aplikaciju na OpenShift platformi i sinkronizirati ga s lokalnim sistemom datoteka, kao i govoriti o tome šta su OpenShift Pipelines i kako se mogu koristiti kao alternativa povezanim sklopovima.

OpenShift kao razvojno okruženje

razvojni radni tok

Kao što je već navedeno u prvi post, tipičan proces razvoja za moderne web aplikacije je jednostavno "razvojni server" koji prati promjene u lokalnim datotekama. Kada se dogode, pokreće se izrada aplikacije, a zatim se ažurira u pretraživaču.

U većini modernih okvira, takav "razvojni server" je ugrađen u odgovarajuće alate komandne linije.

Lokalni primjer

Prvo, da vidimo kako to funkcionira u slučaju lokalnog pokretanja aplikacija. Uzmimo aplikaciju kao primjer. reagovati iz prethodnih članaka, iako se gotovo isti koncepti toka rada primjenjuju na sve druge moderne okvire.
Dakle, da pokrenemo "development server" u našem React primjeru, upisaćemo sljedeću naredbu:

$ npm run start

Tada ćemo u prozoru terminala vidjeti nešto poput ovoga:

Moderne aplikacije na OpenShift, dio 3: OpenShift kao razvojno okruženje i OpenShift cjevovodi

I naša aplikacija će se otvoriti u zadanom pretraživaču:

Moderne aplikacije na OpenShift, dio 3: OpenShift kao razvojno okruženje i OpenShift cjevovodi

Sada, ako izvršimo promjene u datoteci, aplikacija bi se trebala osvježiti u pretraživaču.

OK, sa razvojem u lokalnom modu sve je jasno, ali kako to postići na OpenShiftu?

Razvojni server na OpenShift-u

Ako se sećate u prethodni post, analizirali smo takozvanu fazu pokretanja (faza pokretanja) slike S2I i vidjeli da, prema defaultu, našu web aplikaciju opslužuje servisni modul.

Međutim, ako bolje pogledate pokrenuti skriptu iz tog primjera, tada ima varijablu okruženja $NPM_RUN, koja vam omogućava da pokrenete vlastitu komandu.

Na primjer, možemo koristiti modul nodeshift za implementaciju naše aplikacije:

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

Napomena: Gornji primjer je skraćen da bi ilustrirao opću ideju.

Ovdje smo dodali varijablu okruženja NPM_RUN našoj implementaciji, koja govori vremenu izvođenja da pokrene naredbu yarn start, koja pokreće React razvojni server unutar našeg OpenShift pod.

Ako pogledate zapisnik trčanja, tada će biti nešto poput ovoga:

Moderne aplikacije na OpenShift, dio 3: OpenShift kao razvojno okruženje i OpenShift cjevovodi

Naravno, sve ovo neće biti ništa dok ne možemo sinkronizirati lokalni kod sa kodom, koji je također kontroliran za promjene, ali živi na udaljenom serveru.

Sinhronizacija daljinskog i lokalnog koda

Srećom, nodeshift može lako pomoći u sinhronizaciji, a možete koristiti naredbu watch za praćenje promjena.

Dakle, nakon što smo pokrenuli naredbu za implementaciju razvojnog servera za našu aplikaciju, možemo sigurno koristiti ovu naredbu:

$ npx nodeshift watch

Kao rezultat toga, uspostavit će se konekcija s pokrenutim podom koji smo kreirali malo ranije, aktivirat će se sinhronizacija naših lokalnih datoteka s udaljenim klasterom, a datoteke na našem lokalnom sistemu će se početi nadzirati za promjene.

Stoga, ako sada ažuriramo datoteku src/App.js, sistem će reagirati na ove promjene, kopirati ih na udaljeni klaster i pokrenuti razvojni server, koji će zatim ažurirati našu aplikaciju u pretraživaču.

Da upotpunimo sliku, pokažimo kako ove naredbe izgledaju u cijelosti:

$ 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

Naredba watch je apstrakcija na vrhu naredbe oc rsync, možete saznati više o tome kako ovo funkcionira ovdje.

Ovo je bio primjer za React, ali potpuno isti metod se može koristiti sa drugim okvirima, samo postavite varijablu okruženja NPM_RUN po potrebi.

Openshift Pipelines

Moderne aplikacije na OpenShift, dio 3: OpenShift kao razvojno okruženje i OpenShift cjevovodi

Zatim ćemo govoriti o alatu kao što je OpenShift Pipelines i o tome kako se može koristiti kao alternativa za ulančane gradnje.

Šta je OpenShift Pipelines

OpenShift Pipelines je CI/CD sistem kontinuirane integracije i isporuke za cjevovode koji koriste Tekton. Tekton je otvoreni izvorni, fleksibilni Kubernetes izvorni CI/CD okvir koji automatizuje primenu na više platformi (Kubernetes, bez servera, virtuelne mašine, itd.) apstrahujući od osnovnog sloja.

Razumijevanje ovog članka zahtijeva određeno znanje o cjevovodima, pa vam preporučujemo da prvo pročitate službeni udžbenik.

Postavljanje radnog okruženja

Da biste se poigrali s primjerima u ovom članku, prvo morate postaviti radno okruženje:

  1. Instalirajte i konfigurirajte klaster OpenShift 4. Naši primjeri koriste CodeReady kontejnere (CRD) za to, upute za instalaciju za koje možete pronaći ovdje.
  2. Nakon što je klaster spreman, potrebno je da na njega instalirate Pipeline Operator. Ne plašite se, lako je, uputstva za montažu ovdje.
  3. Skinuti Tekton CLI (tkn) ovdje.
  4. Pokrenite alat naredbene linije create-react-app da kreirate aplikaciju koja će se zatim implementirati (ovo je jednostavna aplikacija reagovati).
  5. (Opcionalno) Klonirajte spremište za lokalno pokretanje uzorka aplikacije sa npm instalacijom, a zatim npm start.

Repozitorijum aplikacije će takođe imati k8s folder, koji će sadržati Kubernetes/OpenShift YAML-ove koji se koriste za implementaciju aplikacije. Postojaće zadaci, zadaci klastera, resursi i kanali koje ćemo kreirati u ovom spremišta.

Počinjemo

Prvi korak za naš primjer je kreiranje novog projekta u OpenShift klasteru. Nazovimo ovaj projekat webapp-pipeline i kreirajmo ga sljedećom naredbom:

$ oc new-project webapp-pipeline

Kasnije će se ovaj naziv projekta pojaviti u kodu, pa ako odlučite da ga nazovete nečim drugim, ne zaboravite u skladu s tim urediti kod iz primjera. Počevši od ove tačke, nećemo ići od vrha do dna, već odozdo prema gore: to jest, prvo ćemo kreirati sve komponente transportera, a tek onda samu.

Dakle, pre svega…

Zadaci

Kreirajmo nekoliko zadataka (zadataka), koji će onda pomoći u implementaciji aplikacije unutar našeg cjevovoda. Prvi zadatak, apply_manifests_task, odgovoran je za primenu YAML-a onih Kubernetes resursa (usluga, implementacija i ruta) koji se nalaze u k8s folderu naše aplikacije. Drugi zadatak - update_deployment_task - odgovoran je za ažuriranje već postavljene slike na onu koju kreira naš cjevovod.

Ne brinite ako još nije jasno. U stvari, ovi zadaci su nešto poput uslužnih programa, a detaljnije ćemo ih opisati malo kasnije. Za sada, samo ih kreirajmo:

$ 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

Zatim, koristeći tkn CLI naredbu, provjerite da li su zadaci kreirani:

$ tkn task ls

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

Napomena: Ovo su lokalni zadaci za vaš trenutni projekat.

Zadaci klastera

Zadaci klastera su u osnovi isti kao i samo zadaci. To jest, to je višekratna kolekcija koraka koji se na ovaj ili onaj način kombiniraju kada se pokrene određeni zadatak. Razlika je u tome što je zadatak klastera dostupan svuda unutar klastera. Da biste vidjeli listu zadataka klastera koji se automatski kreiraju kada se doda operator cjevovoda, ponovo koristite tkn CLI naredbu:

$ 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

Sada kreirajmo dva klaster zadatka. Prvi će generisati S2I sliku i poslati je internom OpenShift registru; drugi je da napravimo našu sliku zasnovanu na NGINX-u, koristeći aplikaciju koju smo već napravili kao sadržaj.

Kreirajte i pošaljite sliku

Prilikom kreiranja prvog zadatka ponovit ćemo ono što smo već radili u prethodnom članku o povezanim sklopovima. Podsjetimo da smo koristili S2I sliku (ubi8-s2i-web-app) da "izgradimo" našu aplikaciju i završili sa slikom pohranjenom u internom OpenShift registru. Sada ćemo koristiti ovu sliku S2I web aplikacije da kreiramo DockerFile za našu aplikaciju, a zatim ćemo koristiti Buildah da zapravo napravimo i gurnemo rezultujuću sliku u interni OpenShift registar, jer to je upravo ono što OpenShift radi kada implementirate svoje aplikacije koristeći NodeShift.

Kako znamo sve ovo, pitate se? Od zvanična verzija službenog Node.js, samo smo ga kopirali i sami završili.

Dakle, sada kreiramo zadatak klastera s2i-web-app:

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

Nećemo ovo detaljno analizirati, već ćemo se zadržati samo na parametru OUTPUT_DIR:

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

Po defaultu, ovaj parametar je build, gdje React stavlja izgrađeni sadržaj. Drugi okviri koriste različite putanje, na primjer u Emberu je dist. Rezultat našeg prvog zadatka klastera bit će slika koja sadrži HTML, JavaScript i CSS koje smo prikupili.

Mi gradimo sliku baziranu na NGINX-u

Što se tiče našeg drugog zadatka klastera, on bi trebao izgraditi sliku zasnovanu na NGINX-u koristeći sadržaj aplikacije koju smo već napravili. Zapravo, ovo je dio prethodnog odjeljka gdje smo pogledali ulančane gradnje.

Da bismo to učinili, mi - baš kao malo gore - kreiramo zadatak klastera webapp-build-runtime:

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

Ako pogledate kod za ove zadatke klastera, možete vidjeti da on ne navodi Git spremište s kojim radimo, niti imena slika koje kreiramo. Mi samo specificiramo šta tačno prosleđujemo Gitu, ili neku sliku na koju želimo da izbacimo konačnu sliku. Zbog toga se ovi grupirani zadaci mogu ponovo koristiti u radu s drugim aplikacijama.

A onda graciozno prelazimo na sledeću tačku...

Resursi

Dakle, pošto, kao što smo upravo rekli, zadaci klastera treba da budu što je moguće generičniji, moramo da kreiramo resurse koji će se koristiti u ulazu (Git repozitorijum) i izlazu (konačne slike). Prvi resurs koji nam treba je Git, gdje se nalazi naša aplikacija, otprilike ovako:

# 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

Ovdje je PipelineResource tipa git. Url ključ u odjeljku params ukazuje na određeno spremište i postavlja glavnu granu (ovo je opciono, ali mi ga pišemo radi potpunosti).

Sada trebamo kreirati resurs za sliku, gdje će se pohraniti rezultati zadatka s2i-web-app, to se radi na sljedeći način:

# 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

Ovdje je PipelineResource tipa image, a vrijednost parametra url ukazuje na interni OpenShift Image Registry, posebno onaj u imenskom prostoru webapp-pipeline. Ne zaboravite promijeniti ovu postavku ako koristite drugi prostor imena.

I na kraju, posljednji resurs koji nam treba također će biti tipa image, a ovo će biti konačna NGINX slika, koja će se zatim koristiti tokom implementacije:

# 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

Opet, imajte na umu da ovaj resurs pohranjuje sliku u interni OpenShift registrator u imenskom prostoru webapp-pipeline-a.

Da kreiramo sve ove resurse odjednom, koristimo naredbu create:

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

Da biste bili sigurni da su resursi kreirani, možete učiniti sljedeće:

$ tkn resource ls

cjevovod

Sada kada imamo sve potrebne komponente, sastavit ćemo cjevovod od njih tako što ćemo ga kreirati sljedećom naredbom:

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

Ali prije pokretanja ove naredbe, pogledajmo ove komponente. Prvi je naziv:

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

Zatim, u odjeljku sa specifikacijama, vidimo naznaku resursa koje smo kreirali ranije:

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

Zatim kreiramo zadatke za pokretanje našeg cjevovoda. Prije svega, mora izvršiti zadatak s2i-web-app koji smo već kreirali:

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

Ovaj zadatak uzima ulazne (gir resurs) i izlazne parametre (izgrađena web-aplikacija-slike). Također mu prosljeđujemo poseban parametar tako da ne provjerava TLS jer koristimo samopotpisane certifikate:

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

Sljedeći zadatak je skoro isti, samo se ovdje poziva webapp-build-runtime cluster zadatak koji smo već kreirali:

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

Kao i kod prethodnog zadatka, prosljeđujemo resurs, ali sada je to ugrađena-web-application-image (izlaz našeg prethodnog zadatka). I kao zaključak, ponovo postavljamo sliku. Budući da bi ovaj zadatak trebao biti izveden nakon prethodnog, dodajemo polje runAfter:

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

Sljedeća dva zadatka su odgovorna za primjenu YAML datoteka usluge, rute i implementacije koje žive u k8s direktoriju naše web aplikacije, te za ažuriranje ove implementacije kada se kreiraju nove slike. Ova dva zadatka klastera postavili smo na početku članka.

Pokretanje cjevovoda

Dakle, svi dijelovi našeg cjevovoda su kreirani, a mi ćemo ga pokrenuti sljedećom naredbom:

$ tkn pipeline start build-and-deploy-react

U ovom trenutku, komandna linija se koristi interaktivno i odgovarajući resursi moraju biti odabrani kao odgovor na svaki njegov zahtjev: za git resurs odaberite web-application-repo, zatim za prvi resurs slike, izgrađen-web-application- sliku, i konačno za drugi resurs slike –runtime-web-application-image:

? 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

Sada provjerite status cjevovoda sa sljedećom naredbom:

$ tkn pipeline logs -f

Nakon što se cjevovod pokrene i aplikacija se implementira, upitajte objavljenu rutu sljedećom naredbom:

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

Za veću vidljivost, možete vidjeti naš cjevovod u Developer modu web konzole u odjeljku Cjevovodikao što je prikazano na sl. 1.

Moderne aplikacije na OpenShift, dio 3: OpenShift kao razvojno okruženje i OpenShift cjevovodi

Fig.1. Pregled tekućih cjevovoda.

Klikom na tekući cjevovod prikazuje se dodatne detalje, kao što je prikazano na slici 2.

Moderne aplikacije na OpenShift, dio 3: OpenShift kao razvojno okruženje i OpenShift cjevovodi

Rice. 2. Dodatne informacije o transporteru.

Nakon više detalja, možete vidjeti pokrenute aplikacije u prikazu topologija, kao što je prikazano na sl.3.

Moderne aplikacije na OpenShift, dio 3: OpenShift kao razvojno okruženje i OpenShift cjevovodi

Slika 3. Trčanje pod.

Klikom na krug u gornjem desnom uglu ikone otvara se naša aplikacija, kao što je prikazano na slici 4.

Moderne aplikacije na OpenShift, dio 3: OpenShift kao razvojno okruženje i OpenShift cjevovodi

Rice. 4. Pokrenuta React aplikacija.

zaključak

Dakle, pokazali smo kako pokrenuti razvojni server za vašu aplikaciju na OpenShift-u i sinkronizirati ga s lokalnim sistemom datoteka. Takođe smo pogledali kako da simuliramo šablon lančane gradnje koristeći OpenShift Pipelines. Sve primjere kodova iz ovog članka možete pronaći ovdje.

Dodatni resursi

Najave nadolazećih webinara

Započinjemo seriju webinara u petak o domaćem iskustvu korištenja Red Hat OpenShift Container Platforme i Kubernetesa:

izvor: www.habr.com

Dodajte komentar