ProHoster > Блог > Administrasi > Aplikasi modern ing OpenShift, part 2: chained mbangun

Aplikasi modern ing OpenShift, part 2: chained mbangun

Hello everyone! Sugeng rawuh ing kiriman nomer loro ing seri kita sing nuduhake cara masang aplikasi web modern ing Red Hat OpenShift.

Aplikasi modern ing OpenShift, part 2: chained mbangun

Ing kirim sadurunge, kita sedhela ndemek kapabilitas gambar pembangun S2I (sumber-kanggo-gambar) anyar, sing dirancang kanggo mbangun lan nyebarake aplikasi web modern ing platform OpenShift. Nalika iku, kita kasengsem ing topik penyebaran aplikasi kanthi cepet, lan dina iki kita bakal nimbang cara nggunakake gambar S2I minangka gambar pembangun "resik" lan gabungke karo mbangun OpenShift sing gegandhengan.

Gambar pembangun sing resik

Kaya sing wis kasebut ing Bagean 1, umume aplikasi web modern duwe tahap mbangun, sing biasane nindakake operasi kayata transpilasi kode, gabungan pirang-pirang file, lan minifikasi. File sing diasilake - HTML statis, JavaScript, lan CSS - dilebokake ing folder output. Lokasi folder iki biasane gumantung marang alat mbangun sing digunakake, lan kanggo React, bakal dadi folder ./build (kita bakal ngerti luwih rinci ing ngisor iki).

Sumber-kanggo-Gambar (S2I)

Ing kirim iki kita ora ndemek topik "apa S2I lan carane nggunakake" (sampeyan bisa maca liyane babagan iki kene kene), nanging penting kanggo duwe pangerten sing jelas babagan rong tahapan proses iki kanggo ngerti apa sing ditindakake gambar Web App Builder.

Fase perakitan

Langkah perakitan meh padha karo apa sing kedadeyan nalika sampeyan mbukak docker build lan mungkasi gambar Docker anyar. Mulane, langkah iki kedadeyan nalika mbangun ing platform OpenShift.

Ing cilik saka gambar Web App Builder, iku tanggung jawab kanggo nginstal dependensi aplikasi lan mbukak mbangun. ngumpulake naskahKanthi gawan, gambar builder nggunakake npm run build construct, nanging iki bisa diganti liwat variabel lingkungan NPM_BUILD.

Kaya sing wis dingerteni sadurunge, lokasi aplikasi sing wis rampung lan wis dibangun gumantung karo alat sing sampeyan gunakake. Contone, ing kasus React, iki bakal dadi folder ./build, lan kanggo aplikasi Angular, folder project_name/dist. Lan, kaya sing ditampilake ing kirim sadurunge, lokasi direktori output, sing disetel kanggo dibangun kanthi standar, bisa diganti liwat variabel lingkungan OUTPUT_DIR. Inggih, amarga lokasi folder output beda-beda saka framework kanggo framework, sampeyan mung nyalin output kui menyang folder standar ing gambar, yaiku /opt/apt-root/output. Iki penting kanggo mangerteni sisa artikel iki, nanging saiki, ayo cepet ndeleng tahap sabanjure - peluncuran (fase run).

Fase mlaku

Tahap iki kedadeyan nalika panggilan docker run digawe menyang gambar anyar sing digawe nalika tahap perakitan. Iki uga kedadeyan nalika nindakake penyebaran ing platform OpenShift. Kanthi gawan mbukak script nggunakake modul ngawula kanggo ngawula isi statis dumunung ing direktori output standar kasebut ing ndhuwur.

Cara iki apik kanggo nyebarake aplikasi kanthi cepet, nanging umume ora dianjurake kanggo ngladeni konten statis kanthi cara iki. Ya, amarga kita pancene mung ngladeni konten statis, kita ora mbutuhake Node.js diinstal ing gambar kita - server web bakal cukup.

Ing tembung liyane, kita butuh siji bab nalika mbangun, lan liyane nalika mlaku. Ing kahanan kaya mengkono, rentengan mbangun bakal migunani.

Rentengan mbangun

Iki apa padha nulis bab rentengan mbangun ing dokumentasi OpenShift:

"Loro majelis bisa disambungake bebarengan, kanthi siji ngasilake entitas sing disusun lan sijine sijine entitas kasebut menyang gambar kapisah sing digunakake kanggo mbukak entitas kasebut."

