Menerapkan rilis canary antarmuka depan menggunakan gateway cloud-native MSE - Microservices Engine

Anda dapat menerapkan rilis canary pada aplikasi antarmuka depan dengan kebijakan pemantauan dan rollback untuk membangun mekanisme andal yang menjamin stabilitas sistem. Koordinasi ketiga kebijakan tersebut membantu menjaga kinerja dan stabilitas tinggi aplikasi antarmuka depan selama iterasi dan pembaruan berkelanjutan. Topik ini menjelaskan cara mengonfigurasi Microservices Engine (MSE) cloud-native gateway untuk menerapkan rilis canary pada aplikasi antarmuka depan.

Menerapkan rilis canary ujung ke ujung

Dalam skenario layanan mikro, panggilan antaraplikasi bersifat acak. Jika tersedia versi baru untuk aplikasi Spring Cloud atau aplikasi Dubbo yang Anda sebarkan, lalu lintas dengan karakteristik tertentu mungkin tidak diarahkan ke versi baru tersebut. Untuk menerapkan rilis canary ujung ke ujung, Anda dapat menggabungkan rilis canary aplikasi antarmuka depan dengan rilis canary ujung ke ujung berbasis gateway cloud-native yang disediakan oleh MSE.

Setiap permintaan dari pengguna antarmuka depan melewati gateway cloud-native. Setelah permintaan diautentikasi oleh sistem izin, cookie-nya mencakup pengenal pengguna unik, seperti userid: 001.

Catatan

Gateway memiliki plugin frontend-gray yang terpasang. Plugin ini memetakan dan meneruskan lalu lintas canary berdasarkan aturan yang dikonfigurasi.

Prasyarat

Kluster ACK yang dikelola telah dibuat. Untuk informasi selengkapnya, lihat Buat kluster ACK yang dikelola.
Gateway cloud-native MSE telah dibuat. Untuk informasi selengkapnya, lihat Buat gateway cloud-native MSE.

Menerapkan rilis canary pada aplikasi antarmuka depan menggunakan gateway MSE Ingress

Penting

Instal MSE Ingress Controller, dan gunakan gateway MSE Ingress untuk mengakses kluster ACK. Untuk informasi selengkapnya, lihat Gunakan gateway MSE Ingress untuk mengakses layanan di kluster ACK dan kluster ACS.

Langkah 1: Sebarkan aplikasi di kluster ACK

Untuk informasi selengkapnya tentang cara menyebarkan aplikasi, lihat Buat aplikasi tanpa status menggunakan Deployment.

Tampilkan kode YAML

`frontend-base.yaml`

apiVersion: apps/v1
kind: Deployment
metadata:
  name: frontend
  namespace: default
spec:
  replicas: 1
  selector:
    matchLabels:
      app: frontend
  template:
    metadata:
      labels:
        app: frontend
    spec:
      containers:
        - image: 'registry.cn-hangzhou.aliyuncs.com/mse-demo-hz/user-gray:base'
          imagePullPolicy: Always
          name: frontend
          resources: {}
---
apiVersion: v1
kind: Service
metadata:
  name: frontend-base-svc
  namespace: default
spec:
  ports:
    - port: 80
      protocol: TCP
      targetPort: 80
  selector:
    app: frontend
  type: ClusterIP

---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  labels:
    ingress-controller: mse
  namespace: default
  name: frontend-base-ingress
spec:
  ingressClassName: mse
  rules:
    - http:
        paths:
          - backend:
              service:
                name: frontend-base-svc
                port:
                  number: 80
            path: /
            pathType: Prefix

`frontend-gray.yaml`

apiVersion: apps/v1
kind: Deployment
metadata:
  name: frontend-gray
  namespace: default
spec:
  replicas: 1
  selector:
    matchLabels:
      app: frontend-gray
  template:
    metadata:
      labels:
        app: frontend-gray
    spec:
      containers:
        - image: 'registry.cn-hangzhou.aliyuncs.com/mse-demo-hz/user-gray:gray'
          imagePullPolicy: Always
          name: frontend-gray
          resources: {}
