Aplikasi modéren dina OpenShift, bagian 2: ngawangun ranté

Halo sadayana! Ieu mangrupikeun pos kadua dina séri kami dimana kami nunjukkeun kumaha nyebarkeun aplikasi wéb modern dina Red Hat OpenShift.

Dina postingan sateuacana, urang rada keuna kana kamampuan gambar pembina S2I (sumber-ka-gambar) énggal, anu dirancang pikeun ngawangun sareng nyebarkeun aplikasi wéb modern dina platform OpenShift. Teras kami kabetot dina topik anu gancang nyebarkeun aplikasi, sareng ayeuna urang bakal ningali kumaha cara ngagunakeun gambar S2I salaku gambar pembina "murni" sareng ngagabungkeun sareng rakitan OpenShift anu aya hubunganana.

Gambar pembina bersih

Sapertos anu disebatkeun dina Bagéan XNUMX, kalolobaan aplikasi wéb modern ngagaduhan anu disebut tahap ngawangun, anu biasana ngalaksanakeun operasi sapertos transpilasi kode, sababaraha panyambungan file, sareng minifikasi. Payil anu dicandak salaku hasil tina operasi ieu - sareng ieu HTML statik, JavaScript sareng CSS - disimpen dina folder kaluaran. Lokasi polder ieu biasana gumantung kana naon alat ngawangun anu dianggo, sareng pikeun React ieu bakal janten folder ./build (urang bakal uih deui kana ieu langkung rinci di handap).

Sumber-ka-Gambar (S2I)

Dina tulisan ieu kami henteu nyabak topik "naon S2I sareng kumaha ngagunakeunana" (anjeun tiasa maca langkung seueur ngeunaan ieu. di dieu), tapi penting pikeun écés ngeunaan dua léngkah dina prosés ieu pikeun ngartos naon anu dilakukeun ku gambar Pangwangun Aplikasi Web.

Fase assembly

Fase assembly pisan sarupa di alam naon kajadian mun anjeun ngajalankeun docker ngawangun sarta mungkas nepi ka gambar Docker anyar. Sasuai, tahap ieu lumangsung nalika ngamimitian ngawangun dina platform OpenShift.

Dina kasus gambar Web App Builder, éta tanggung jawab pikeun masang dependensi aplikasi anjeun sareng ngajalankeun ngawangun. ngumpul naskah. Sacara standar, gambar pembina nganggo konstruk ngawangun npm run, tapi ieu tiasa ditimpa ku variabel lingkungan NPM_BUILD.

Salaku urang ceuk tadi, lokasi rengse, geus diwangun aplikasi gumantung kana naon parabot Anjeun pake. Salaku conto, dina kasus React ieu bakal janten folder ./build, sareng pikeun aplikasi Angular bakal janten folder project_name/dist. Na, sakumaha geus ditémbongkeun dina pos saméméhna, lokasi diréktori kaluaran, nu disetel ka ngawangun sacara standar, bisa overridden ngaliwatan variabel lingkungan OUTPUT_DIR. Nya, sabab lokasi folder kaluaran béda ti kerangka ka kerangka, anjeun ngan saukur nyalin kaluaran anu dihasilkeun kana folder standar dina gambar, nyaéta /opt/apt-root/output. Ieu penting pikeun ngartos sesa artikel ieu, tapi pikeun ayeuna hayu urang gancang kasampak di tahap salajengna - fase ngajalankeun.

fase ngajalankeun

Tahap ieu lumangsung nalika panggero docker run dijieun dina gambar anyar dijieun salila tahap assembly. Hal anu sami kajadian nalika nyebarkeun dina platform OpenShift. Default ngajalankeun skrip ngagunakeun ngawula modul pikeun ngalayanan eusi statik ayana dina diréktori kaluaran baku luhur.

Metoda ieu alus pikeun gancang nyebarkeun aplikasi, tapi umumna henteu dianjurkeun pikeun ngalayanan eusi statik ku cara ieu. Nya, sabab kanyataanna urang ngan ukur ngalayanan eusi statik, urang henteu peryogi Node.js dipasang di jero gambar urang - pangladén wéb bakal cekap.

Dina basa sejen, nalika assembling urang butuh hiji hal, nalika executing urang butuh sejen. Dina kaayaan ieu, ngawangun ranté datang gunana.

Ngawangun rante

Ieu naon maranéhna nulis ngeunaan ngawangun ranté dina dokuméntasi OpenShift:

"Dua majelis tiasa dikaitkeun babarengan, sareng hiji ngahasilkeun éntitas anu disusun sareng anu sanésna nyayogikeun éntitas éta dina gambar anu misah anu dianggo pikeun ngajalankeun éntitas éta."

