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

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

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

U prethodna dva posta pokazali smo kako implementirati moderne web aplikacije u samo nekoliko koraka i kako koristiti novu S2I sliku zajedno sa gotovim HTTP poslužiteljskim imageom, kao što je NGINX, koristeći ulančane verzije za orkestriranje proizvodnih implementacija .

Danas ćemo pokazati kako pokrenuti razvojni poslužitelj za svoju aplikaciju na OpenShift platformi i sinkronizirati ga s lokalnim datotečnim sustavom, a također ćemo govoriti o tome što su OpenShift cjevovodi i kako se mogu koristiti kao alternativa povezanim sklopovima.

OpenShift kao razvojno okruženje

Tijek razvoja

Kao što je već navedeno u prvi post, tipičan razvojni proces za moderne web aplikacije jednostavno je neka vrsta "razvojnog poslužitelja" koji prati promjene lokalnih datoteka. Kada se dogode, pokreće se izgradnja aplikacije, a zatim se ažurira na preglednik.

U većini modernih okvira, takav "razvojni poslužitelj" ugrađen je u odgovarajuće alate naredbenog retka.

Lokalni primjer

Prvo, da vidimo kako ovo radi kada se lokalne aplikacije izvode. Uzmimo aplikaciju kao primjer Reagovati iz prethodnih članaka, iako se gotovo isti koncepti tijeka rada primjenjuju u svim ostalim modernim okvirima.
Dakle, da pokrenemo "dev server" u našem React primjeru, unijet ćemo sljedeću naredbu:

$ npm run start

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

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

I naša će se aplikacija otvoriti u zadanom pregledniku:

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

Sada, ako promijenimo datoteku, aplikacija bi se trebala ažurirati u pregledniku.

OK, sve je jasno s razvojem u lokalnom načinu rada, ali kako to postići na OpenShiftu?

Razvojni poslužitelj na OpenShiftu

Ako se sjećate, u prethodni post, pogledali smo takozvanu fazu pokretanja S2I slike i vidjeli da je prema zadanim postavkama servisni modul odgovoran za servisiranje naše web aplikacije.

Međutim, ako bolje pogledate pokrenuti skriptu iz tog primjera, sadrži $NPM_RUN varijablu okoline, koja vam omogućuje da izvršite svoju naredbu.

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 kako bi ilustrirao opću ideju.

Ovdje smo dodali varijablu okruženja NPM_RUN našoj implementaciji, koja govori vremenu izvođenja da pokrene naredbu za pokretanje pređe, koja pokreće razvojni poslužitelj React unutar našeg OpenShift modula.

Ako pogledate dnevnik pokretne kapsule, izgledat će otprilike ovako:

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

Naravno, sve ovo neće biti ništa dok ne možemo sinkronizirati lokalni kod s kodom koji se također prati za promjene, ali živi na udaljenom poslužitelju.

Sinkronizacija udaljenog i lokalnog koda

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

Dakle, nakon što smo pokrenuli naredbu za postavljanje razvojnog poslužitelja za našu aplikaciju, možemo sigurno koristiti sljedeću naredbu:

$ npx nodeshift watch

Kao rezultat toga, uspostavit će se veza s pokrenutim modulom koji smo stvorili malo ranije, aktivirat će se sinkronizacija naših lokalnih datoteka s udaljenim klasterom, a datoteke na našem lokalnom sustavu počet će se nadzirati radi promjena.

Stoga, ako sada ažuriramo datoteku src/App.js, sustav će reagirati na te promjene, kopirati ih u udaljeni klaster i pokrenuti razvojni poslužitelj koji će zatim ažurirati našu aplikaciju u pregledniku.

Da dovršimo sliku, pokažimo kako izgledaju cijele ove naredbe:

$ 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 povrh naredbe oc rsync, možete saznati više o tome kako funkcionira здесь.

Ovo je bio primjer za React, ali potpuno ista metoda može se koristiti s drugim okvirima, samo postavite varijablu okoline NPM_RUN prema potrebi.

Openshift cjevovodi

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

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

Što su OpenShift cjevovodi

OpenShift Pipelines je sustav za kontinuiranu integraciju i isporuku CI/CD izvorni u oblaku dizajniran za organiziranje cjevovoda pomoću Tektona. Tekton je fleksibilan CI/CD okvir otvorenog koda izvornog Kubernetesa koji vam omogućuje automatizaciju implementacije na različitim platformama (Kubernetes, bez poslužitelja, virtualni strojevi itd.) apstrahiranjem od temeljnog sloja.

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

