Dalam dua posting sebelumnya, kita membahas cara menerapkan aplikasi web modern hanya dalam beberapa langkah, dan cara menggunakan image S2I baru bersama dengan image server HTTP yang sudah jadi seperti NGINX menggunakan build berantai untuk penerapan produksi.
Hari ini kami akan menunjukkan kepada Anda cara menjalankan server pengembangan untuk aplikasi Anda di platform OpenShift dan menyinkronkannya dengan sistem file lokal, serta berbicara tentang apa itu OpenShift Pipelines dan bagaimana Anda dapat menggunakannya sebagai alternatif untuk rakitan tertaut.
OpenShift sebagai lingkungan pengembangan
Alur kerja pengembangan
Seperti dibahas di posting pertama , alur kerja pengembangan khas untuk aplikasi web modern hanyalah "server pengembangan" yang memantau perubahan ke file lokal. Ketika itu terjadi, pembuatan aplikasi dimulai dan kemudian diperbarui ke browser.
Di sebagian besar kerangka kerja modern, "server pengembangan" ini dibangun ke dalam alat baris perintah yang sesuai.
Contoh lokal
Pertama, mari kita lihat cara kerjanya dalam kasus menjalankan aplikasi secara lokal. Mari kita ambil aplikasi React dari artikel sebelumnya sebagai contoh , meskipun banyak konsep alur kerja yang sama berlaku untuk semua kerangka kerja modern lainnya.
Jadi, untuk memulai "server pengembangan" dalam contoh React kami, kami mengeluarkan perintah berikut:
$ npm run start
Kemudian di jendela terminal kita akan melihat sesuatu seperti berikut:
Dan aplikasi kita akan terbuka di browser default:
Sekarang, jika kita melakukan perubahan pada file, maka aplikasi tersebut harus diperbarui di browser.
Oke, dengan pengembangan lokal semuanya jelas, tetapi bagaimana cara mencapai hal yang sama di OpenShift?
Server pengembangan di OpenShift
Jika Anda ingat, di posting sebelumnya , kami menganalisis apa yang disebut fase run dari gambar S2I dan melihat bahwa secara default modul servis bertanggung jawab untuk melayani aplikasi web kami.
Namun, jika Anda melihat lebih dekat pada skrip run dari contoh itu, Anda akan melihat bahwa itu berisi variabel lingkungan $ NPM_RUN, yang memungkinkan Anda untuk menjalankan perintah Anda sendiri.
Misalnya, kita dapat menggunakan modul nodeshift untuk menerapkan aplikasi kita:
$ npx nodeshift --deploy.env NPM_RUN="yarn start" --dockerImage=nodeshift/ubi8-s2i-web-app
Catatan: Contoh di atas disingkat untuk mengilustrasikan gagasan umum.
Di sini kami telah menambahkan variabel lingkungan NPM_RUN ke penerapan kami, yang memberi tahu runtime untuk menjalankan perintah mulai benang, yang memulai server pengembangan React di dalam pod OpenShift kami.
Jika Anda melihat log dari pod yang sedang berjalan, maka akan muncul sesuatu seperti berikut:
Tentu saja, ini semua tidak akan berarti apa-apa sampai kita dapat menyinkronkan kode lokal dengan kode yang juga dipantau perubahannya, tetapi hidup di server jarak jauh.
Sinkronisasi remote dan kode lokal
Untungnya, nodeshift dapat dengan mudah membantu sinkronisasi, dan Anda dapat menggunakan perintah jam tangan untuk melacak perubahan.
Jadi setelah kita menjalankan perintah untuk menyebarkan server pengembangan untuk aplikasi kita, kita dapat dengan aman menggunakan perintah berikut:
$ npx nodeshift watch
Hasilnya, koneksi akan dibuat ke pod yang sedang berjalan, yang kami buat lebih awal, sinkronisasi file lokal kami dengan kluster jarak jauh akan diaktifkan, dan file di sistem lokal kami akan dipantau untuk perubahan.
Oleh karena itu, jika sekarang kita memperbarui file src / App.js, sistem akan bereaksi terhadap perubahan ini, menyalinnya ke kluster jarak jauh dan memulai server pengembangan, yang kemudian akan memperbarui aplikasi kita di browser.
Untuk kelengkapan, mari kita tunjukkan bagaimana perintah ini terlihat secara keseluruhan:
$ npx nodeshift --strictSSL=false --dockerImage=nodeshift/ubi8-s2i-web-app --build.env YARN_ENABLED=true --expose --deploy.env NPM_RUN="yarn start" --deploy.port 3000
$ npx nodeshift watch --strictSSL=false
Perintah watch adalah abstraksi di atas perintah oc rsync, Anda dapat mempelajari lebih lanjut tentang cara kerjanya di sini .
Ini adalah contoh untuk React, tetapi metode yang sama persis dapat digunakan dengan framework lain, cukup setel variabel lingkungan NPM_RUN sesuai kebutuhan.
Saluran Pipa Terbuka
Selanjutnya, kita akan berbicara tentang alat seperti OpenShift Pipelines dan bagaimana alat itu dapat digunakan sebagai alternatif untuk build berantai.
Apa itu OpenShift Pipelines
OpenShift Pipelines adalah sistem pengiriman dan integrasi berkelanjutan CI / CD berbasis cloud untuk mengatur pipeline menggunakan Tekton. Tekton adalah framework CI / CD bawaan Kubernetes yang fleksibel dan open source yang mengotomatiskan penerapan di seluruh platform (Kubernetes, tanpa server, mesin virtual, dll.) Dengan mengabstraksi dari lapisan yang mendasarinya.
Beberapa pengetahuan tentang Pipelines diperlukan untuk memahami artikel ini, jadi kami sangat menyarankan Anda untuk membaca tutorial resmi terlebih dahulu .
Menyiapkan lingkungan kerja
Untuk bermain-main dengan contoh dalam artikel ini, Anda harus menyiapkan lingkungan produksi terlebih dahulu:
- OpenShift 4. CodeReady Containers (CRD), .
- , , Pipeline Operator. , , .
- Tekton CLI (tkn) .
- create-react-app, , ( React).
- () , npm install npm start.
Repositori aplikasi juga akan memiliki folder k8s, tempat Kubernetes / OpenShift YAML yang digunakan untuk menerapkan aplikasi akan ditempatkan. Akan ada Tasks, ClusterTasks, Resource dan Pipelines yang akan kita buat di repositori ini .
Mari kita mulai
Langkah pertama untuk contoh kami adalah membuat proyek baru di cluster OpenShift. Mari kita sebut proyek ini webapp-pipeline dan membuatnya dengan perintah berikut:
$ oc new-project webapp-pipeline
Selanjutnya, nama proyek ini akan muncul di kode, jadi jika Anda memutuskan untuk menamainya dengan nama lain, jangan lupa untuk mengedit kode dari contoh yang sesuai. Mulai dari titik ini, kita tidak akan pergi dari atas ke bawah, tetapi dari bawah ke atas: yaitu, pertama-tama kita akan membuat semua komponen konveyor, dan baru kemudian itu sendiri.
Jadi, pertama-tama ...
Tugas
Mari buat beberapa tugas yang kemudian akan membantu kita menerapkan aplikasi dalam pipeline kita. Tugas pertama, apply_manifests_task, bertanggung jawab untuk menerapkan YAML ke sumber daya Kubernetes tersebut (layanan, penerapan, dan rute) yang terletak di folder k8s aplikasi kita. Tugas kedua - update_deployment_task - bertanggung jawab untuk memperbarui image yang sudah di-deploy ke image yang dibuat oleh pipeline kita.
Jangan khawatir jika belum jelas. Sebenarnya, tugas-tugas ini seperti utilitas, dan kami akan membahasnya lebih detail nanti. Untuk saat ini, mari buat saja:
$ oc create -f https://raw.githubusercontent.com/nodeshift/webapp-pipeline-tutorial/master/tasks/update_deployment_task.yaml
$ oc create -f https://raw.githubusercontent.com/nodeshift/webapp-pipeline-tutorial/master/tasks/apply_manifests_task.yaml
Kemudian, dengan menggunakan perintah tkn CLI, periksa apakah tugas telah dibuat:
$ tkn task ls
NAME AGE
apply-manifests 1 minute ago
update-deployment 1 minute ago
Catatan: ini adalah tugas lokal dari proyek Anda saat ini.
Tugas cluster
Tugas yang dikelompokkan pada dasarnya sama dengan tugas sederhana. Artinya, ini adalah kumpulan langkah-langkah yang dapat digunakan kembali yang digabungkan dengan satu atau lain cara saat memulai tugas tertentu. Perbedaannya adalah bahwa tugas cluster tersedia di mana saja di dalam cluster. Untuk melihat daftar tugas cluster yang secara otomatis dibuat saat Operator Pipa ditambahkan, gunakan lagi perintah tkn CLI:
$ tkn clustertask ls
NAME AGE
buildah 1 day ago
buildah-v0-10-0 1 day ago
jib-maven 1 day ago
kn 1 day ago
maven 1 day ago
openshift-client 1 day ago
openshift-client-v0-10-0 1 day ago
s2i 1 day ago
s2i-go 1 day ago
s2i-go-v0-10-0 1 day ago
s2i-java-11 1 day ago
s2i-java-11-v0-10-0 1 day ago
s2i-java-8 1 day ago
s2i-java-8-v0-10-0 1 day ago
s2i-nodejs 1 day ago
s2i-nodejs-v0-10-0 1 day ago
s2i-perl 1 day ago
s2i-perl-v0-10-0 1 day ago
s2i-php 1 day ago
s2i-php-v0-10-0 1 day ago
s2i-python-3 1 day ago
s2i-python-3-v0-10-0 1 day ago
s2i-ruby 1 day ago
s2i-ruby-v0-10-0 1 day ago
s2i-v0-10-0 1 day ago
Sekarang mari kita buat dua tugas cluster. Yang pertama akan menghasilkan gambar S2I dan mengirimkannya ke registri OpenShift internal; yang kedua adalah membangun image berbasis NGINX kita menggunakan aplikasi yang telah kita rakit sebagai konten.
Buat dan kirim gambar
Saat membuat tugas pertama, kami akan mengulangi apa yang telah kami lakukan di artikel sebelumnya tentang rakitan tertaut. Ingatlah bahwa kita menggunakan image S2I (ubi8-s2i-web-app) untuk "membangun" aplikasi kita dan berakhir dengan image yang disimpan di registry internal OpenShift. Kami sekarang akan menggunakan gambar S2I dari aplikasi web ini untuk membuat DockerFile untuk aplikasi kami, dan kemudian menggunakan Buildah untuk melakukan pembuatan yang sebenarnya dan mendorong gambar yang dihasilkan ke registri internal OpenShift, karena inilah yang dilakukan OpenShift saat Anda menerapkan milik Anda. aplikasi yang menggunakan NodeShift.
Bagaimana kami tahu semua ini, Anda bertanya? Dari versi resmi Node.js resmi , kami baru saja menyalinnya dan menyelesaikannya sendiri.
Jadi, sekarang kita membuat tugas cluster s2i-web-app:
$ oc create -f https://raw.githubusercontent.com/nodeshift/webapp-pipeline-tutorial/master/clustertasks/s2i-web-app-task.yaml
Kami tidak akan membahas secara detail tentang ini, tetapi hanya memikirkan parameter OUTPUT_DIR:
params:
- name: OUTPUT_DIR
description: The location of the build output directory
default: build
Secara default, parameter ini disetel ke build, yang mana React meletakkan konten yang dikumpulkan. Kerangka kerja lain menggunakan jalur yang berbeda, misalnya Ember menggunakan dist. Output dari tugas cluster pertama kita adalah gambar yang berisi HTML, JavaScript, dan CSS yang telah kita kumpulkan.
Membangun gambar berdasarkan NGINX
Adapun tugas cluster kedua kami, itu harus mengumpulkan gambar berbasis NGINX untuk kami menggunakan konten aplikasi yang telah kami kumpulkan. Pada dasarnya, ini adalah bagian dari bagian sebelumnya di mana kita melihat build yang dirantai.
Untuk melakukan ini, kita - dengan cara yang sama seperti di atas - membuat tugas cluster webapp-build-runtime:
$ oc create -f https://raw.githubusercontent.com/nodeshift/webapp-pipeline-tutorial/master/clustertasks/webapp-build-runtime-task.yaml
Jika Anda melihat kode untuk tugas cluster ini, Anda dapat melihat bahwa repositori Git yang kami gunakan atau nama gambar yang kami buat tidak ditentukan di sana. Kami hanya menentukan apa yang kami transfer ke Git, atau gambar tertentu, di mana gambar akhir harus ditampilkan. Inilah mengapa tugas cluster ini dapat digunakan kembali saat bekerja dengan aplikasi lain.
Dan di sini kita dengan anggun melanjutkan ke poin berikutnya ...
Sumber daya
Jadi, karena, seperti yang baru saja kita katakan, tugas cluster harus digeneralisasikan mungkin, kita perlu membuat sumber daya yang akan digunakan dalam input (repositori Git) dan output (gambar akhir). Sumber daya pertama yang kita butuhkan adalah Git tempat aplikasi kita berada, seperti ini:
# This resource is the location of the git repo with the web application source
apiVersion: tekton.dev/v1alpha1
kind: PipelineResource
metadata:
name: web-application-repo
spec:
type: git
params:
- name: url
value: https://github.com/nodeshift-starters/react-pipeline-example
- name: revision
value: master
Di sini PipelineResource berjenis git. Kunci url di bagian params menunjuk ke repositori tertentu dan menyetel cabang master (ini opsional, tetapi kami menulisnya untuk kelengkapan).
Sekarang kita perlu membuat sumber daya untuk gambar, di mana hasil tugas s2i-web-app akan disimpan, ini dilakukan seperti ini:
# This resource is the result of running "npm run build", the resulting built files will be located in /opt/app-root/output
apiVersion: tekton.dev/v1alpha1
kind: PipelineResource
metadata:
name: built-web-application-image
spec:
type: image
params:
- name: url
value: image-registry.openshift-image-registry.svc:5000/webapp-pipeline/built-web-application:latest
Di sini PipelineResource adalah jenis gambar, dan nilai parameter url mengarah ke Registri Gambar OpenShift internal, khususnya yang ada di namespace pipeline webapp. Ingatlah untuk mengubah parameter ini jika Anda menggunakan namespace yang berbeda.
Dan terakhir, sumber daya terakhir yang kita butuhkan juga akan menjadi jenis gambar dan ini akan menjadi gambar NGINX terakhir, yang kemudian akan digunakan selama penerapan:
# This resource is the image that will be just the static html, css, js files being run with nginx
apiVersion: tekton.dev/v1alpha1
kind: PipelineResource
metadata:
name: runtime-web-application-image
spec:
type: image
params:
- name: url
value: image-registry.openshift-image-registry.svc:5000/webapp-pipeline/runtime-web-application:latest
Sekali lagi, perhatikan bahwa sumber daya ini menyimpan gambar di registri OpenShift internal di namespace pipeline webapp.
Untuk membuat semua sumber daya ini sekaligus, gunakan perintah create:
$ oc create -f https://raw.githubusercontent.com/nodeshift/webapp-pipeline-tutorial/master/resources/resource.yaml
Anda dapat memastikan bahwa sumber daya telah dibuat seperti ini:
$ tkn resource ls
Pipa pipa
Sekarang kita memiliki semua komponen yang diperlukan, kita akan merakit pipeline dari mereka, membuatnya dengan perintah berikut:
$ oc create -f https://raw.githubusercontent.com/nodeshift/webapp-pipeline-tutorial/master/pipelines/build-and-deploy-react.yaml
Tapi, sebelum menjalankan perintah ini, mari kita lihat komponen-komponen ini. Yang pertama adalah namanya:
apiVersion: tekton.dev/v1alpha1
kind: Pipeline
metadata:
name: build-and-deploy-react
Kemudian, di bagian spesifikasi, kita melihat indikasi sumber daya yang kita buat sebelumnya:
spec:
resources:
- name: web-application-repo
type: git
- name: built-web-application-image
type: image
- name: runtime-web-application-image
type: image
Kami kemudian membuat tugas untuk diselesaikan pipeline kami. Pertama-tama, dia harus menjalankan tugas s2i-web-app yang telah kita buat:
tasks:
- name: build-web-application
taskRef:
name: s2i-web-app
kind: ClusterTask
Tugas ini mengambil parameter input (gir-resource) dan output (built-web-application-image resource). Kami juga memberikannya parameter khusus sehingga tidak memverifikasi TLS karena kami menggunakan sertifikat yang ditandatangani sendiri:
resources:
inputs:
- name: source
resource: web-application-repo
outputs:
- name: image
resource: built-web-application-image
params:
- name: TLSVERIFY
value: "false"
Tugas selanjutnya hampir sama, hanya saja di sini tugas cluster webapp-build-runtime yang sudah dibuat dipanggil:
name: build-runtime-image
taskRef:
name: webapp-build-runtime
kind: ClusterTask
Seperti tugas sebelumnya, kita meneruskan sumber daya, tetapi sekarang ini adalah gambar aplikasi web bawaan (keluaran dari tugas sebelumnya). Dan sebagai output, kami mengatur gambar lagi. Karena tugas ini harus dilakukan setelah yang sebelumnya, kami menambahkan bidang runAfter:
resources:
inputs:
- name: image
resource: built-web-application-image
outputs:
- name: image
resource: runtime-web-application-image
params:
- name: TLSVERIFY
value: "false"
runAfter:
- build-web-application
Dua tugas berikutnya bertanggung jawab untuk menerapkan file YAML untuk layanan, rute, dan penerapan yang ada di direktori k8s aplikasi web kita, dan juga untuk memperbarui penerapan ini saat membuat gambar baru. Kami menetapkan dua tugas cluster ini di awal artikel.
Menjalankan konveyor
Jadi, semua bagian pipeline kami dibuat, dan kami akan memulainya dengan perintah berikut:
$ tkn pipeline start build-and-deploy-react
Pada tahap ini, baris perintah digunakan secara interaktif dan Anda perlu memilih sumber daya yang sesuai untuk menanggapi setiap permintaannya: untuk sumber daya git, pilih web-application-repo, lalu untuk sumber daya gambar pertama, pilih built-web-application-image, dan terakhir untuk sumber gambar kedua –runtime-web-application-image:
? Choose the git resource to use for web-application-repo: web-application-repo (https://github.com/nodeshift-starters/react-pipeline-example)
? Choose the image resource to use for built-web-application-image: built-web-application-image (image-registry.openshift-image-registry.svc:5000/webapp-pipeline/built-web-
application:latest)
? Choose the image resource to use for runtime-web-application-image: runtime-web-application-image (image-registry.openshift-image-registry.svc:5000/webapp-pipeline/runtim
e-web-application:latest)
Pipelinerun started: build-and-deploy-react-run-4xwsr
Sekarang mari kita periksa status pipeline dengan perintah berikut:
$ tkn pipeline logs -f
Setelah pipeline dimulai dan aplikasi diterapkan, kami meminta rute yang dipublikasikan dengan perintah berikut:
$ oc get route react-pipeline-example --template='http://{{.spec.host}}'
Untuk visibilitas lebih, Anda dapat melihat pipeline kami dalam mode Developer konsol web di bagian Pipelines , seperti yang ditunjukkan pada Gambar. 1.
Gambar 1. Gambaran umum tentang pipeline yang berjalan.
Mengklik pipeline yang sedang berjalan akan menampilkan informasi tambahan, seperti yang ditunjukkan pada Gambar 2.
Angka: 2. Informasi lebih lanjut tentang pipeline.
Setelah informasi lebih lanjut, Anda dapat melihat aplikasi yang sedang berjalan dalam tampilan Topologi , seperti yang ditunjukkan pada Gambar 3.
Gambar 3. Pod yang sedang berjalan.
Mengklik lingkaran di sudut kanan atas ikon membuka aplikasi kita, seperti yang ditunjukkan pada Gambar 4.
Angka: 4. Meluncurkan aplikasi React.
Kesimpulan
Jadi, kami telah menunjukkan cara menjalankan server pengembangan untuk aplikasi Anda di OpenShift dan menyinkronkannya dengan sistem file lokal. Kami juga melihat cara meniru template build berantai menggunakan OpenShift Pipelines. Semua kode contoh dari artikel ini dapat ditemukan di sini .
Sumber daya tambahan (EN)
- E-book gratis "Berkembang dengan OpenShift: Panduan untuk Yang Tidak Sabar"
- Buat aplikasi Node.js berorientasi kontainer menggunakan Red Hat OpenShift Application Runtimes dan Istio
- Debugging Aplikasi Node.js di OpenShift dengan Chrome DevTools
- Tiga perintah untuk menguasai Express di OpenShift dari awal
- Mengumumkan versi publik Node.js sebagai bagian dari Aplikasi OpenShift Runtimes Red Hat
- Memantau Aplikasi Node.js di OpenShift dengan Prometheus
- Lebih banyak artikel tentang OpenShift dan Kubernetes di Red Hat
Pengumuman webinar yang akan datang
Kami memulai serangkaian webinar Jumat tentang pengalaman asli menggunakan Red Hat OpenShift Container Platform dan Kubernetes:
- 28 Agustus, webinar Emperor "Operator": Operator di OpenShift dan Kubernetes
- 11 September, DeploymentConfig vs Deployment - keajaiban khusus OpenShift untuk membangun dan menerapkan aplikasi
- 25 September, Red Hat OpenShift dan Machine API
- 9 Oktober, Cara Mengatasi Pertumbuhan Beban yang Mendadak
- 23 Okt, Jenkins Tertanam, Build Pipeline, Tekton di Red Hat OpenShift Container Platform