---
apiVersion: v1
kind: Service
metadata:
  name: frontend-gray-svc
  namespace: default
spec:
  ports:
    - port: 80
      protocol: TCP
      targetPort: 80
  selector:
    app: frontend-gray
  type: ClusterIP

---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  labels:
    ingress-controller: mse
  annotations:
    nginx.ingress.kubernetes.io/canary: 'true'
    nginx.ingress.kubernetes.io/canary-by-header: x-higress-tag
    nginx.ingress.kubernetes.io/canary-by-header-value: gray
  name: frontend-gray-ingress
  namespace: default
spec:
  ingressClassName: mse
  rules:
    - http:
        paths:
          - backend:
              service:
                name: frontend-gray-svc
                port:
                  number: 80
            path: /
            pathType: Prefix

Langkah 2: Konfigurasi plug-in rilis canary di konsol MSE

Masuk ke Konsol MSE. Di bilah navigasi atas, pilih wilayah.
Di panel navigasi sebelah kiri, pilih Cloud-native Gateway > Gateways. Pada halaman Gateways, klik ID gateway tersebut.
Di panel navigasi sebelah kiri, klik Plug-in Marketplace.
Pada halaman Plug-in Marketplace, cari kata kunci frontend-gray dan klik kartu plugin frontend-gray.
Klik tab Plug-in Configuration, pilih Domain-level plug-in rules, lalu klik Add Rule. Di panel Add Rule, konfigurasikan aturan berikut. Untuk informasi selengkapnya tentang konfigurasi, lihat Konfigurasi aturan.
```
grayKey: userid
rules:
  - name: beta-user
    grayKeyValue:
      - "00000002"
      - "00000003"
baseDeployment:
  version: base
grayDeployments:
  - name: beta-user
    version: gray
    enabled: true
```

Langkah 3: Verifikasi hasil

Masuk ke Konsol ACK. Di panel navigasi sebelah kiri, klik Clusters. Pada halaman Clusters, klik kluster yang telah Anda buat. Di halaman detail kluster, pilih Network > Ingresses dari panel navigasi sebelah kiri untuk melihat titik akhir publik.
Akses titik akhir publik nlb-qv04p*******cn-hangzhou.nlb.aliyuncsslb.com, masuk menggunakan akun admin/ice, dan akses versi dasar. ID pengguna adalah 00000001.
Akses titik akhir publik nlb-qv04p*******cn-hangzhou.nlb.aliyuncsslb.com, masuk sebagai pengguna biasa menggunakan akun user/ice untuk mengakses versi rilis canary, dan verifikasi bahwa ID pengguna adalah 00000002.

Menerapkan rilis canary pada aplikasi antarmuka depan menggunakan kluster ACK

Langkah 1: Sebarkan aplikasi di kluster ACK

Untuk informasi selengkapnya tentang cara menyebarkan aplikasi, lihat Buat aplikasi tanpa status menggunakan Deployment.

Tampilkan kode YAML

`frontend-base.yaml`

apiVersion: apps/v1
kind: Deployment
metadata:
  name: frontend
  namespace: default
spec:
  replicas: 1
  selector:
    matchLabels:
      app: frontend
  template:
    metadata:
      labels:
        app: frontend
    spec:
      containers:
        - image: 'registry.cn-hangzhou.aliyuncs.com/mse-demo-hz/user-gray:base'
          imagePullPolicy: Always
          name: frontend
          resources: {}
---
apiVersion: v1
kind: Service
metadata:
  name: frontend-base-svc
  namespace: default
spec:
  ports:
    - port: 80
      protocol: TCP
      targetPort: 80
  selector:
    app: frontend
  type: ClusterIP

`frontend-gray.yaml`

apiVersion: apps/v1
kind: Deployment
metadata:
  name: frontend-gray
  namespace: default
spec:
  replicas: 1
  selector:
    matchLabels:
      app: frontend-gray
  template:
    metadata:
      labels:
        app: frontend-gray
    spec:
      containers:
        - image: 'registry.cn-hangzhou.aliyuncs.com/mse-demo-hz/user-gray:gray'
          imagePullPolicy: Always
          name: frontend-gray
          resources: {}
