OpenShift-dagi zamonaviy ilovalar, 2-qism: zanjirli tuzilmalar

Hammaga salom! Bu Red Hat OpenShift-da zamonaviy veb-ilovalarni qanday joylashtirishni ko'rsatuvchi seriyamizdagi ikkinchi post.

Oldingi postda biz OpenShift platformasida zamonaviy veb-ilovalarni yaratish va joylashtirish uchun mo'ljallangan yangi S2I (manbadan tasvirga) quruvchi tasvirining imkoniyatlariga biroz to'xtalib o'tdik. Keyin biz ilovani tezda joylashtirish mavzusiga qiziqdik va bugun biz S2I tasvirini "sof" yaratuvchi tasvir sifatida qanday ishlatishni va uni tegishli OpenShift yig'ilishlari bilan birlashtirishni ko'rib chiqamiz.

Toza quruvchi tasvir

XNUMX-qismda aytib o'tganimizdek, zamonaviy veb-ilovalarning ko'pchiligi odatda kod o'tkazish, bir nechta fayllarni birlashtirish va kichiklashtirish kabi operatsiyalarni bajaradigan qurish bosqichiga ega. Ushbu operatsiyalar natijasida olingan fayllar - va bu statik HTML, JavaScript va CSS - chiqish papkasida saqlanadi. Ushbu jildning joylashuvi odatda qaysi qurilish vositalaridan foydalanilayotganiga bog'liq va React uchun bu ./build papkasi bo'ladi (bu haqda quyida batafsilroq qaytamiz).

Manbadan tasvirga (S2I)

Ushbu postda biz "S2I nima va undan qanday foydalanish kerak" mavzusiga tegmaymiz (bu haqida ko'proq o'qishingiz mumkin. shu yerda), lekin Web App Builder tasviri nima qilishini tushunish uchun ushbu jarayonning ikki bosqichini aniq bilish muhimdir.

Yig'ish bosqichi

Yig'ish bosqichi tabiatan docker Build ishga tushirilganda sodir bo'ladigan va yangi Docker tasviri bilan tugashiga juda o'xshaydi. Shunga ko'ra, bu bosqich OpenShift platformasida qurilishni boshlashda sodir bo'ladi.

Web App Builder tasviri bo'lsa, u ilovangizning bog'liqliklarini o'rnatish va qurishni ishga tushirish uchun javobgardir. skript yig'ish. Odatiy bo'lib, quruvchi tasviri npm run Build konstruksiyasidan foydalanadi, lekin uni NPM_BUILD muhit o'zgaruvchisi orqali bekor qilish mumkin.

Yuqorida aytib o'tganimizdek, tayyor, allaqachon qurilgan dasturning joylashuvi qaysi vositalardan foydalanganingizga bog'liq. Misol uchun, React holatida bu ./build papkasi bo'ladi va burchakli ilovalar uchun bu loyiha_nomi/dist papkasi bo'ladi. Va oldingi postda ko'rsatilganidek, sukut bo'yicha qurish uchun o'rnatilgan chiqish katalogining joylashuvi OUTPUT_DIR muhit o'zgaruvchisi orqali bekor qilinishi mumkin. Xo'sh, chiqish papkasining joylashuvi ramkadan ramkaga farq qilganligi sababli, siz yaratilgan mahsulotni rasmdagi standart papkaga, ya'ni /opt/apt-root/outputga ko'chirasiz. Ushbu maqolaning qolgan qismini tushunish uchun bu juda muhim, ammo hozircha keyingi bosqichni - yugurish bosqichini ko'rib chiqaylik.

yugurish bosqichi

Ushbu bosqich montaj bosqichida yaratilgan yangi tasvirda docker ishga qo'ng'iroq qilinganda sodir bo'ladi. Xuddi shu narsa OpenShift platformasida joylashtirishda sodir bo'ladi. Standart skriptni ishga tushiring ispolzet xizmat moduli yuqoridagi standart chiqish katalogida joylashgan statik tarkibga xizmat ko'rsatish.

Bu usul ilovalarni tez joylashtirish uchun yaxshi, lekin odatda statik tarkibni shu tarzda taqdim etish tavsiya etilmaydi. Haqiqatda biz faqat statik tarkibga xizmat qilganimiz uchun rasmimizga Node.js oʻrnatilishi shart emas – veb-server yetarli boʻladi.

Boshqacha qilib aytganda, yig'ishda bizga bitta narsa kerak, bajarishda esa boshqa narsa kerak. Bunday vaziyatda zanjirli tuzilmalar yordam beradi.

Zanjirlangan tuzilmalar

Ular bu haqda yozadilar zanjirli tuzilmalar OpenShift hujjatlarida:

"Ikki assambleyani bir-biriga bog'lash mumkin, ulardan biri kompilyatsiya qilingan ob'ektni yaratadi, ikkinchisi esa ushbu ob'ektni ishga tushirish uchun foydalaniladigan alohida rasmda joylashtiradi."