Ing tembung liyane, kita bisa nggunakake gambar Web App Builder kanggo mbukak mbangun kita, banjur nggunakake gambar server web, NGINX padha, kanggo ngawula isi kita.

Kanthi cara iki kita bisa nggunakake gambar Web App Builder minangka pembangun "murni" lan isih duwe gambar runtime cilik.

Saiki ayo ndeleng iki nggunakake conto tartamtu.

Kanggo latihan kita bakal nggunakake aplikasi reaksi prasaja, digawe nggunakake alat baris perintah create-react-app.

Kanggo nggawa kabeh bebarengan, kita bakal bantuan dening File template OpenShift.

Ayo goleki file iki kanthi luwih cetha, diwiwiti saka bagean paramèter.

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

Iki kabeh cukup jelas, nanging kudu digatekake parameter OUTPUT_DIR. Kanggo aplikasi React saka conto kita, ora ana sing kudu kuwatir, amarga React nggunakake nilai standar minangka folder output, nanging ing kasus Angular utawa liya, parameter iki kudu diganti yen perlu.

Saiki ayo deleng bagean 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'

Deleng gambar katelu lan kaping papat. Loro-lorone ditetepake minangka gambar Docker, lan sampeyan bisa ndeleng kanthi jelas saka ngendi asale.

Gambar katelu yaiku web-app-builder lan asale saka nodeshift/ubi8-s2i-web-app kanthi tag 10.x ing Docker Hub.

Sing nomer papat yaiku gambar NGINX (versi 1.12) kanthi tag paling anyar Docker Hub.

Saiki ayo ndeleng rong gambar pisanan. Loro-lorone kosong ing wiwitan lan mung digawe sajrone tahap mbangun. Gambar pisanan, react-web-app-builder, bakal dadi asil saka fase ngumpul, sing bakal nggabungake gambar web-app-builder-runtime lan kode sumber kita. Mulane kita kalebu "-builder" ing jeneng gambar iki.

Gambar kapindho, react-web-app-runtime, bakal dadi asil gabungan nginx-image-runtime lan sawetara file saka gambar react-web-app-builder. Gambar iki uga bakal digunakake kanggo panyebaran lan mung ngemot server web lan HTML statis, JavaScript, CSS aplikasi kita.

Bingung? Ayo goleki konfigurasi mbangun lan bakal dadi luwih jelas.

Ana rong konfigurasi mbangun ing cithakan kita. Iki sing pisanan, lan cukup 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

Minangka kita bisa ndeleng, baris karo label 1 ngandika yen asil saka mbangun iki bakal diselehake ing padha react-web-app-builder gambar sing kita weruh sethitik sadurungé ing bagean ImageStreams.

Baris kanthi label 2 ngandhani saka ngendi entuk kode kasebut. Ing kasus kita, iku gudang git, lan lokasi, ref, lan folder konteks ditetepake dening paramèter sing wis kita deleng ing ndhuwur.

Baris kanthi label 3 yaiku apa sing wis kita deleng ing bagean paramèter. Nambahake variabel lingkungan OUTPUT_DIR, sing ing conto kita padha karo mbangun.
Baris kanthi label 4 ngandhani supaya nggunakake gambar web-app-builder-runtime sing wis kita deleng ing bagean ImageStream.

Line labeled 5 ngandika yen kita pengin nggunakake bangunan tambahan yen gambar S2I ndhukung, lan gambar Web App Builder. Ing wiwitan, sawise langkah perakitan rampung, gambar bakal nyimpen folder node_modules menyang file arsip. Banjur ing sakteruse mlaku, gambar mung bakal unzip folder kasebut kanggo nyuda wektu mbangun.

Lan pungkasane, label baris 6 mung sawetara pemicu supaya mbangun bisa mlaku kanthi otomatis, tanpa intervensi manual, nalika ana owah-owahan.

Sakabèhé, iki minangka konfigurasi mbangun standar sing cukup.

Saiki ayo goleki konfigurasi bangunan kapindho. Iku meh padha karo pisanan, nanging ana siji prabédan 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

Dadi, konfigurasi mbangun kapindho yaiku react-web-app-runtime, lan diwiwiti kanthi standar.

Ora ana sing anyar ing baris kanthi label 1 - mung ujar manawa output mbangun dilebokake ing gambar react-web-app-runtime.

