Modern Uwendungen op OpenShift, Deel 2: chained Builds

Moien alleguer! Dëst ass den zweete Post an eiser Serie, an där mir weisen wéi modern Webapplikatiounen op Red Hat OpenShift ofsetzen.

Am virege Post hu mir e bëssen iwwer d'Fäegkeeten vum neie S2I (Source-to-Image) Builder-Bild beréiert, deen entwéckelt ass fir modern Webapplikatiounen op der OpenShift Plattform ze bauen an z'installéieren. Duerno ware mir interesséiert fir d'Thema fir eng Applikatioun séier z'installéieren, an haut wäerte mir kucken wéi een e S2I Bild als "reng" Builderbild benotzt an et mat verbonnen OpenShift Versammlungen kombinéiere kann.

Propper Builder Bild

Wéi mir am Deel XNUMX ernimmt hunn, hunn déi meescht modern Webapplikatiounen eng sougenannte Build-Bühn, déi typesch Operatiounen ausféiert wéi Codetranspilatioun, Multiple Dateikoncatenatioun a Minifikatioun. D'Dateie kritt als Resultat vun dësen Operatiounen - an dëst ass statesch HTML, JavaScript an CSS - ginn am Output Dossier gespäichert. D'Plaz vun dësem Dossier hänkt normalerweis dovun of wéi eng Build Tools benotzt ginn, a fir React wäert dëst den ./build Dossier sinn (mir kommen hei ënnen méi detailléiert zréck).

Source-zu-Bild (S2I)

An dësem Post beréieren mir net op d'Thema "wat ass S2I a wéi Dir et benotzt" (Dir kënnt méi iwwer dëst liesen hei), awer et ass wichteg kloer iwwer déi zwee Schrëtt an dësem Prozess ze sinn fir ze verstoen wat e Web App Builder Bild mécht.

Assemblée Phase

D'Versammlungsphase ass ganz ähnlech an der Natur wéi wat geschitt wann Dir Docker Build leeft a mat engem neien Docker Bild op en Enn geet. Deementspriechend geschitt dës Etapp wann Dir e Build op der OpenShift Plattform starten.

Am Fall vun engem Web App Builder Bild ass et verantwortlech fir d'Ofhängegkeeten vun Ärer Applikatioun z'installéieren an de Build ze lafen. versammele Skript. Par défaut benotzt d'Builder Bild den npm Run Build Konstrukt, awer dëst kann iwwer d'NPM_BUILD Ëmfeldvariabel iwwerschratt ginn.

Wéi mir virdru gesot hunn, hänkt de Standort vun der fäerdeger, scho gebauter Applikatioun of wéi eng Tools Dir benotzt. Zum Beispill, am Fall vu React ass dëst den ./build Dossier, a fir Angular Uwendungen ass et de project_name/dist Dossier. A wéi schonn am virege Post gewisen, kann de Standort vum Ausgabverzeichnis, deen als Standard opgebaut ass, duerch d'OUTPUT_DIR Ëmfeldvariabel iwwerschratt ginn. Gutt, well de Standort vum Output Dossier vu Kader zu Kader ënnerscheet, kopéiert Dir einfach de generéierten Output an de Standard Dossier am Bild, nämlech /opt/apt-root/output. Dëst ass wichteg fir de Rescht vun dësem Artikel ze verstoen, awer elo kucke mer séier op déi nächst Etapp - d'Runphase.

lafen Phase

Dës Etapp geschitt wann en Opruff un Docker Run gemaach gëtt op dat neit Bild erstallt wärend der Montagestadium. Datselwecht geschitt wann Dir op der OpenShift Plattform installéiert. Default lafen Skript benotzt déngen Modul fir statesch Inhalt ze déngen, deen am uewe genannte Standardoutputverzeichnis läit.

Dës Method ass gutt fir séier Uwendungen z'installéieren, awer et ass allgemeng net recommandéiert fir statesch Inhalt op dës Manéier ze déngen. Gutt, well mir a Wierklechkeet nëmmen statesch Inhalter servéieren, brauche mir den Node.js net an eisem Bild installéiert - e Webserver geet duer.

An anere Wierder, beim Montage brauche mir eng Saach, beim Ausféierung brauche mir eng aner. An dëser Situatioun, chained baut kommen an praktesch.

Kette baut

Dëst ass wat se schreiwen chained baut an der OpenShift Dokumentatioun:

"Zwee Versammlungen kënne matenee verbonne ginn, mat enger déi eng kompiléiert Entitéit generéiert an déi aner dës Entitéit an engem getrennten Bild hostéiert dat benotzt gëtt fir dës Entitéit ze lafen."