---
apiVersion: v1
kind: Service
metadata:
  name: frontend-gray-svc
  namespace: default
spec:
  ports:
    - port: 80
      protocol: TCP
      targetPort: 80
  selector:
    app: frontend-gray
  type: ClusterIP

Langkah 2: Konfigurasi plug-in rilis canary di konsol MSE

Masuk ke Konsol MSE. Di bilah navigasi atas, pilih wilayah.
Di panel navigasi sebelah kiri, pilih Cloud-native Gateway > Gateways. Pada halaman Gateways, klik ID gateway tersebut.
Di panel navigasi sebelah kiri, klik Plug-in Marketplace.
Pada halaman Plug-in Marketplace, cari kata kunci frontend-gray dan klik kartu plugin frontend-gray.
Klik tab Plug-in Configuration, pilih Domain-level plug-in rules, lalu klik Add Rule. Di panel Add Rule, konfigurasikan aturan berikut. Untuk informasi selengkapnya tentang konfigurasi, lihat Konfigurasi aturan.
```
grayKey: userid
rules:
  - name: beta-user
    grayKeyValue:
      - "00000002"
      - "00000003"
baseDeployment:
  version: base
grayDeployments:
  - name: beta-user
    version: gray
    enabled: true
```

Langkah 3: Tambahkan sumber layanan untuk gateway

Masuk ke Konsol MSE. Di bilah navigasi atas, pilih wilayah.
Di panel navigasi sebelah kiri, pilih Cloud-native Gateway > Gateways. Pada halaman Gateways, klik ID gateway tersebut.
Di panel navigasi sebelah kiri, klik Routes. Lalu, klik tab Source.
Klik Add Source. Di panel Add Source, pilih Container Service untuk Source Type, pilih kluster yang telah Anda buat dari daftar drop-down ACK/ASK/ACS Cluster, lalu klik OK.

Langkah 4: Tambahkan layanan

Masuk ke Konsol MSE. Di bilah navigasi atas, pilih wilayah.
Di panel navigasi sebelah kiri, pilih Cloud-native Gateway > Gateways.
Pada halaman Gateways, klik ID gateway tersebut.
Di panel navigasi sebelah kiri, klik Routes. Lalu, klik tab Services.
Klik Add Service. Di panel Add Service, konfigurasikan parameter, lalu klik OK.

Langkah 5: Tambahkan entri rute dasar

Masuk ke Konsol MSE. Di bilah navigasi atas, pilih wilayah.
Di panel navigasi sebelah kiri, pilih Cloud-native Gateway > Gateways. Pada halaman Gateways, klik ID gateway tersebut.
Di panel navigasi sebelah kiri, klik tab Routes. Di tab Routes, klik Add Route.
Pada halaman Add Route, konfigurasikan parameter, lalu klik Save and Advertise.

Langkah 6: Tambahkan entri rute canary

Masuk ke Konsol MSE. Di bilah navigasi atas, pilih wilayah.
Di panel navigasi sebelah kiri, pilih Cloud-native Gateway > Gateways. Pada halaman Gateways, klik ID gateway tersebut.
Di panel navigasi sebelah kiri, klik tab Routes. Di tab Routes, klik Add Route.
Pada halaman Add Route, konfigurasikan parameter, lalu klik Save and Advertise.
Catatan
gray menunjukkan versi rilis canary, yang sesuai dengan grayDeployments.version dalam konfigurasi plugin frontend-gray.

Langkah 7: Verifikasi hasil

Masuk ke Konsol MSE. Di bilah navigasi atas, pilih wilayah.
Di panel navigasi sebelah kiri, pilih Cloud-native Gateway > Gateways. Pada halaman Gateways, klik ID gateway tersebut.
Di halaman Overview, klik tab Endpoint untuk melihat titik akhir publik.
Akses titik akhir publik nlb-qv04p*******cn-hangzhou.nlb.aliyuncsslb.com, masuk menggunakan akun admin/ice untuk mengakses versi dasar, dan verifikasi bahwa ID pengguna adalah 00000001.
Akses titik akhir publik nlb-qv04p*******cn-hangzhou.nlb.aliyuncsslb.com, masuk sebagai pengguna biasa menggunakan akun user/ice untuk mengakses versi rilis canary, dan verifikasi bahwa ID pengguna adalah 00000002.