Kalayan kecap séjén, urang tiasa nganggo gambar Web App Builder pikeun ngajalankeun wangunan urang, lajeng nganggo gambar web server, NGINX sarua, ngawula eusi urang.

Ku kituna, urang tiasa nganggo gambar Web App Builder salaku pembina "murni" sareng dina waktos anu sami gaduh gambar runtime anu alit.

Ayeuna hayu urang nempo ieu kalawan conto husus.

Pikeun latihan urang bakal ngagunakeun aplikasi Réaksi basajan, dijieun ngagunakeun alat garis paréntah create-react-app.

Ieu bakal nulungan urang nempatkeun sagalana babarengan File template OpenShift.

Hayu urang nempo file ieu leuwih jéntré, tur mimitian ku bagian parameter.

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

Sagalana di dieu cukup jelas, tapi éta patut nengetan parameter OUTPUT_DIR. Pikeun aplikasi React dina conto urang, teu aya anu hariwang, sabab React nganggo nilai standar salaku folder kaluaran, tapi dina kasus Angular atanapi anu sanés, parameter ieu kedah dirobih upami diperyogikeun.

Ayeuna hayu urang tingali dina bagian ImageStreams.

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

Tingali dina gambar katilu jeung kaopat. Duanana diartikeun salaku gambar Docker, sareng anjeun tiasa jelas ningali ti mana asalna.

Gambar katilu nyaéta web-app-builder sareng asalna tina nodeshift/ubi8-s2i-web-app tagged 10.x on Docker hub.

Kaopat nyaéta gambar NGINX (versi 1.12) kalayan tag panganyarna dina Docker hub.

Ayeuna hayu urang nempo dua gambar munggaran. Duanana kosong dina mimiti sareng didamel ngan ukur dina tahap ngawangun. Gambar kahiji, meta-web-app-builder, bakal hasil tina léngkah assembly anu bakal ngagabungkeun gambar web-app-builder-runtime jeung kode sumber urang. Éta pisan sababna naha urang ditambahkeun "-builder" kana nami gambar ieu.

Gambar kadua - react-web-app-runtime - bakal hasil tina ngagabungkeun nginx-image-runtime sareng sababaraha file tina gambar réact-web-app-builder. Gambar ieu ogé bakal dianggo nalika panyebaran sareng ngan ukur ngandung pangladén wéb sareng HTML statik, JavaScript, CSS tina aplikasi urang.

Lieur? Ayeuna hayu urang tingali konfigurasi ngawangun sareng éta bakal langkung jelas.

Témplat kami ngagaduhan dua konfigurasi ngawangun. Ieu anu munggaran, sareng éta lumayan standar:

  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

Sakumaha anjeun tiasa tingali, garis kalawan labél 1 nyebutkeun yén hasil tina ngawangun ieu bakal ditempatkeun dina sarua réaksi-web-aplikasi-pembina gambar nu urang nempo saeutik saméméhna dina bagian ImageStreams.

Garis dilabélan 2 ngabejaan Anjeun dimana meunang kode ti. Dina kasus urang, ieu mangrupikeun gudang git, sareng lokasi, ref sareng folder kontéks ditangtukeun ku parameter anu parantos urang tingali di luhur.

Garis anu dilabélan 3 mangrupikeun anu parantos urang tingali dina bagian parameter. Éta nambihan variabel lingkungan OUTPUT_DIR, anu dina conto urang ngawangun.
Garis anu dilabélan 4 nyarios nganggo gambar web-app-builder-runtime, anu parantos kami tingali dina bagian ImageStream.

Garis dilabélan 5 nyebutkeun yen urang hoyong ngagunakeun hiji ngawangun Incremental lamun gambar S2I ngarojong eta, sarta gambar Web App Pangwangun teu. Dina peluncuran kahiji, sanggeus tahap assembly réngsé, gambar bakal nyimpen folder node_modules kana file arsip. Lajeng, dina ngajalankeun saterusna, gambar saukur bakal unzip folder ieu pikeun ngurangan waktu ngawangun.

Sarta pamustunganana, garis dilabélan 6 ngan sababaraha micu sangkan ngawangun ngajalankeun otomatis, tanpa campur manual, lamun hal robah.

Gemblengna ieu mangrupikeun konfigurasi ngawangun standar anu lumayan.

Ayeuna hayu urang tingali dina konfigurasi ngawangun kadua. Éta pisan mirip sareng anu munggaran, tapi aya hiji bédana anu penting.

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