Postavljanje vašeg radnog okruženja

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

  1. Instalirajte i konfigurirajte klaster OpenShift 4. Naši primjeri za to koriste CodeReady Containers (CRD), upute za instalaciju za koje se mogu pronaći здесь.
  2. Nakon što je klaster spreman, morate na njega instalirati Pipeline Operator. Ne bojte se, jednostavno je, upute za instalaciju здесь.
  3. preuzimanje datoteka Tekton CLI (tkn) здесь.
  4. Pokrenite alat naredbenog retka create-react-app da biste izradili aplikaciju koju ćete zatim implementirati (ovo je jednostavna aplikacija Reagovati).
  5. (Izborno) Klonirajte repozitorij da biste lokalno pokrenuli oglednu aplikaciju s npm install, a zatim npm start.

Repozitorij aplikacije također će imati mapu k8s, koja će sadržavati Kubernetes/OpenShift YAML-ove koji se koriste za implementaciju aplikacije. Bit će zadataka, zadataka klastera, resursa i cjevovoda koje ćemo stvoriti u ovom spremišta.

Započnimo

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

$ oc new-project webapp-pipeline

Ovaj naziv projekta pojavit će se u kodu kasnije, pa ako ga odlučite nazvati nekako drugačije, ne zaboravite urediti primjer koda u skladu s tim. Počevši od ove točke, nećemo ići odozgo prema dolje, nego odozdo prema gore: to jest, prvo ćemo izraditi sve komponente transportera, a tek onda sam transporter.

Dakle, prije svega...

Zadaci

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

Ne brinite ako još nije sasvim jasno. Zapravo, ti su zadaci nešto poput uslužnih programa, a detaljnije ćemo ih pogledati malo kasnije. Za sada ih samo stvorimo:

$ 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 ćemo pomoću naredbe tkn CLI provjeriti jesu li 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 projekt.

Zadaci klastera

Zadaci klastera u osnovi su isti kao i jednostavni zadaci. To jest, to je višekratna zbirka koraka koji se kombiniraju na ovaj ili onaj način prilikom izvođenja određenog zadatka. Razlika je u tome što je zadatak klastera dostupan posvuda unutar klastera. Da bismo vidjeli popis zadataka klastera koji se automatski stvaraju prilikom dodavanja Pipeline Operatora, ponovno ćemo koristiti 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

Kreirajmo sada dva zadatka klastera. Prvi će generirati S2I sliku i poslati je internom OpenShift registru; drugi je izgraditi našu sliku temeljenu na NGINX-u, koristeći aplikaciju koju smo već izgradili kao sadržaj.

Izradite i pošaljite sliku

Prilikom izrade prvog zadatka ponovit ćemo ono što smo već učinili u prethodnom članku o povezanim sklopovima. Podsjetimo se da smo koristili S2I sliku (ubi8-s2i-web-app) za "izgradnju" naše aplikacije, a završili smo sa slikom pohranjenom u internom registru OpenShift. Sada ćemo upotrijebiti ovu sliku web-aplikacije S2I za stvaranje DockerFile-a za našu aplikaciju, a zatim ćemo upotrijebiti Buildah za stvarnu izgradnju i gurnuti rezultirajuću sliku u interni registar OpenShift-a, budući da je to upravo ono što OpenShift radi kada implementirate svoje aplikacije koristeći NodeShift .

Kako smo sve to znali, pitate se? Iz službena verzija službenog Node.js, samo smo ga kopirali i modificirali za sebe.

Dakle, sada kreirajmo 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 fokusirati samo na parametar OUTPUT_DIR:

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

Prema zadanim postavkama, ovaj je parametar jednak buildu, gdje React stavlja sklopljeni sadržaj. Drugi okviri koriste različite staze, na primjer, u Emberu je dist. Izlaz našeg prvog zadatka klastera bit će slika koja sadrži HTML, JavaScript i CSS koje smo prikupili.

Izgradite sliku temeljenu na NGINX-u

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

Da bismo to učinili, mi ćemo - potpuno isto kao gore - stvoriti 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 ovih zadataka klastera, možete vidjeti da ne navodi Git repozitorij s kojim radimo niti nazive slika koje stvaramo. Mi samo specificiramo što točno prenosimo u Git, odnosno određenu sliku gdje treba ispisati konačnu sliku. Zato se ti zadaci klastera mogu ponovno koristiti pri radu s drugim aplikacijama.