Menerapkan rilis canary pada aplikasi antarmuka depan menggunakan Instans ECS

Langkah 1: Sebarkan dua versi aplikasi antarmuka depan pada instans ECS

Titik akhir aplikasi garis dasar: 120.***.137.243:80
Titik akhir versi aplikasi canary: 120.***.137.243:8081

Langkah 2: Tambahkan layanan

Masuk ke Konsol MSE. Di bilah navigasi atas, pilih wilayah.
Di panel navigasi sebelah kiri, pilih Cloud-native Gateway > Gateways.
Pada halaman Gateways, klik ID gateway tersebut.
Di panel navigasi sebelah kiri, klik Routes. Lalu, klik tab Services.
Klik Add Service. Di panel Add Service, pilih Fixed Address dari daftar drop-down Sumber Layanan, konfigurasikan parameter, lalu klik OK.

Langkah 3: Tambahkan entri rute dasar

Masuk ke Konsol MSE. Di bilah navigasi atas, pilih wilayah.
Di panel navigasi sebelah kiri, pilih Cloud-native Gateway > Gateways.
Pada halaman Gateways, klik ID gateway tersebut.
Di panel navigasi sebelah kiri, klik tab Routes. Di tab Routes, klik Add Route.
Pada halaman Add Route, konfigurasikan parameter, lalu klik Save and Advertise.

Langkah 4: Tambahkan entri rute canary

Masuk ke Konsol MSE. Di bilah navigasi atas, pilih wilayah.
Di panel navigasi sebelah kiri, pilih Cloud-native Gateway > Gateways.
Pada halaman Gateways, klik ID gateway tersebut.
Di panel navigasi sebelah kiri, klik tab Routes. Di tab Routes, klik Add Route.
Pada halaman Add Route, konfigurasikan parameter, lalu klik Save and Advertise.
Catatan
gray menunjukkan versi canary, yang sesuai dengan grayDeployments.version dalam konfigurasi plug-in frontend-gray.

Langkah 5: Konfigurasi plug-in frontend-gray di konsol MSE

Masuk ke Konsol MSE. Di bilah navigasi atas, pilih wilayah.
Di panel navigasi sebelah kiri, pilih Cloud-native Gateway > Gateways.
Pada halaman Gateways, klik ID gateway tersebut.
Di panel navigasi sebelah kiri, klik Plug-in Marketplace.
Pada halaman Plug-in Marketplace, cari kata kunci frontend-gray dan klik kartu plugin frontend-gray.
Klik tab Plug-in Configuration, pilih Domain-level plug-in rules, lalu klik Add Rule. Di panel Add Rule, konfigurasikan aturan berikut. Untuk informasi selengkapnya tentang konfigurasi, lihat Konfigurasi aturan.
```
grayKey: userid
rules:
  - name: beta-user
    grayKeyValue:
      - "00000002"
      - "00000003"
baseDeployment:
  version: base
grayDeployments:
  - name: beta-user
    version: gray
    enabled: true
```

Langkah 6: Verifikasi hasil

Masuk ke Konsol MSE. Di bilah navigasi atas, pilih wilayah.
Di panel navigasi sebelah kiri, pilih Cloud-native Gateway > Gateways. Pada halaman Gateways, klik ID gateway tersebut.
Di halaman Overview, klik tab Endpoint untuk melihat titik akhir publik.
Akses titik akhir publik nlb-qv04p*******cn-hangzhou.nlb.aliyuncsslb.com, masuk menggunakan akun admin/ice untuk mengakses versi dasar, dan verifikasi bahwa ID pengguna adalah 00000001.
Akses titik akhir publik nlb-qv04p*******cn-hangzhou.nlb.aliyuncsslb.com, masuk sebagai pengguna biasa menggunakan akun user/ice untuk mengakses versi rilis canary, dan verifikasi bahwa ID pengguna adalah 00000002.

