Hai semua! Ini adalah siaran kedua dalam siri kami yang menunjukkan cara untuk menggunakan aplikasi web moden pada Red Hat OpenShift.
Dalam catatan sebelumnya, kami menyentuh sedikit tentang keupayaan imej pembina S2I (sumber-ke-imej) baharu, yang direka untuk membina dan menggunakan aplikasi web moden pada platform OpenShift. Kemudian kami berminat dengan topik menggunakan aplikasi dengan cepat, dan hari ini kami akan melihat cara menggunakan imej S2I sebagai imej pembina "tulen" dan menggabungkannya dengan pemasangan OpenShift yang berkaitan.
Imej pembina bersih
Seperti yang kami nyatakan dalam Bahagian XNUMX, kebanyakan aplikasi web moden mempunyai apa yang dipanggil peringkat binaan, yang biasanya menjalankan operasi seperti transpilasi kod, gabungan berbilang fail dan minifikasi. Fail yang diperoleh hasil daripada operasi ini - dan ini adalah HTML statik, JavaScript dan CSS - disimpan dalam folder output. Lokasi folder ini biasanya bergantung pada alat binaan yang digunakan, dan untuk React ini akan menjadi folder ./build (kami akan kembali kepada perkara ini dengan lebih terperinci di bawah).
Sumber-ke-Imej (S2I)
Dalam siaran ini kami tidak menyentuh topik "apa itu S2I dan cara menggunakannya" (anda boleh membaca lebih lanjut mengenai ini ), tetapi penting untuk mengetahui dengan jelas tentang dua langkah dalam proses ini untuk memahami perkara yang dilakukan oleh imej Pembina Apl Web.
Fasa pemasangan
Fasa pemasangan sangat serupa dengan apa yang berlaku apabila anda menjalankan binaan docker dan berakhir dengan imej Docker baharu. Sehubungan itu, peringkat ini berlaku apabila memulakan binaan pada platform OpenShift.
Dalam kes imej Web App Builder, ia bertanggungjawab untuk memasang kebergantungan aplikasi anda dan menjalankan binaan. . Secara lalai, imej pembina menggunakan binaan binaan run npm, tetapi ini boleh ditindih melalui pembolehubah persekitaran NPM_BUILD.
Seperti yang kami katakan sebelum ini, lokasi aplikasi siap, sudah dibina bergantung pada alat yang anda gunakan. Sebagai contoh, dalam kes React ini akan menjadi folder ./build, dan untuk aplikasi Angular ia akan menjadi folder project_name/dist. Dan, seperti yang telah ditunjukkan dalam catatan sebelumnya, lokasi direktori output, yang ditetapkan untuk dibina secara lalai, boleh ditindih melalui pembolehubah persekitaran OUTPUT_DIR. Oleh kerana lokasi folder output berbeza dari rangka kerja ke rangka kerja, anda hanya menyalin output yang dihasilkan ke folder standard dalam imej, iaitu /opt/apt-root/output. Ini penting untuk memahami seluruh artikel ini, tetapi buat masa ini mari kita lihat dengan cepat pada peringkat seterusnya - fasa larian.
fasa larian
Peringkat ini berlaku apabila panggilan ke docker run dibuat pada imej baharu yang dibuat semasa peringkat pemasangan. Perkara yang sama berlaku apabila menggunakan platform OpenShift. Lalai kegunaan untuk menyampaikan kandungan statik yang terdapat dalam direktori output standard di atas.
Kaedah ini bagus untuk menggunakan aplikasi dengan cepat, tetapi secara amnya tidak disyorkan untuk menyediakan kandungan statik dengan cara ini. Oleh kerana sebenarnya kami hanya menyediakan kandungan statik, kami tidak memerlukan Node.js dipasang di dalam imej kami - pelayan web sudah memadai.
Dalam erti kata lain, apabila memasang kita memerlukan satu perkara, apabila melaksanakan kita memerlukan yang lain. Dalam keadaan ini, binaan berantai berguna.
Binaan berantai
Inilah yang mereka tulis dalam dokumentasi OpenShift:
"Dua perhimpunan boleh dipautkan bersama, dengan satu menghasilkan entiti yang disusun dan satu lagi menganjurkan entiti itu dalam imej berasingan yang digunakan untuk menjalankan entiti itu."
Dalam erti kata lain, kami boleh menggunakan imej Web App Builder untuk menjalankan binaan kami, dan kemudian menggunakan imej pelayan web, NGINX yang sama, untuk menyampaikan kandungan kami.
Oleh itu, kita boleh menggunakan imej Web App Builder sebagai pembina "tulen" dan pada masa yang sama mempunyai imej masa jalan yang kecil.
Sekarang mari kita lihat ini dengan contoh khusus.
Untuk latihan kami akan gunakan , dibuat menggunakan alat baris arahan create-react-app.
Ia akan membantu kami menyusun segala-galanya .
Mari lihat fail ini dengan lebih terperinci, dan mulakan dengan bahagian 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
Segala-galanya di sini cukup jelas, tetapi ia patut diberi perhatian kepada parameter OUTPUT_DIR. Untuk aplikasi React dalam contoh kami, tiada apa yang perlu dibimbangkan, kerana React menggunakan nilai lalai sebagai folder output, tetapi dalam kes Angular atau sesuatu yang lain, parameter ini perlu diubah mengikut keperluan.
Sekarang mari kita lihat bahagian 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'
Lihat gambar ketiga dan keempat. Kedua-duanya ditakrifkan sebagai imej Docker, dan anda boleh melihat dengan jelas dari mana asalnya.
Imej ketiga ialah web-app-builder dan ia datang daripada nodeshift/ubi8-s2i-web-app berteg 10.x pada .
Yang keempat ialah imej NGINX (versi 1.12) dengan teg terkini dihidupkan .
Sekarang mari kita lihat dua imej pertama. Kedua-duanya kosong pada permulaan dan dibuat hanya semasa fasa binaan. Imej pertama, react-web-app-builder, akan menjadi hasil daripada langkah pemasangan yang akan menggabungkan imej web-app-builder-runtime dan kod sumber kami. Itulah sebabnya kami menambahkan "-builder" pada nama imej ini.
Imej kedua - react-web-app-runtime - akan menjadi hasil gabungan nginx-image-runtime dan beberapa fail daripada imej react-web-app-builder. Imej ini juga akan digunakan semasa penggunaan dan hanya akan mengandungi pelayan web dan HTML statik, JavaScript, CSS aplikasi kami.
keliru? Sekarang mari kita lihat konfigurasi binaan dan ia akan menjadi lebih jelas sedikit.
Templat kami mempunyai dua konfigurasi binaan. Inilah yang pertama, dan ia agak 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
Seperti yang anda lihat, baris dengan label 1 mengatakan bahawa hasil binaan ini akan diletakkan dalam imej pembangun apl-reaksi-web yang sama yang kami lihat sedikit lebih awal dalam bahagian Arus Imej.
Baris berlabel 2 memberitahu anda dari mana untuk mendapatkan kod itu. Dalam kes kami, ini adalah repositori git, dan lokasi, ref dan folder konteks ditentukan oleh parameter yang telah kami lihat di atas.
Garis berlabel 3 ialah apa yang telah kita lihat dalam bahagian parameter. Ia menambah pembolehubah persekitaran OUTPUT_DIR, yang dalam contoh kami ialah bina.
Baris berlabel 4 mengatakan untuk menggunakan imej web-app-builder-runtime, yang telah kita lihat dalam bahagian ImageStream.
Baris berlabel 5 mengatakan bahawa kami ingin menggunakan binaan tambahan jika imej S2I menyokongnya dan imej Pembina Apl Web melakukannya. Pada pelancaran pertama, selepas peringkat pemasangan selesai, imej akan menyimpan folder node_modules ke dalam fail arkib. Kemudian, pada larian berikutnya, imej hanya akan membuka zip folder ini untuk mengurangkan masa binaan.
Dan akhirnya, baris berlabel 6 hanyalah beberapa pencetus untuk menjadikan binaan berjalan secara automatik, tanpa campur tangan manual, apabila sesuatu berubah.
Secara keseluruhan ini adalah konfigurasi binaan yang cukup standard.
Sekarang mari kita lihat konfigurasi binaan kedua. Ia sangat serupa dengan yang pertama, tetapi terdapat satu perbezaan 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
Jadi konfigurasi binaan kedua ialah react-web-app-runtime, dan ia bermula dengan agak standard.
Baris berlabel 1 bukanlah sesuatu yang baharu - ia hanya mengatakan bahawa hasil binaan dimasukkan ke dalam imej masa jalan-aplikasi-web-react.
Baris berlabel 2, seperti dalam konfigurasi sebelumnya, menunjukkan dari mana untuk mendapatkan kod sumber. Tetapi perhatikan bahawa di sini kita mengatakan bahawa ia diambil dari imej. Selain itu, daripada imej yang baru kami buat - daripada react-web-app-builder (ditunjukkan dalam baris berlabel 3). Fail yang ingin kami gunakan berada di dalam imej dan lokasinya di sana ditetapkan dalam baris berlabel 4, dalam kes kami ia adalah /opt/app-root/output/. Jika anda masih ingat, di sinilah fail yang dijana berdasarkan hasil pembinaan aplikasi kami disimpan.
Folder destinasi yang dinyatakan dalam istilah dengan label 5 hanyalah direktori semasa (ini sahaja, ingat, berjalan di dalam beberapa perkara ajaib yang dipanggil OpenShift, dan bukan pada komputer tempatan anda).
Bahagian strategi β baris berlabel 6 β juga serupa dengan konfigurasi binaan pertama. Hanya kali ini kita akan menggunakan nginx-image-runtime, yang telah kita lihat dalam bahagian ImageStream.
Akhir sekali, baris berlabel 7 ialah bahagian pencetus yang akan mengaktifkan binaan ini setiap kali imej react-web-app-builder berubah.
Jika tidak, templat ini mengandungi konfigurasi penggunaan yang agak standard, serta perkara yang berkaitan dengan perkhidmatan dan laluan, tetapi kami tidak akan menerangkan terlalu banyak perincian itu. Sila ambil perhatian bahawa imej yang akan digunakan ialah imej react-web-app-runtime.
Penyerahan Aplikasi
Jadi sekarang setelah kita melihat templat, mari lihat cara menggunakannya untuk menggunakan aplikasi.
Kami boleh menggunakan alat klien OpenShift yang dipanggil oc untuk menggunakan templat 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
Perintah pertama dalam tangkapan skrin di atas ialah cara yang sengaja direkayasa untuk mencari templat./openshiftio/application.yaml.
Perintah kedua hanya mencipta aplikasi baharu berdasarkan templat ini.
Selepas arahan ini berfungsi, kita akan melihat bahawa kita mempunyai dua perhimpunan:
Dan kembali ke skrin Gambaran Keseluruhan, kita akan melihat pod yang dilancarkan:
Klik pautan dan kami akan dibawa ke apl kami, iaitu halaman React App lalai:
Tambahan 1
Untuk pencinta Angular kami juga ada .
Corak di sini adalah sama, kecuali pembolehubah OUTPUT_DIR.
Tambahan 2
Dalam artikel ini kami menggunakan NGINX sebagai pelayan web, tetapi agak mudah untuk menggantikannya dengan Apache, cuma tukar templat dalam fail pada .
Kesimpulan
Dalam bahagian pertama siri ini, kami menunjukkan cara menggunakan aplikasi web moden dengan cepat pada platform OpenShift. Hari ini kita melihat apa yang dilakukan oleh imej Apl Web dan cara ia boleh digabungkan dengan pelayan web tulen seperti NGINX menggunakan binaan berantai untuk mencipta binaan aplikasi yang lebih sedia pengeluaran. Dalam artikel seterusnya dan terakhir dalam siri ini, kami akan menunjukkan cara untuk menjalankan pelayan pembangunan untuk aplikasi anda pada OpenShift dan memastikan penyegerakan fail tempatan dan jauh.
Kandungan siri artikel ini
- Bahagian 1: ;
- Bahagian 2: Cara menggunakan imej S2I baharu dengan imej pelayan HTTP sedia ada, seperti NGINX, menggunakan pemasangan OpenShift yang berkaitan untuk penggunaan pengeluaran;
- Bahagian 3: bagaimana untuk menjalankan pelayan pembangunan untuk aplikasi anda pada platform OpenShift dan menyegerakkannya dengan sistem fail tempatan.
Sumber tambahan
- E-book percuma .
- Maklumat mengenai .
Sumber: www.habr.com