Boshqacha qilib aytganda, biz tuzilmani ishga tushirish uchun Web App Builder tasviridan foydalanishimiz mumkin, so‘ngra kontentimizga xizmat ko‘rsatish uchun veb-server tasviridan, xuddi shu NGINX dan foydalanishimiz mumkin.

Shunday qilib, biz Web App Builder tasviridan "sof" quruvchi sifatida foydalanishimiz va shu bilan birga kichik ish vaqti tasviriga ega bo'lishimiz mumkin.

Endi buni aniq bir misol bilan ko'rib chiqaylik.

Trening uchun biz foydalanamiz oddiy React ilovasi, create-react-app buyruq qatori vositasi yordamida yaratilgan.

Bu bizga hamma narsani birlashtirishga yordam beradi OpenShift shablon fayli.

Keling, ushbu faylni batafsil ko'rib chiqamiz va parametrlar bo'limidan boshlaymiz.

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

Bu erda hamma narsa juda aniq, lekin OUTPUT_DIR parametriga e'tibor qaratish lozim. Bizning misolimizdagi React ilovasi uchun tashvishlanadigan hech narsa yo'q, chunki React chiqish papkasi sifatida standart qiymatdan foydalanadi, ammo Angular yoki boshqa narsada bu parametr kerak bo'lganda o'zgartirilishi kerak bo'ladi.

Endi ImageStreams bo'limini ko'rib chiqamiz.

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

Uchinchi va to'rtinchi rasmlarga qarang. Ularning ikkalasi ham Docker tasvirlari sifatida belgilangan va siz ularning qaerdan kelganini aniq ko'rishingiz mumkin.

Uchinchi rasm web-app-builder bo'lib, u nodeshift/ubi8-s2i-web-ilovasidan 10.x bilan belgilangan. Docker markazi.

Toʻrtinchisi, eng soʻnggi tegi yoqilgan NGINX tasviri (versiya 1.12). Docker markazi.

Endi birinchi ikkita rasmni ko'rib chiqaylik. Ularning ikkalasi ham boshida bo'sh va faqat qurish bosqichida yaratiladi. Birinchi rasm, react-web-app-builder, veb-ilova-yaratish-ish vaqti tasvirini va bizning manba kodimizni birlashtirgan yig'ish bosqichining natijasi bo'ladi. Shuning uchun biz ushbu rasm nomiga "-builder" ni qo'shdik.

Ikkinchi rasm - react-web-app-runtime - nginx-image-runtime va react-web-app-builder tasviridagi ba'zi fayllarni birlashtirish natijasi bo'ladi. Ushbu rasm o'rnatish vaqtida ham ishlatiladi va faqat veb-server va ilovamizning statik HTML, JavaScript, CSS-ni o'z ichiga oladi.

Adashib qoldingizmi? Endi qurilish konfiguratsiyasini ko'rib chiqamiz va u biroz aniqroq bo'ladi.

Bizning shablonimizda ikkita konfiguratsiya mavjud. Mana birinchisi va u juda standart:

  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

Ko'rib turganingizdek, 1-yorlig'i bo'lgan qatorda aytilishicha, ushbu tuzilish natijasi ImageStreams bo'limida biroz oldinroq ko'rgan veb-ilovalar yaratuvchisi tasviriga joylashtiriladi.

2 bilan belgilangan qator kodni qayerdan olish kerakligini aytadi. Bizning holatda, bu git ombori bo'lib, joylashuv, ref va kontekst papkasi biz yuqorida ko'rgan parametrlar bilan belgilanadi.

3 deb belgilangan chiziq biz allaqachon parametrlar bo'limida ko'rgan narsadir. U OUTPUT_DIR muhit o'zgaruvchisini qo'shadi, bu bizning misolimizda tuzilgan.
4 bilan belgilangan qatorda biz allaqachon ImageStream bo'limida ko'rgan veb-ilova-quruvchi-ish vaqti tasviridan foydalanish kerakligi aytiladi.

5 yorlig'i bilan belgilangan qatorda aytilishicha, agar S2I tasviri qo'llab-quvvatlasa va Web App Builder tasviri qo'llab-quvvatlasa, biz qo'shimcha tuzilmadan foydalanmoqchimiz. Birinchi ishga tushirishda, yig'ish bosqichi tugagandan so'ng, tasvir node_modules papkasini arxiv faylida saqlaydi. Keyin, keyingi ishga tushirishda, rasm yaratish vaqtini qisqartirish uchun ushbu jildni shunchaki ochadi.

Va nihoyat, 6-belgilangan chiziq, biror narsa o'zgarganda, qo'lda aralashuvisiz, qurilishni avtomatik ravishda ishga tushirish uchun bir nechta tetikdir.

Umuman olganda, bu juda standart qurilish konfiguratsiyasi.

Endi ikkinchi konfiguratsiyani ko'rib chiqamiz. Bu birinchisiga juda o'xshaydi, lekin bitta muhim farq bor.

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

