🥇Aplikasi modern di OpenShift, bagian 3: OpenShift sebagai lingkungan pengembangan dan OpenShift Pipelines

Halo semuanya di blog ini! Ini adalah postingan ketiga dalam seri di mana kami menunjukkan cara menerapkan aplikasi web modern di Red Hat OpenShift.

Dalam dua postingan sebelumnya, kami menunjukkan cara menerapkan aplikasi web modern hanya dalam beberapa langkah dan cara menggunakan image S2I baru bersama dengan image server HTTP siap pakai, seperti NGINX, menggunakan build berantai untuk mengatur penerapan produksi .

Hari ini kami akan menunjukkan cara menjalankan server pengembangan untuk aplikasi Anda pada platform OpenShift dan menyinkronkannya dengan sistem file lokal, dan juga berbicara tentang apa itu OpenShift Pipelines dan bagaimana mereka dapat digunakan sebagai alternatif untuk rakitan tertaut.

OpenShift sebagai lingkungan pengembangan

Alur kerja pengembangan

Seperti yang sudah tertera di Pos pertama, proses pengembangan umum untuk aplikasi web modern hanyalah semacam “server pengembangan” yang melacak perubahan pada file lokal. Ketika hal ini terjadi, pembuatan aplikasi dipicu dan kemudian diperbarui ke browser.

Di sebagian besar kerangka kerja modern, “server pengembangan” semacam itu dibangun ke dalam alat baris perintah yang sesuai.

Contoh lokal

Pertama, mari kita lihat cara kerjanya saat menjalankan aplikasi secara lokal. Mari kita ambil aplikasinya sebagai contoh Bereaksi dari artikel sebelumnya, meskipun konsep alur kerja yang hampir sama berlaku di semua framework modern lainnya.
Jadi, untuk memulai "server dev" di contoh React kita, kita akan memasukkan perintah berikut:

$ npm run start

Kemudian di jendela terminal kita akan melihat sesuatu seperti ini:

Dan aplikasi kita akan terbuka di browser default:

Sekarang, jika kita melakukan perubahan pada file, aplikasi harus diperbarui di browser.

Oke, semuanya jelas dengan pengembangan dalam mode lokal, tetapi bagaimana cara mencapai hal yang sama di OpenShift?

Server pengembangan di OpenShift

Jika Anda ingat, di posting sebelumnya, kita melihat apa yang disebut fase run dari gambar S2I dan melihat bahwa secara default, modul serve bertanggung jawab untuk melayani aplikasi web kita.

Namun jika dilihat lebih dekat jalankan skrip dari contoh tersebut, ini berisi variabel lingkungan $NPM_RUN, yang memungkinkan Anda menjalankan perintah Anda.

Misalnya, kita dapat menggunakan modul nodeshift untuk menyebarkan aplikasi kita:

$ npx nodeshift --deploy.env NPM_RUN="yarn start" --dockerImage=nodeshift/ubi8-s2i-web-app

Catatan: Contoh di atas disingkat untuk menggambarkan gambaran umum.

Di sini kami telah menambahkan variabel lingkungan NPM_RUN ke penerapan kami, yang memberi tahu runtime untuk menjalankan perintah benang start, yang memulai server pengembangan React di dalam pod OpenShift kami.

Jika Anda melihat log dari pod yang sedang berjalan, tampilannya akan seperti ini:

Tentu saja, semua ini tidak akan berarti apa-apa sampai kita dapat menyinkronkan kode lokal dengan kode tersebut, yang juga dipantau perubahannya, tetapi berada di server jauh.

Sinkronisasi kode jarak jauh dan 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 menggunakan perintah berikut dengan aman:

$ npx nodeshift watch

Hasilnya, koneksi akan dibuat ke pod berjalan yang kita buat sebelumnya, sinkronisasi file lokal kita dengan cluster jarak jauh akan diaktifkan, dan file di sistem lokal kita akan mulai dipantau perubahannya.

Oleh karena itu, jika sekarang kita memperbarui file src/App.js, sistem akan bereaksi terhadap perubahan ini, menyalinnya ke cluster jarak jauh dan memulai server pengembangan, yang kemudian akan memperbarui aplikasi kita di browser.

Untuk melengkapi gambarnya, mari kita tunjukkan seperti apa keseluruhan perintah ini:

$ 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 cara kerjanya di sini.

Ini adalah contoh untuk React, tetapi metode yang sama dapat digunakan dengan framework lain, cukup atur variabel lingkungan NPM_RUN seperlunya.

Saluran Pipa Openshift

Selanjutnya kita akan membahas tentang alat seperti OpenShift Pipelines dan bagaimana alat tersebut dapat digunakan sebagai alternatif dari build berantai.

Apa itu OpenShift Pipeline

OpenShift Pipelines adalah sistem integrasi dan pengiriman berkelanjutan CI/CD cloud-native yang dirancang untuk mengatur saluran pipa menggunakan Tekton. Tekton adalah kerangka kerja CI/CD asli Kubernetes open-source yang fleksibel yang memungkinkan Anda mengotomatiskan penerapan di berbagai platform (Kubernetes, tanpa server, mesin virtual, dll.) dengan mengabstraksi dari lapisan yang mendasarinya.