Menerapkan rilis canary pada aplikasi antarmuka depan menggunakan CDN atau OSS

Langkah 1: Siapkan berkas OSS

Tampilkan kode YAML

- app1 # Aplikasi
  - dev # versi dev
    - index.html
    - js
      ...
    - css
      ...
    - images
      ...
  - 0.0.1  # versi 001
    - index.html
    - js
      ...
    - css
      ...
    - images
      ...
  - 0.0.2  # versi 002
    - index.html
    - js
      ...
    - css
      ...
    - images
      ...
- app2
  - dev
    - index.html
    - js
      ...
    - css
      ...
    - images
      ...
  - 0.0.1
    - index.html
    - js
      ...
    - css
      ...
    - images
      ...
  - 0.0.2
    - index.html
    - js
      ...
    - css
      ...
    - images
      ...

Langkah 2: Tambahkan layanan

Masuk ke Konsol MSE. Di bilah navigasi atas, pilih wilayah.
Di panel navigasi sebelah kiri, pilih Cloud-native Gateway > Gateways.
Pada halaman Gateways, klik ID gateway tersebut.
Di panel navigasi sebelah kiri, klik Routes. Lalu, klik tab Services.
Klik Add Service. Di panel Add Service, pilih DNS Domain Name dari daftar drop-down Sumber Layanan, masukkan titik akhir OSS, lalu klik OK.
Penting
Jika OSS dan gateway ditempatkan di wilayah yang sama, kami menyarankan Anda memasukkan titik akhir internal OSS. Jika OSS dan gateway tidak ditempatkan di wilayah yang sama, masukkan titik akhir publik.

Langkah 3: Tambahkan entri rute

Masuk ke Konsol MSE. Di bilah navigasi atas, pilih wilayah.
Di panel navigasi sebelah kiri, pilih Cloud-native Gateway > Gateways.
Pada halaman Gateways, klik ID gateway tersebut.
Di panel navigasi sebelah kiri, klik tab Routes. Di tab Routes, klik Add Route.
Pada halaman Add Route, konfigurasikan parameter, lalu klik Save and Advertise.

Langkah 4: Konfigurasi plug-in frontend-gray di konsol MSE

Masuk ke Konsol MSE. Di bilah navigasi atas, pilih wilayah.
Di panel navigasi sebelah kiri, pilih Cloud-native Gateway > Gateways.
Pada halaman Gateways, klik ID gateway tersebut.
Di panel navigasi sebelah kiri, klik Plug-in Marketplace.
Pada halaman Plug-in Marketplace, cari kata kunci frontend-gray dan klik kartu plugin frontend-gray.

Pada halaman yang muncul, klik tab Plug-in Configuration, pilih Domain-level plug-in rules di bagian Tingkat Aturan, lalu klik Add Rule. Di panel Add Rule, konfigurasikan aturan berikut. Untuk detail konfigurasi, lihat Konfigurasi aturan.

grayKey: userid
rules:
  - name: beta-user
    grayKeyValue:
      - "00000002"
      - "00000003"
rewrite:
  host: xx.oss-cn-shanghai.aliyuncs.com ## Titik akhir OSS
  indexRouting:
    "/app1": "/project-a/app1/{version}/index.html" # Penulisan ulang path halaman utama HTML
  fileRouting:
     "/app1": "/project-a/app1/{version}" # Penulisan ulang path sumber daya seperti properti CSS, skrip JavaScript, dan gambar
baseDeployment:
  version: dev
grayDeployments:
  - name: beta-user
    version: 0.0.1
    enabled: true

Langkah 5: Verifikasi hasil

Masuk ke Konsol MSE. Di bilah navigasi atas, pilih wilayah.
Di panel navigasi sebelah kiri, pilih Cloud-native Gateway > Gateways. Pada halaman Gateways, klik ID gateway tersebut.
Di halaman Overview, klik tab Endpoint untuk melihat titik akhir publik.
Akses titik akhir publik nlb-qv04p*******cn-hangzhou.nlb.aliyuncsslb.com, masuk menggunakan akun admin/ice untuk mengakses versi dasar, dan verifikasi bahwa ID pengguna adalah 00000001.
Akses titik akhir publik nlb-qv04p*******cn-hangzhou.nlb.aliyuncsslb.com, masuk sebagai pengguna biasa menggunakan akun user/ice untuk mengakses versi rilis canary, dan verifikasi bahwa ID pengguna adalah 00000002.