An anere Wierder, mir kënnen de Web App Builder Bild benotze fir eise Build ze lafen, an dann de Webserverbild benotzen, deeselwechten NGINX, fir eisen Inhalt ze déngen.

Sou kënne mir de Web App Builder Bild als "pure" Builder benotzen a gläichzäiteg e klengt Runtime Bild hunn.

Loosst eis dat elo mat engem spezifesche Beispill kucken.

Fir Training wäerte mir benotzen einfach React Applikatioun, erstallt mat dem Create-react-App Kommandozeil Tool.

Et hëlleft eis alles zesummen ze setzen OpenShift Schabloun Datei.

Loosst eis dës Datei méi detailléiert kucken, a fänkt mat der Parametersektioun un.

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

Alles hei ass zimlech kloer, awer et ass derwäert opmierksam op den OUTPUT_DIR Parameter ze bezuelen. Fir d'React Applikatioun an eisem Beispill gëtt et näischt fir Iech Suergen ze maachen, well React benotzt de Standardwäert als Output Dossier, awer am Fall vun Angular oder soss eppes muss dëse Parameter wéi néideg geännert ginn.

Loosst eis elo d'Sektioun ImageStreams kucken.

- 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'

Huelt e Bléck op déi drëtt an véiert Biller. Si sinn allebéid als Docker Biller definéiert, an Dir kënnt kloer gesinn wou se hierkommen.

Dat drëtt Bild ass Web-App-Builder an et kënnt vun Nodeshift/ubi8-s2i-Web-App markéiert 10.x op Docker Hub.

Déi véiert ass en NGINX Bild (Versioun 1.12) mat dem leschten Tag op Docker Hub.

Loosst eis elo déi éischt zwee Biller kucken. Si sinn allebéid eidel beim Start a ginn nëmme während der Bauphase erstallt. Dat éischt Bild, react-web-app-builder, wäert d'Resultat vun engem Montage Schrëtt sinn, deen d'Web-App-Builder-Runtime Bild an eise Quellcode kombinéiere wäert. Dofir hu mir den Numm vun dësem Bild "-Builder" bäigefüügt.

Dat zweet Bild - react-web-app-runtime - wäert d'Resultat vun der Kombinatioun vun nginx-image-runtime an e puer Dateien aus dem react-web-app-builder Bild sinn. Dëst Bild gëtt och während der Détachement benotzt a wäert nëmmen de Webserver an statesch HTML, JavaScript, CSS vun eiser Applikatioun enthalen.

Duercherneen? Loosst eis elo d'Buildkonfiguratiounen kucken an et wäert e bësse méi kloer ginn.

Eis Schabloun huet zwou Baukonfiguratiounen. Hei ass deen éischten, an et ass zimlech Standard:

  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

Wéi Dir gesitt, seet d'Linn mam Label 1 datt d'Resultat vun dësem Build am selwechte React-Web-App-Builder Bild gesat gëtt, dat mir e bësse méi fréi an der ImageStreams Sektioun gesinn hunn.

D'Linn mam Label 2 seet Iech wou Dir de Code kritt. An eisem Fall ass dëst e Git-Repository, an de Standuert, de Ref an de Kontext Ordner ginn duerch d'Parameteren festgeluegt, déi mir schonn uewe gesinn hunn.

D'Linn mam Label 3 ass wat mir schonn an der Parameter Sektioun gesinn hunn. Et füügt d'OUTPUT_DIR Ëmfeldvariabel bäi, déi an eisem Beispill gebaut ass.
D'Linn mam Label 4 seet d'Web-App-Builder-Runtime Bild ze benotzen, wat mir schonn an der ImageStream Sektioun gesinn hunn.

Linn mam Label 5 seet datt mir en inkrementelle Build benotze wëllen wann de S2I Bild et ënnerstëtzt, an de Web App Builder Bild mécht. Beim éischte Start, nodeems d'Versammlungsstadium ofgeschloss ass, späichert d'Bild den Dossier node_modules an eng Archivdatei. Dann, op spéider Runen, wäert d'Bild einfach dësen Dossier unzipen fir d'Bauzäit ze reduzéieren.

A schliisslech ass d'Linn mam Label 6 just e puer Ausléiser fir de Build automatesch ze maachen, ouni manuell Interventioun, wann eppes ännert.

Insgesamt ass dëst eng zimlech Standard Konfiguratioun.

Loosst eis elo déi zweet Baukonfiguratioun kucken. Et ass ganz ähnlech wéi déi éischt, awer et gëtt e wichtegen Ënnerscheed.

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