Baris kanthi label 2, kaya ing konfigurasi sadurunge, nemtokake saka ngendi njupuk kode sumber. Nanging elinga yen ing kene kita ngomong yen dijupuk saka gambar kasebut. Lan saka gambar sing lagi wae digawe - saka react-web-app-builder (ditemtokake ing baris karo label 3). File sing pengin digunakake ana ing gambar kasebut lan lokasi kasebut ditemtokake ing baris kanthi label 4, ing kasus kita yaiku /opt/app-root/output/. Yen sampeyan ngelingi, iki ngendi file sing digawe minangka asil saka mbangun aplikasi kita disimpen.

Folder tujuan sing ditemtokake ing baris kanthi label 5 mung direktori saiki (kabeh iki, elinga, muter ing sawetara perkara gaib sing diarani OpenShift, lan ora ing komputer lokal sampeyan).

Bagean strategi - baris kanthi label 6 - uga padha karo konfigurasi mbangun pisanan. Mung wektu iki kita bakal nggunakake nginx-image-runtime, sing wis kita deleng ing bagean ImageStream.

Pungkasan, baris kanthi label 7 minangka bagean pemicu sing bakal micu mbangun iki saben-saben gambar react-web-app-builder diganti.

Yen ora, Cithakan iki ngemot konfigurasi penyebaran cukup standar, uga bab layanan lan rute, nanging kita ora bakal pindhah menyang. Elinga yen gambar sing bakal disebarake yaiku gambar react-web-app-runtime.

Panyebaran Aplikasi

Dadi saiki kita wis ndeleng cithakan kasebut, ayo ndeleng cara nggunakake aplikasi kasebut kanggo nyebarake aplikasi kasebut.

Kita bisa nggunakake alat klien OpenShift sing diarani oc kanggo masang cithakan:

$ 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

Printah pisanan ing gambar ing ndhuwur minangka cara kanthi sengaja kanggo nemokake template./openshiftio/application.yaml.

Printah kapindho mung nggawe aplikasi anyar adhedhasar cithakan iki.

Sawise printah iki wis mlaku, kita bakal weruh yen kita duwe rong majelis:

Aplikasi modern ing OpenShift, part 2: chained mbangun

Lan bali menyang layar Ringkesan, kita bakal weruh pod sing diluncurake:

Aplikasi modern ing OpenShift, part 2: chained mbangun

Ngeklik link bakal nggawa kita menyang aplikasi kita, yaiku kaca React App standar:

Aplikasi modern ing OpenShift, part 2: chained mbangun

Tambahan 1

Kanggo penyayang Angular kita uga duwe conto aplikasi.

Cithakan ing kene padha, kajaba kanggo variabel OUTPUT_DIR.

Tambahan 2

Ing artikel iki kita nggunakake NGINX minangka server web, nanging cukup gampang kanggo ngganti karo Apache, mung ngganti template ing file. gambar NGINX ing Gambar Apache.

kesimpulan

Ing bagean pisanan saka seri iki, kita nuduhake carane cepet masang aplikasi web modern ing platform OpenShift. Dina iki, kita ndeleng apa gambar Web App lan carane bisa digabungake karo server web murni kaya NGINX nggunakake chain chain kanggo mbangun aplikasi sing luwih siap produksi. Ing artikel sabanjure lan pungkasan ing seri iki, kita bakal nuduhake carane mbukak server pangembangan kanggo aplikasi sampeyan ing OpenShift lan nyimpen file lokal lan remot ing sinkronisasi.

Isi saka seri artikel iki

  • Bagean 1: Cara masang aplikasi web modern mung sawetara langkah;
  • Part 2: Cara nggunakake gambar S2I anyar bebarengan karo gambar server HTTP sing wis ana, kayata NGINX, nggunakake OpenShift sing disambung kanggo nyiyapake penyebaran produksi;
  • Part 3: Cara mbukak server pangembangan kanggo aplikasi sampeyan ing platform OpenShift lan nyelarasake karo sistem file lokal.

Sumber Daya Tambahan

Source: www.habr.com

Tuku hosting sing dipercaya kanggo situs kanthi proteksi DDoS, server VPS VDS 🔥 Tuku hosting situs web sing bisa dipercaya nganggo proteksi DDoS, server VPS VDS | ProHoster