Halo kabeh! Iki minangka kiriman nomer loro ing seri sing nuduhake cara masang aplikasi web modern ing Red Hat OpenShift.
Ing kirim sadurunge, kita rada nyentuh babagan kemampuan gambar pembangun S2I (sumber-kanggo-gambar) anyar, sing dirancang kanggo mbangun lan nggunakake aplikasi web modern ing platform OpenShift. Banjur kita padha kasengsem ing topik cepet deploying aplikasi, lan dina iki kita bakal katon ing carane nggunakake gambar S2I minangka gambar "murni" builder lan gabungke karo kumpulan OpenShift related.
Gambar pembangun sing resik
Kaya sing wis kasebut ing Bagean XNUMX, umume aplikasi web modern duwe tahap mbangun, sing biasane nindakake operasi kayata transpilasi kode, pirang-pirang gabungan file, lan minifikasi. File sing dipikolehi minangka asil saka operasi kasebut - lan iki minangka HTML statis, JavaScript lan CSS - disimpen ing folder output. Lokasi folder iki biasane gumantung marang alat mbangun sing digunakake, lan kanggo React iki bakal dadi folder ./build (kita bakal bali menyang iki kanthi 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 ), nanging penting kanggo ngerti babagan rong langkah ing proses iki kanggo mangerteni apa gambar Web App Builder.
Fase perakitan
Tahap perakitan meh padha karo apa sing kedadeyan nalika sampeyan mbukak docker build lan mungkasi gambar Docker anyar. Dadi, tahap iki kedadeyan nalika miwiti mbangun ing platform OpenShift.
Ing cilik saka gambar Web App Builder, iku tanggung jawab kanggo nginstal dependensi aplikasi lan mbukak mbangun. . Kanthi gawan, gambar builder nggunakake npm run build construct, nanging iki bisa diganti liwat variabel lingkungan NPM_BUILD.
Kaya sing wis dakkandhakake sadurunge, lokasi aplikasi sing wis rampung lan wis dibangun gumantung saka alat sing sampeyan gunakake. Contone, ing kasus React iki bakal dadi folder ./build, lan kanggo aplikasi Angular bakal dadi folder project_name/dist. Lan, kaya sing wis ditampilake ing kirim sadurunge, lokasi direktori output, sing disetel kanggo dibangun kanthi gawan, 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 - fase run.
fase run
Tahap iki kedadeyan nalika telpon docker run digawe ing gambar anyar sing digawe nalika tahap perakitan. Sing padha kedadeyan nalika nyebarake ing platform OpenShift. Default nggunakake kanggo ngawula isi statis dumunung ing direktori output standar ndhuwur.
Cara iki apik kanggo nyebarake aplikasi kanthi cepet, nanging umume ora dianjurake kanggo ngladeni konten statis kanthi cara iki. Ya, amarga sejatine kita mung ngladeni konten statis, kita ora mbutuhake Node.js diinstal ing gambar kita - server web bakal cukup.
Ing tembung liya, nalika ngrakit kita butuh siji, nalika nglakokake kita butuh liyane. Ing kahanan iki, rentengan mbangun dadi migunani.
Rentengan mbangun
Iki apa padha nulis bab ing dokumentasi OpenShift:
"Loro majelis bisa disambungake bebarengan, kanthi siji ngasilake entitas sing dikompilasi lan liyane hosting entitas kasebut ing 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.
Mangkono, kita bisa nggunakake gambar Web App Builder minangka pembangun "murni" lan ing wektu sing padha duwe gambar runtime cilik.
Saiki ayo ndeleng iki kanthi conto tartamtu.
Kanggo latihan kita bakal nggunakake , digawe nggunakake alat baris perintah create-react-app.
Iku bakal mbantu kita sijine kabeh bebarengan .
Ayo ndeleng file iki kanthi luwih rinci, lan miwiti 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
Kabeh ing kene cukup jelas, nanging kudu digatekake parameter OUTPUT_DIR. Kanggo aplikasi React ing 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 .
Kaping papat yaiku gambar NGINX (versi 1.12) kanthi tag paling anyar .
Saiki ayo ndeleng rong gambar pisanan. Loro-lorone kosong ing wiwitan lan digawe mung sajrone tahap mbangun. Gambar pisanan, react-web-app-builder, bakal dadi asil saka langkah perakitan sing bakal nggabungake gambar web-app-builder-runtime lan kode sumber kita. Pramila kita nambahake "-builder" kanggo 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 sajrone panyebaran lan mung ngemot server web lan HTML statis, JavaScript, CSS aplikasi kita.
Bingung? Saiki ayo goleki konfigurasi mbangun lan bakal dadi luwih jelas.
Cithakan kita duwe rong konfigurasi mbangun. 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
Kaya sing sampeyan ngerteni, baris kanthi label 1 ujar manawa asil saka mbangun iki bakal diselehake ing gambar react-web-app-builder sing padha karo sing katon sadurunge ing bagean ImageStreams.
Baris kanthi label 2 ngandhani sampeyan saka ngendi entuk kode kasebut. Ing kasus kita, iki minangka gudang git, lan lokasi, ref lan folder konteks ditemtokake dening paramèter sing wis kita deleng ing ndhuwur.
Baris sing diwenehi label 3 yaiku sing wis kita deleng ing bagean paramèter. Iku nambah variabel lingkungan OUTPUT_DIR, kang ing conto kita mbangun.
Baris sing dilabeli 4 ujar 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 peluncuran pisanan, sawise tahap perakitan rampung, gambar bakal nyimpen folder node_modules menyang file arsip. Banjur, ing sakteruse, gambar bakal mbukak zip folder iki kanggo nyuda wektu mbangun.
Lan pungkasanipun, baris labeled 6 mung sawetara pemicu kanggo nggawe mbangun mlaku kanthi otomatis, tanpa intervensi manual, nalika ana owah-owahan.
Sakabèhé iki konfigurasi mbangun standar cantik.
Saiki ayo goleki konfigurasi bangunan kapindho. Iku meh padha karo sing 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.
Baris kanthi label 1 ora ana sing anyar - mung ujar manawa asil mbangun dilebokake ing gambar react-web-app-runtime.
Baris kanthi label 2, kaya ing konfigurasi sadurunge, nuduhake saka ngendi entuk kode sumber. Nanging sok dong mirsani sing kene kita ngomong sing dijupuk saka gambar. Kajaba iku, saka gambar sing lagi wae digawe - saka react-web-app-builder (dituduhake ing baris kanthi label 3). File sing arep kita gunakake ana ing gambar kasebut lan lokasi kasebut disetel ing baris kanthi label 4, ing kasus kita yaiku /opt/app-root/output/. Yen sampeyan ngelingi, iki ngendi file sing digawe adhedhasar asil mbangun aplikasi kita disimpen.
Folder tujuan sing ditemtokake ing istilah kanthi label 5 mung direktori saiki (iki kabeh, elinga, mlaku 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 saka pemicu sing bakal ngaktifake mbangun iki saben-saben gambar react-web-app-builder diganti.
Yen ora, cithakan iki ngandhut konfigurasi penyebaran cukup standar, uga bab sing ana hubungane karo layanan lan rute, nanging kita ora bakal rinci banget. 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.
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 bisa digunakake, kita bakal weruh yen kita duwe rong majelis:
Lan bali menyang layar Ringkesan, kita bakal weruh pod sing diluncurake:
Klik link lan kita bakal digawa menyang app kita, yaiku kaca React App standar:
Tambahan 1
Kanggo penyayang Angular kita uga duwe .
Pola 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. ing .
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 nggawe 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 njamin sinkronisasi file lokal lan remot.
Isi saka seri artikel iki
- Bagean 1: ;
- Part 2: Cara nggunakake gambar S2I anyar karo gambar server HTTP sing wis ana, kayata NGINX, nggunakake rakitan OpenShift sing gegandhengan kanggo panyebaran produksi;
- Part 3: carane mbukak server pangembangan kanggo aplikasi sampeyan ing platform OpenShift lan nyinkronake karo sistem file lokal.
Sumber Daya Tambahan
- E-book gratis .
- Informasi babagan .
Source: www.habr.com