Memahami artikel ini memerlukan pengetahuan tentang Pipelines, jadi kami sangat menyarankan Anda membaca terlebih dahulu buku teks resmi.

Menyiapkan lingkungan kerja Anda

Untuk menggunakan contoh dalam artikel ini, pertama-tama Anda perlu mempersiapkan lingkungan kerja Anda:

Instal dan konfigurasikan cluster OpenShift 4. Contoh kami menggunakan CodeReady Containers (CRD) untuk ini, instruksi instalasi dapat ditemukan di sini.
Setelah cluster siap, Anda perlu menginstal Pipeline Operator di dalamnya. Jangan takut, mudah, petunjuk pemasangannya di sini.
Unduh Tekton CLI (tkn) di sini.
Jalankan alat baris perintah create-react-app untuk membuat aplikasi yang kemudian akan Anda terapkan (ini adalah aplikasi sederhana Bereaksi).
(Opsional) Kloning repositori untuk menjalankan aplikasi sampel secara lokal dengan npm install lalu npm start.

Repositori aplikasi juga akan memiliki folder k8s, yang berisi YAML Kubernetes/OpenShift yang digunakan untuk menyebarkan aplikasi. Akan ada Tasks, ClusterTasks, Resources dan Pipelines yang akan kita buat di sini repositori.

Mari kita mulai

Langkah pertama untuk contoh kita adalah membuat proyek baru di cluster OpenShift. Mari kita beri nama proyek ini webapp-pipeline dan buatlah dengan perintah berikut:

$ oc new-project webapp-pipeline

Nama proyek ini akan muncul di kode nanti, jadi jika Anda memutuskan untuk menamainya dengan nama lain, jangan lupa untuk mengedit kode contohnya sesuai dengan itu. Mulai dari titik ini, kita tidak akan melakukan pendekatan top-down, tetapi bottom-up: yaitu, pertama-tama kita akan membuat semua komponen konveyor, baru kemudian konveyor itu sendiri.

Jadi, pertama-tama...

Tugas

Mari buat beberapa tugas, yang kemudian akan membantu menyebarkan aplikasi dalam pipeline kita. Tugas pertama - apply_manifests_task - bertanggung jawab untuk menerapkan YAML sumber daya Kubernetes (layanan, penerapan, dan rute) yang terletak di folder k8s aplikasi kita. Tugas kedua – update_deployment_task – bertanggung jawab untuk memperbarui gambar yang sudah diterapkan ke gambar yang dibuat oleh saluran kami.

Jangan khawatir jika masih belum terlalu jelas. Sebenarnya, tugas-tugas ini seperti utilitas, dan kita akan melihatnya lebih detail nanti. Untuk saat ini, mari kita 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, kami akan memeriksa apakah tugas telah dibuat:

$ tkn task ls

NAME                AGE
apply-manifests     1 minute ago
update-deployment   1 minute ago

Catatan: Ini adalah tugas lokal untuk proyek Anda saat ini.

Tugas cluster

Tugas cluster pada dasarnya sama dengan tugas sederhana. Artinya, ini adalah kumpulan langkah-langkah yang dapat digunakan kembali yang digabungkan dengan satu atau lain cara saat menjalankan tugas tertentu. Perbedaannya adalah tugas cluster tersedia di mana saja di dalam cluster. Untuk melihat daftar tugas cluster yang dibuat secara otomatis saat menambahkan Operator Pipeline, kita akan kembali menggunakan 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 image S2I dan mengirimkannya ke registri OpenShift internal; yang kedua adalah membangun image kita berdasarkan NGINX, menggunakan aplikasi yang telah kita buat 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 gambar S2I (ubi8-s2i-web-app) untuk "membangun" aplikasi kita, dan berakhir dengan gambar yang disimpan di registri internal OpenShift. Sekarang kita akan menggunakan image aplikasi web S2I ini untuk membuat DockerFile untuk aplikasi kita dan kemudian menggunakan Buildah untuk melakukan build sebenarnya dan memasukkan image yang dihasilkan ke registri internal OpenShift, karena itulah yang dilakukan OpenShift saat Anda menyebarkan aplikasi menggunakan NodeShift .

Bagaimana kami mengetahui semua ini, Anda bertanya? Dari versi resmi dari Node.js resmi, kami tinggal menyalinnya dan memodifikasinya sendiri.

Jadi, sekarang mari kita buat 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 menganalisisnya secara detail, tetapi hanya akan fokus pada parameter OUTPUT_DIR:

params:
      - name: OUTPUT_DIR
        description: The location of the build output directory
        default: build

Secara default, parameter ini sama dengan build, yang merupakan tempat React meletakkan konten yang telah dirakit. Kerangka kerja lain menggunakan jalur yang berbeda, misalnya di Ember adalah dist. Output dari tugas cluster pertama kita akan berupa gambar berisi HTML, JavaScript, dan CSS yang kita kumpulkan.