I ovdje graciozno prelazimo na sljedeću točku...

sredstva

Dakle, budući da, kao što smo upravo rekli, zadaci klastera trebaju biti što općenitiji, moramo stvoriti resurse koji će se koristiti kao ulaz (Git repozitorij) i kao izlaz (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. Ključ url u odjeljku params upućuje na određeno spremište i specificira glavnu granu (ovo nije obavezno, ali pišemo ga radi potpunosti).

Sada moramo stvoriti resurs za sliku gdje će biti spremljeni rezultati zadatka s2i-web-app, to se radi ovako:

# 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 upućuje na interni registar slika OpenShift-a, točnije onaj koji se nalazi u prostoru imena webapp-pipeline. Ne zaboravite promijeniti ovu postavku ako koristite drugi prostor naziva.

I na kraju, posljednji resurs koji nam treba također će biti slika tipa i to će biti konačna NGINX slika koja će se zatim koristiti tijekom 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 internom registru OpenShift u prostoru imena webapp-pipeline.

Za stvaranje svih ovih resursa odjednom koristimo naredbu create:

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

Možete provjeriti jesu li resursi kreirani na sljedeći način:

$ tkn resource ls

Transportni cjevovod

Sada kada imamo sve potrebne komponente, sastavimo cjevovod od njih kreirajući ga sljedećom naredbom:

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

Ali prije nego što pokrenemo ovu naredbu, pogledajmo ove komponente. Prvo je ime:

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

Zatim u odjeljku specifikacija vidimo naznaku resursa koje smo ranije stvorili:

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

Zatim stvaramo zadatke koje naš cjevovod treba izvršiti. Prije svega, mora izvršiti zadatak s2i-web-app koji smo već izradili:

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

Ovaj zadatak uzima ulazne (gir resurs) i izlazne (built-web-application-image resource) parametre. Također mu prosljeđujemo poseban parametar tako da ne provjerava TLS budući da 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 gotovo isti, samo što se ovdje zadatak klastera webapp-build-runtime koji smo već stvorili zove:

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

Kao i kod prethodnog zadatka, prosljeđujemo resurs, ali sada je to slika ugrađene web-aplikacije (izlaz našeg prethodnog zadatka). I kao izlaz ponovno postavljamo sliku. Budući da se ovaj zadatak mora izvršiti 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 odgovorna su za korištenje YAML datoteka usluge, rute i implementacije koje se nalaze u k8s direktoriju naše web aplikacije, kao i za ažuriranje ove implementacije prilikom stvaranja novih slika. Ova dva zadatka klastera definirali smo na početku članka.

Pokretanje pokretne trake

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

$ tkn pipeline start build-and-deploy-react

U ovoj se fazi naredbeni redak koristi interaktivno i trebate odabrati odgovarajuće resurse kao odgovor na svaki njegov zahtjev: za git resurs odaberite web-application-repo, zatim za prvi slikovni resurs ugrađenu web-aplikaciju -slika, i na kraju, za drugi slikovni resurs –slika-slike-slike-izvođanja-web-aplikacije:

? 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 provjerimo status cjevovoda pomoću sljedeće naredbe:

$ tkn pipeline logs -f

Nakon što je cjevovod pokrenut i aplikacija je postavljena, možemo zatražiti objavljenu rutu sa sljedećom naredbom:

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

Za bolju vizualizaciju, možete vidjeti naš cjevovod u Developer modu web konzole u odjeljku Cjevovodi, kao što je prikazano na sl. 1.

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

Sl. 1. Pregled tekućih cjevovoda.

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

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

Riža. 2. Dodatne informacije o cjevovodu.

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

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

Slika 3. Lansirana kapsula.

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

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

Riža. 4. Pokretanje React aplikacije.

Zaključak

Dakle, pokazali smo kako pokrenuti razvojni poslužitelj za svoju aplikaciju na OpenShiftu i sinkronizirati ga s lokalnim datotečnim sustavom. Također smo pogledali kako simulirati predložak ulančane izrade koristeći OpenShift Pipelines. Svi primjeri kodova iz ovog članka mogu se pronaći здесь.

Dodatni izvori (EN)

Najave nadolazećih webinara

Započinjemo seriju webinara petkom o izvornom iskustvu korištenja Red Hat OpenShift Container Platforme i Kubernetesa:

Izvor: www.habr.com

Dodajte komentar