Also déi zweet Baukonfiguratioun ass react-web-app-runtime, an et fänkt zimlech Standard un.

D'Linn mam Label 1 ass näischt Neies - et seet einfach datt d'Buildresultat an d'React-Web-App-Runtime Bild gesat gëtt.

D'Linn mam Label 2, wéi an der viregter Konfiguratioun, weist wou de Quellcode hierkënnt. Awer bemierkt datt mir hei soen datt et aus dem Bild geholl gëtt. Ausserdeem, vum Bild dat mir just erstallt hunn - vum React-Web-App-Builder (an der Linn markéiert 3 uginn). D'Fichier'en déi mir benotze wëllen sinn am Bild an hir Plaz do ass an der Linn gesat 4, an eisem Fall ass et /opt/app-root/output/. Wann Dir Iech erënnert, ass dëst wou d'Dateien generéiert op Basis vun de Resultater vum Bau vun eiser Applikatioun gespäichert ginn.

Den Destinatiounsdossier, deen am Begrëff mam Label 5 spezifizéiert ass, ass einfach den aktuellen Verzeechnes (dëst ass alles, erënnert Iech, an enger magescher Saach mam Numm OpenShift lafen, an net op Ärem lokalen Computer).

D'Strategie Sektioun - Linn mam Label 6 - ass och ähnlech wéi déi éischt Baukonfiguratioun. Nëmmen dës Kéier wäerte mir nginx-image-runtime benotzen, déi mir schonn an der ImageStream Sektioun gesinn hunn.

Schlussendlech ass d'Linn mam Label 7 eng Sektioun vun Ausléiser déi dësen Build aktivéieren all Kéier wann d'React-Web-App-Builder Bild ännert.

Soss enthält dës Schabloun zimmlech Standard Deployment Konfiguratioun, souwéi Saachen déi op Servicer a Strecken bezéien, awer mir ginn net ze vill Detail an. Notéiert w.e.g. datt d'Bild dat ofgebaut gëtt d'React-Web-App-Runtime Bild ass.

Applikatioun Deployment

Also elo datt mir d'Schabloun gekuckt hunn, loosst eis kucken wéi se se benotze fir eng Applikatioun z'installéieren.

Mir kënnen den OpenShift Client Tool genannt oc benotze fir eis Schabloun z'installéieren:

$ 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

Den éischte Kommando am Screenshot hei uewen ass e bewosst technesche Wee fir eng Schabloun ze fannen./openshiftio/application.yaml.

Den zweeten Kommando erstellt einfach eng nei Applikatioun baséiert op dëser Schabloun.

Nodeems dës Kommandoen funktionnéieren, wäerte mir gesinn datt mir zwou Versammlungen hunn:

A zréck op den Iwwerbléckbildschierm, gesi mir de lancéierte Pod:

Klickt op de Link a mir ginn op eis App geholl, wat d'Standard React App Säit ass:

Supplement 1

Fir Angular Liebhaber hu mir och Beispill Applikatioun.

D'Muster hei ass d'selwecht, ausser fir d'OUTPUT_DIR Variabel.

Supplement 2

An dësem Artikel hu mir NGINX als Webserver benotzt, awer et ass ganz einfach et mat Apache ze ersetzen, ännert just d'Schabloun an der Datei NGINX Bild op Apache Bild.

Konklusioun

Am éischten Deel vun dëser Serie hu mir gewisen wéi séier modern Webapplikatiounen op der OpenShift Plattform ofgebaut ginn. Haut hu mir gekuckt wat e Web App Bild mécht a wéi et mat engem pure Webserver wéi NGINX kombinéiert ka ginn mat chained Builds fir e méi Produktiounsfäheg Applikatiounsbau ze kreéieren. Am nächsten an leschten Artikel an dëser Serie wäerte mir weisen wéi Dir en Entwécklungsserver fir Är Applikatioun op OpenShift leeft an d'Synchroniséierung vu lokalen a Ferndateien garantéieren.

Inhalter vun dëser Serie vun Artikelen

• Deel 1: wéi modern Webapplikatiounen an e puer Schrëtt z'installéieren;
• Deel 2: Wéi benotzt Dir en neit S2I-Bild mat engem existente HTTP-Serverbild, wéi NGINX, mat assoziéierten OpenShift-Versammlungen fir d'Produktiounsinstallatioun;
• Deel 3: wéi Dir en Entwécklungsserver fir Är Applikatioun op der OpenShift Plattform leeft an et mam lokalen Dateiesystem synchroniséiert.

Zousätzlech Ressourcen

• Gratis E-Buch Deploy op OpenShift.
• Informatiounen iwwer OpenShift a Kubernetes.

Source: will.com