Janten konfigurasi ngawangun anu kadua nyaéta réaksi-web-app-runtime, sareng éta dimimitian sacara standar.

Garis anu dilabélan 1 sanés énggal - éta ngan ukur nyarios yén hasil ngawangun dilebetkeun kana gambar réact-web-app-runtime.

Garis dilabélan 2, sakumaha dina konfigurasi saméméhna, nunjukkeun dimana meunang kodeu sumber. Tapi perhatikeun yén di dieu urang nyarios yén éta dicandak tina gambar. Leuwih ti éta, tina gambar nu urang ngan dijieun - ti meta-web-app-builder (dituduhkeun dina garis dilabélan 3). Payil anu urang hoyong pake aya di jero gambar sareng lokasina disetél dina garis anu dilabélan 4, dina hal urang nyaéta /opt/app-root/output/. Upami anjeun émut, ieu mangrupikeun file anu didamel dumasar kana hasil ngawangun aplikasi urang disimpen.

Folder tujuan anu ditetepkeun dina istilah sareng labél 5 ngan saukur diréktori ayeuna (ieu sadayana, émut, ngajalankeun di jero sababaraha hal gaib anu disebut OpenShift, sanés dina komputer lokal anjeun).

Bagian strategi - garis dilabélan 6 - ogé sami sareng konfigurasi ngawangun munggaran. Ngan waktos ayeuna urang badé nganggo nginx-image-runtime, anu parantos urang tingali dina bagian ImageStream.

Tungtungna, garis anu dilabélan 7 mangrupikeun bagian tina pemicu anu bakal ngaktifkeun gedong ieu unggal waktos gambar réact-web-app-builder.

Upami teu kitu, template ieu ngandung konfigurasi deployment geulis baku, kitu ogé hal anu patali jeung jasa jeung ruteu, tapi urang moal balik kana nu teuing jéntré. Perhatikeun yén gambar anu bakal disebarkeun nyaéta gambar réact-web-app-runtime.

Panyebaran Aplikasi

Janten ayeuna urang parantos ningali template, hayu urang tingali kumaha cara ngagunakeunana pikeun nyebarkeun aplikasi.

Urang tiasa nganggo alat klien OpenShift anu disebut oc pikeun nyebarkeun template kami:

$ 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

Paréntah munggaran dina screenshot di luhur mangrupakeun cara ngahaja rékayasa pikeun manggihan template./openshiftio/application.yaml.

Paréntah kadua ngan saukur nyiptakeun aplikasi énggal dumasar kana citakan ieu.

Saatos paréntah ieu jalan, urang bakal ningali yén urang gaduh dua rakitan:

Sareng uih deui ka layar Tinjauan, urang bakal ningali pod anu diluncurkeun:

Pencét tautan sareng kami bakal dibawa ka aplikasi kami, nyaéta halaman React App standar:

Suplemén 1

Pikeun pencinta sudut kami ogé boga conto aplikasi.

Pola di dieu sami, iwal variabel OUTPUT_DIR.

Suplemén 2

Dina artikel ieu kami nganggo NGINX salaku pangladén wéb, tapi cukup gampang pikeun ngagentos éta ku Apache, ngan ukur robih template dina file. gambar NGINX dina Gambar Apache.

kacindekan

Dina bagian mimiti séri ieu, kami nunjukkeun kumaha gancang nyebarkeun aplikasi wéb modern dina platform OpenShift. Dinten ieu kami ningal naon gambar Web App sareng kumaha éta tiasa digabungkeun sareng pangladén wéb murni sapertos NGINX nganggo ngawangun ranté pikeun nyiptakeun aplikasi anu langkung siap produksi. Dina artikel salajengna sareng ahir dina séri ieu, kami bakal nunjukkeun kumaha ngajalankeun server pangembangan pikeun aplikasi anjeun dina OpenShift sareng mastikeun sinkronisasi file lokal sareng jauh.

Eusi runtuyan artikel ieu

• Bagian 1: kumaha cara nyebarkeun aplikasi wéb modern dina sababaraha léngkah;
• Bagian 2: Kumaha ngagunakeun gambar S2I anyar sareng gambar server HTTP anu tos aya, sapertos NGINX, nganggo rakitan OpenShift anu aya hubunganana pikeun panyebaran produksi;
• Bagian 3: kumaha ngajalankeun server pamekaran pikeun aplikasi anjeun dina platform OpenShift sareng singkronkeun sareng sistem file lokal.

Sumberdaya tambahan

• E-buku gratis Deploying ka OpenShift.
• Émbaran on OpenShift sareng Kubernetes.

sumber: www.habr.com