Shunday qilib, ikkinchi qurish konfiguratsiyasi react-web-app-runtime hisoblanadi va u juda standart bo'lib boshlanadi.

1 deb belgilangan qator yangilik emas - bu shunchaki qurilish natijasi react-web-app-runtime tasviriga kiritilishini aytadi.

Oldingi konfiguratsiyada bo'lgani kabi 2 deb belgilangan qator manba kodini qayerdan olish kerakligini ko'rsatadi. Ammo e'tibor bering, bu erda biz tasvirdan olinganligini aytmoqdamiz. Bundan tashqari, biz yaratgan rasmdan - react-web-app-builder-dan (3-bandda ko'rsatilgan). Biz foydalanmoqchi bo'lgan fayllar rasm ichida va ularning joylashuvi 4-yorliqli qatorda o'rnatiladi, bizning holatlarimizda bu /opt/app-root/output/. Esingizda bo'lsa, bu erda bizning ilovamizni yaratish natijalari asosida yaratilgan fayllar saqlanadi.

5-yorlig'i bilan atamada ko'rsatilgan maqsad papkasi shunchaki joriy katalogdir (bularning barchasi sizning mahalliy kompyuteringizda emas, balki OpenShift deb nomlangan sehrli narsaning ichida ishlaydi).

Strategiya bo'limi - 6 yorlig'i bilan belgilangan qator ham birinchi qurish konfiguratsiyasiga o'xshaydi. Faqat bu safar biz ImageStream bo'limida ko'rgan nginx-image-runtime dan foydalanamiz.

Nihoyat, 7 deb belgilangan qator tetiklar bo'limi bo'lib, har safar react-web-app-builder tasviri o'zgarganda ushbu tuzilmani faollashtiradi.

Aks holda, ushbu shablon juda standart joylashtirish konfiguratsiyasini, shuningdek, xizmatlar va marshrutlarga tegishli narsalarni o'z ichiga oladi, ammo biz bu haqda juda ko'p tafsilotlarga kirmaymiz. E'tibor bering, o'rnatiladigan rasm react-web-app-runtime tasviridir.

Ilovani joylashtirish

Endi biz shablonni ko'rib chiqdik, keling, dasturni joylashtirish uchun undan qanday foydalanishni ko'rib chiqamiz.

Shablonimizni joylashtirish uchun oc deb nomlangan OpenShift mijoz vositasidan foydalanishimiz mumkin:

$ 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

Yuqoridagi skrinshotdagi birinchi buyruq shablonni topishning atayin muhandislik usulidir./openshiftio/application.yaml.

Ikkinchi buyruq shunchaki ushbu shablon asosida yangi dastur yaratadi.

Ushbu buyruqlar ishlagandan so'ng, bizda ikkita assambleya borligini ko'ramiz:

Va Umumiy Tasavvur ekraniga qaytsak, biz ishga tushirilgan podni ko'ramiz:

Havolani bosing va biz ilovamizga o'tamiz, bu standart React ilovasi sahifasi:

Qoʻshimcha 1

Burchakni sevuvchilar uchun bizda ham bor misol ilovasi.

Bu erda naqsh bir xil, OUTPUT_DIR o'zgaruvchisidan tashqari.

Qoʻshimcha 2

Ushbu maqolada biz NGINX-dan veb-server sifatida foydalandik, lekin uni Apache bilan almashtirish juda oson, shunchaki fayldagi shablonni o'zgartiring. NGINX tasviri haqida Apache tasvir.

xulosa

Ushbu seriyaning birinchi qismida biz OpenShift platformasida zamonaviy veb-ilovalarni qanday tezda joylashtirishni ko'rsatdik. Bugun biz veb-ilova tasviri nima qilishini va uni zanjirli tuzilmalardan foydalangan holda NGINX kabi sof veb-server bilan qanday qilib ishlab chiqarishga tayyor ilovalar majmuasini yaratishni ko'rib chiqdik. Ushbu seriyadagi keyingi va yakuniy maqolada biz OpenShift-da ilovangiz uchun ishlab chiqish serverini qanday ishga tushirishni va mahalliy va masofaviy fayllarni sinxronlashtirishni ta'minlashni ko'rsatamiz.

Ushbu maqolalar turkumining mazmuni

• 1-qism: bir necha qadamda zamonaviy veb-ilovalarni qanday joylashtirish;
• 2-qism: NGINX kabi mavjud HTTP server tasviri bilan yangi S2I tasvirini ishlab chiqarishni joylashtirish uchun bog'langan OpenShift yig'indilaridan qanday foydalanish kerak;
• 3-qism: OpenShift platformasida ilovangiz uchun ishlab chiqish serverini qanday ishga tushirish va uni mahalliy fayl tizimi bilan sinxronlashtirish.

Dopolnitelnye resursy

• Bepul elektron kitob OpenShift-ga o'rnatish.
• haqida ma'lumot OpenShift va Kubernetes.

Manba: www.habr.com