FAQ

Bisakah saya mengonfigurasi kebijakan rewrite dan rilis canary pada aplikasi antarmuka depan secara bersamaan?

Jika sumber layanan bukan CDN atau OSS, Anda dapat mengonfigurasi rilis canary aplikasi antarmuka depan dan kebijakan rewrite secara bersamaan serta membuatnya berlaku.
Jika sumber layanan adalah CDN atau OSS, Anda tidak dapat mengonfigurasi rilis canary aplikasi antarmuka depan dan kebijakan rewrite secara bersamaan. Hal ini karena kebijakan rewrite terkait sudah diimplementasikan dalam plug-in frontend-gray. Jika Anda mengonfigurasi kebijakan rewrite, konflik mungkin terjadi, sehingga menghasilkan kesalahan seperti kode status 403.

Bisakah saya menyuntikkan beberapa variabel global ke halaman utama HTML?

Suntikkan beberapa skrip JavaScript global ke tag <head> (biasanya properti seperti gaya CSS) pada halaman HTML, atau ke posisi pertama dan terakhir tag <body> halaman HTML.
Gunakan injection untuk menyuntikkan kode ke halaman utama HTML. Anda dapat menyuntikkan kode ke tag <head>, atau ke posisi pertama dan terakhir tag <body>.

grayKey: userid
rules:
- name: inner-user
  grayKeyValue:
  - '00000001'
  - '00000005'
baseDeployment:
  version: base
grayDeployments:
  - name: beta-user
    version: gray
    enabled: true
    weight: 80
injection:
  head: 
    - <script>console.log('Header')</script>
  body:
    first:
      - <script>console.log('hello world before')</script>
      - <script>console.log('hello world before1')</script>
    last:
      - <script>console.log('hello world after')</script>
      - <script>console.log('hello world after2')</script>

Kapan versi canary mulai berlaku?

Anggaplah versi antarmuka depan pengguna A saat ini adalah 0.0.1 dan Anda menerbitkan versi antarmuka depan baru, 0.0.2. Jika pengguna A memenuhi aturan rilis canary, apakah versi baru langsung berlaku?

Hal ini disebabkan oleh alasan berikut:

Jika versi canary perlu berlaku secara real-time, backend harus mengontrol versi secara dinamis. Rilis antarmuka depan tidak dapat dipisahkan dari rilis backend. Akselerasi CDN tidak dapat dilakukan karena stabilitas halaman sangat bergantung pada antarmuka.
Jika versi canary berlaku secara real-time, ketika pelanggan menggunakan fitur tertentu, tombol yang sedang digunakan mungkin menjadi tidak tersedia kapan saja, sehingga mengakibatkan pengalaman pengguna yang buruk.

Kapan saya bisa merefresh halaman?

Dalam kebanyakan kasus, Anda perlu masuk kembali ke situs web setelah sesi habis masa berlakunya.
Anda dapat masuk ke aplikasi di halaman log masuk.

Ketika Anda masuk ke halaman, refresh halaman untuk mendapatkan informasi rilis canary terbaru. Kode berikut menunjukkan contoh log masuk aplikasi antarmuka depan.

async function handleLogin(values: LoginParams) {
    try {
      const result = await login(values);
      if (result.success) {
        message.success ('Logon berhasil. ');
        await updateUserInfo();
        const urlParams = new URL(window.location.href).searchParams;
  	    window.location.href = `${urlParams.get('redirect') || '/'}`;
        return;
      }
      console.log(result);
      // Konfigurasikan pesan kesalahan yang dikembalikan untuk kegagalan log masuk. Kode berikut menunjukkan contoh pesan kesalahan.
      setLoginResult(result);
    } catch (error) {
      message.error('Logon gagal. Coba lagi. ');
      console.log(error);
    }
  }