Bangun gambar berdasarkan NGINX

Adapun tugas cluster kedua kita, harus membuat image berbasis NGINX untuk kita, menggunakan konten aplikasi yang telah kita buat. Pada dasarnya, ini adalah bagian dari bagian sebelumnya di mana kita melihat bangunan yang dirantai.

Untuk melakukan ini, kami - persis sama seperti di atas - akan 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 tugas cluster ini, Anda dapat melihat bahwa kode tersebut tidak menentukan repositori Git yang sedang kami gunakan atau nama gambar yang kami buat. Kami hanya menentukan apa sebenarnya yang kami transfer ke Git, atau gambar tertentu di mana gambar akhir harus dikeluarkan. Itulah sebabnya 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 kami katakan, tugas cluster harus bersifat umum, kita perlu membuat sumber daya yang akan digunakan sebagai input (repositori Git) dan sebagai output (gambar akhir). Sumber daya pertama yang kita perlukan adalah Git, tempat aplikasi kita berada, kira-kira 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 bertipe git. Kunci url di bagian params menunjuk ke repositori tertentu dan menentukan 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 bertipe image, dan nilai parameter url menunjuk ke OpenShift Image Registry internal, khususnya yang terletak di namespace webapp-pipeline. Jangan lupa untuk mengubah pengaturan ini jika Anda menggunakan namespace yang berbeda.

Dan terakhir, sumber daya terakhir yang kita perlukan juga bertipe image dan ini akan menjadi image NGINX akhir 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 pipa aplikasi web.

Untuk membuat semua sumber daya ini sekaligus, kami menggunakan perintah buat:

$ 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 konveyor

Sekarang kita memiliki semua komponen yang diperlukan, mari merakit pipeline dari komponen tersebut dengan membuatnya menggunakan perintah berikut:

$ oc create -f https://raw.githubusercontent.com/nodeshift/webapp-pipeline-tutorial/master/pipelines/build-and-deploy-react.yaml

Namun sebelum kita 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 yang harus diselesaikan oleh pipeline kami. Pertama-tama, ia 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 (sumber daya gir) dan output (sumber daya aplikasi web-bangunan). Kami juga memberikan parameter khusus agar 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 kita buat dipanggil:

name: build-runtime-image
    taskRef:
      name: webapp-build-runtime
      kind: ClusterTask

Seperti tugas sebelumnya, kita meneruskan sumber daya, tapi sekarang sudah menjadi gambar aplikasi web bawaan (output dari tugas kita sebelumnya). Dan sebagai outputnya kita atur lagi gambarnya. Karena tugas ini harus dijalankan setelah tugas 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 menggunakan file YAML layanan, rute, dan penerapan yang ada di direktori k8s aplikasi web kita, dan juga untuk memperbarui penerapan ini saat membuat gambar baru. Kami mendefinisikan dua tugas cluster ini di awal artikel.

Memulai konveyor

Jadi, semua bagian pipeline kita telah dibuat, dan kita akan menjalankannya 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 sebagai respons terhadap setiap permintaannya: untuk sumber daya git, pilih repo aplikasi web, lalu untuk sumber daya gambar pertama, aplikasi web bawaan -gambar, 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 menggunakan perintah berikut:

$ tkn pipeline logs -f

Setelah pipeline dimulai dan aplikasi telah diterapkan, kita dapat meminta rute yang dipublikasikan dengan perintah berikut:

$ oc get route react-pipeline-example --template='http://{{.spec.host}}'

Untuk visualisasi yang lebih baik, Anda dapat melihat saluran kami dalam mode Pengembang konsol web di bagian Jaringan pipa, seperti yang ditunjukkan pada Gambar. 1.

Gambar.1. Tinjauan saluran pipa yang sedang berjalan.

Mengklik alur yang sedang berjalan akan menampilkan detail tambahan, seperti yang ditunjukkan pada Gambar 2.

Beras. 2. Informasi tambahan tentang saluran pipa.

Setelah informasi lebih lanjut, Anda dapat melihat aplikasi yang sedang berjalan di tampilan Topologi, seperti yang ditunjukkan pada Gambar.3.

Gambar 3. Pod yang diluncurkan.

Mengklik lingkaran di sudut kanan atas ikon akan membuka aplikasi kita, seperti yang ditunjukkan pada Gambar 4.

Beras. 4. Menjalankan aplikasi React.

Kesimpulan

Jadi, kami menunjukkan cara menjalankan server pengembangan untuk aplikasi Anda di OpenShift dan menyinkronkannya dengan sistem file lokal. Kami juga melihat cara menyimulasikan template build berantai menggunakan OpenShift Pipelines. Semua contoh kode dari artikel ini dapat ditemukan di sini.

Sumber daya tambahan (EN)

Pengumuman webinar mendatang

Kami memulai serangkaian webinar pada hari Jumat tentang pengalaman asli menggunakan Red Hat OpenShift Container Platform dan Kubernetes:

Sumber: www.habr.com

Aplikasi modern di OpenShift, bagian 3: OpenShift sebagai lingkungan pengembangan dan OpenShift Pipelines