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

Langkah 1: Terapkan aplikasi dasar dan canary

Terapkan dua versi aplikasi antarmuka depan di kluster ACK: Penyebaran dasar dan Penyebaran canary, masing-masing dengan Service dan resource Ingress sendiri. Untuk detailnya, lihat Buat aplikasi tanpa status menggunakan Deployment.

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

Ingress canary menggunakan tiga anotasi untuk mengaktifkan pemisahan traffic berbasis header:

Langkah 2: Konfigurasikan plug-in frontend-gray

1. Masuk ke Konsol MSE. Di bilah navigasi atas, pilih wilayah.

2. Di panel navigasi kiri, pilih Cloud-native Gateway > Gateways. Di halaman Gateways, klik ID gateway tersebut.

3. Di panel navigasi kiri, klik Plug-in Marketplace.

4. Di halaman Plug-in Marketplace, cari frontend-gray lalu klik kartu plug-in frontend-gray.

5. Klik tab Plug-in Configuration, pilih Domain-level plug-in rules, lalu klik Add Rule. Konfigurasikan aturan berikut: Aturan ini mengarahkan pengguna dengan nilai userid 00000002 dan 00000003 ke versi canary (gray). Semua pengguna lain melihat versi base. Untuk semua bidang konfigurasi yang tersedia, lihat Referensi konfigurasi plug-in dan dokumentasi plug-in Higress frontend-gray.

      grayKey: userid
      rules:
        - name: beta-user
          grayKeyValue:
            - "00000002"
            - "00000003"
      baseDeployment:
        version: base
      grayDeployments:
        - name: beta-user
          version: gray
          enabled: true

   

Langkah 3: Verifikasi hasil

1. Masuk ke Konsol ACK. Di panel navigasi kiri, klik Clusters. Klik kluster yang telah Anda buat. Di panel navigasi kiri, pilih Network > Ingresses untuk menemukan titik akhir publik.

   

2. Buka titik akhir publik (misalnya, nlb-qv04p*******cn-hangzhou.nlb.aliyuncsslb.com). Masuk dengan akun admin/ice. Pastikan ID pengguna adalah 00000001 dan Anda melihat versi dasar.

3. Masuk dengan akun user/ice. Pastikan ID pengguna adalah 00000002 dan Anda melihat versi canary.

Langkah 1: Terapkan aplikasi dasar dan canary

Terapkan Deployment dan Service dasar serta canary di kluster ACK. Gunakan manifes Deployment dan Service yang sama seperti pendekatan gateway MSE Ingress, tetapi hilangkan resource Ingress. Untuk detailnya, lihat Buat aplikasi tanpa status menggunakan Deployment.

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: 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: Konfigurasikan plug-in frontend-gray

Ikuti langkah konfigurasi plug-in yang sama seperti pendekatan gateway MSE Ingress.

Langkah 3: Tambahkan sumber layanan

Daftarkan kluster ACK Anda sebagai sumber layanan agar gateway dapat menemukan Service Kubernetes Anda.

1. Masuk ke Konsol MSE. Di bilah navigasi atas, pilih wilayah.

2. Di panel navigasi kiri, pilih Cloud-native Gateway > Gateways. Klik ID gateway tersebut.

3. Di panel navigasi kiri, klik Routes. Klik tab Source.

4. Klik Add Source. Di panel Add Source, pilih Container Service untuk Source Type, pilih kluster ACK Anda dari daftar drop-down ACK/ASK/ACS Cluster, lalu klik OK.

   

Langkah 4: Tambahkan layanan

Impor Service Kubernetes dasar dan canary ke gateway.

1. Masuk ke Konsol MSE. Di bilah navigasi atas, pilih wilayah.

2. Di panel navigasi kiri, pilih Cloud-native Gateway > Gateways. Klik ID gateway tersebut.

3. Di panel navigasi kiri, klik Routes. Klik tab Services.

4. Klik Add Service. Di panel Add Service, konfigurasikan parameter, lalu klik OK.

   

Langkah 5: Tambahkan rute dasar

Buat rute yang mengarahkan traffic default ke Service antarmuka depan dasar.

1. Masuk ke Konsol MSE. Di bilah navigasi atas, pilih wilayah.

2. Di panel navigasi kiri, pilih Cloud-native Gateway > Gateways. Klik ID gateway tersebut.

3. Di panel navigasi kiri, klik Routes. Klik Add Route.

4. Di halaman Add Route, konfigurasikan parameter, lalu klik Save and Advertise.

   

Langkah 6: Tambahkan rute canary

Buat rute yang mengarahkan traffic canary ke Service antarmuka depan canary.

1. Masuk ke Konsol MSE. Di bilah navigasi atas, pilih wilayah.

2. Di panel navigasi kiri, pilih Cloud-native Gateway > Gateways. Klik ID gateway tersebut.

3. Di panel navigasi kiri, klik Routes. Klik Add Route.

4. Di halaman Add Route, konfigurasikan parameter, lalu klik Save and Advertise.

   Catatan

   Atur versi menjadi gray. Nilai ini sesuai dengan grayDeployments.version dalam konfigurasi plug-in frontend-gray.

   

Langkah 7: Verifikasi hasil

1. Masuk ke Konsol MSE. Di bilah navigasi atas, pilih wilayah.

2. Di panel navigasi kiri, pilih Cloud-native Gateway > Gateways. Klik ID gateway tersebut.

3. Di halaman Overview, klik tab Endpoint untuk menemukan titik akhir publik.

   

4. Buka titik akhir publik (misalnya, nlb-qv04p*******cn-hangzhou.nlb.aliyuncsslb.com). Masuk dengan akun admin/ice. Pastikan ID pengguna adalah 00000001 dan Anda melihat versi dasar.

5. Masuk dengan akun user/ice. Pastikan ID pengguna adalah 00000002 dan Anda melihat versi canary.

Langkah 1: Terapkan dua versi aplikasi antarmuka depan di instans ECS

Terapkan versi dasar dan canary di instans ECS yang sama atau berbeda:

• Titik akhir versi dasar: 120.***.137.243:80

• Titik akhir versi canary: 120.***.137.243:8081

Langkah 2: Tambahkan layanan

Daftarkan kedua versi antarmuka depan sebagai layanan berbasis alamat tetap di gateway.

1. Masuk ke Konsol MSE. Di bilah navigasi atas, pilih wilayah.

2. Di panel navigasi kiri, pilih Cloud-native Gateway > Gateways. Klik ID gateway tersebut.

3. Di panel navigasi kiri, klik Routes. Klik tab Services.

4. Klik Add Service. Di panel Add Service, pilih Fixed Address dari daftar drop-down Service Source, konfigurasikan parameter, lalu klik OK.

   

   

Langkah 3: Tambahkan rute dasar

1. Masuk ke Konsol MSE. Di bilah navigasi atas, pilih wilayah.

2. Di panel navigasi kiri, pilih Cloud-native Gateway > Gateways. Klik ID gateway tersebut.

3. Di panel navigasi kiri, klik Routes. Klik Add Route.

4. Di halaman Add Route, konfigurasikan parameter, lalu klik Save and Advertise.

   

Langkah 4: Tambahkan rute canary

1. Masuk ke Konsol MSE. Di bilah navigasi atas, pilih wilayah.

2. Di panel navigasi kiri, pilih Cloud-native Gateway > Gateways. Klik ID gateway tersebut.

3. Di panel navigasi kiri, klik Routes. Klik Add Route.

4. Di halaman Add Route, konfigurasikan parameter, lalu klik Save and Advertise.

   Catatan

   Atur versi menjadi gray. Nilai ini sesuai dengan grayDeployments.version dalam konfigurasi plug-in frontend-gray.

   

Langkah 5: Konfigurasikan plug-in frontend-gray

1. Masuk ke Konsol MSE. Di bilah navigasi atas, pilih wilayah.

2. Di panel navigasi kiri, pilih Cloud-native Gateway > Gateways. Klik ID gateway tersebut.

3. Di panel navigasi kiri, klik Plug-in Marketplace.

4. Di halaman Plug-in Marketplace, cari frontend-gray lalu klik kartu plug-in frontend-gray.

5. Klik tab Plug-in Configuration, pilih Domain-level plug-in rules, lalu klik Add Rule. Konfigurasikan aturan berikut: Untuk semua bidang konfigurasi yang tersedia, lihat Referensi konfigurasi plug-in dan dokumentasi plug-in Higress frontend-gray.

      grayKey: userid
      rules:
        - name: beta-user
          grayKeyValue:
            - "00000002"
            - "00000003"
      baseDeployment:
        version: base
      grayDeployments:
        - name: beta-user
          version: gray
          enabled: true

   

Langkah 6: Verifikasi hasil

1. Masuk ke Konsol MSE. Di bilah navigasi atas, pilih wilayah.

2. Di panel navigasi kiri, pilih Cloud-native Gateway > Gateways. Klik ID gateway tersebut.

3. Di halaman Overview, klik tab Endpoint untuk menemukan titik akhir publik.

   

4. Buka titik akhir publik (misalnya, nlb-qv04p*******cn-hangzhou.nlb.aliyuncsslb.com). Masuk dengan akun admin/ice. Pastikan ID pengguna adalah 00000001 dan Anda melihat versi dasar.

5. Masuk dengan akun user/ice. Pastikan ID pengguna adalah 00000002 dan Anda melihat versi canary.

Langkah 1: Siapkan struktur file OSS Anda

Atur aset antarmuka depan Anda di OSS dengan direktori berbasis versi:

- app1                          # Aplikasi
  - dev                         # Versi dasar (pengembangan)
    - index.html
    - js/
    - css/
    - images/
  - 0.0.1                      # Versi canary 1
    - index.html
    - js/
    - css/
    - images/
  - 0.0.2                      # Versi canary 2
    - index.html
    - js/
    - css/
    - images/
- app2
  - dev/
  - 0.0.1/
  - 0.0.2/

Langkah 2: Tambahkan layanan

Daftarkan titik akhir OSS Anda sebagai layanan berbasis nama domain DNS di gateway.

1. Masuk ke Konsol MSE. Di bilah navigasi atas, pilih wilayah.

2. Di panel navigasi kiri, pilih Cloud-native Gateway > Gateways. Klik ID gateway tersebut.

3. Di panel navigasi kiri, klik Routes. Klik tab Services.

4. Klik Add Service. Di panel Add Service, pilih DNS Domain Name dari daftar drop-down Service Source, masukkan titik akhir OSS, lalu klik OK.

   Penting

   Jika OSS dan gateway berada di wilayah yang sama, gunakan titik akhir OSS internal untuk menghindari biaya jaringan publik. Jika berada di wilayah berbeda, gunakan titik akhir publik.

   

Langkah 3: Tambahkan rute

1. Masuk ke Konsol MSE. Di bilah navigasi atas, pilih wilayah.

2. Di panel navigasi kiri, pilih Cloud-native Gateway > Gateways. Klik ID gateway tersebut.

3. Di panel navigasi kiri, klik Routes. Klik Add Route.

4. Di halaman Add Route, konfigurasikan parameter, lalu klik Save and Advertise.

   

Langkah 4: Konfigurasikan plug-in frontend-gray

1. Masuk ke Konsol MSE. Di bilah navigasi atas, pilih wilayah.

2. Di panel navigasi kiri, pilih Cloud-native Gateway > Gateways. Klik ID gateway tersebut.

3. Di panel navigasi kiri, klik Plug-in Marketplace.

4. Di halaman Plug-in Marketplace, cari frontend-gray lalu klik kartu plug-in frontend-gray.

5. Klik tab Plug-in Configuration, pilih Domain-level plug-in rules, lalu klik Add Rule. Konfigurasikan aturan berikut: Pendekatan CDN/OSS berbeda dari pendekatan lain dalam bidang-bidang berikut: Untuk semua bidang konfigurasi yang tersedia, lihat Referensi konfigurasi plug-in dan dokumentasi plug-in Higress frontend-gray.

   Bidang	Deskripsi
   rewrite.host	Titik akhir OSS yang menghosting aset antarmuka depan Anda
   rewrite.indexRouting	Memetakan path URL ke file index.html versi di OSS. Placeholder {version} diganti dengan string versi (dev atau 0.0.1)
   rewrite.fileRouting	Memetakan path URL ke direktori aset statis versi di OSS
   baseDeployment.version	Atur ke dev (nama direktori versi dasar di OSS)
   grayDeployments[0].version	Atur ke 0.0.1 (nama direktori versi canary di OSS)

      grayKey: userid
      rules:
        - name: beta-user
          grayKeyValue:
            - "00000002"
            - "00000003"
      rewrite:
        host: xx.oss-cn-shanghai.aliyuncs.com       ## Ganti dengan titik akhir OSS Anda
        indexRouting:
          "/app1": "/project-a/app1/{version}/index.html"  # Penulisan ulang path untuk halaman entri HTML
        fileRouting:
          "/app1": "/project-a/app1/{version}"              # Penulisan ulang path untuk CSS, JavaScript, dan gambar
      baseDeployment:
        version: dev
      grayDeployments:
        - name: beta-user
          version: 0.0.1
          enabled: true

Langkah 5: Verifikasi hasil

1. Masuk ke Konsol MSE. Di bilah navigasi atas, pilih wilayah.

2. Di panel navigasi kiri, pilih Cloud-native Gateway > Gateways. Klik ID gateway tersebut.

3. Di halaman Overview, klik tab Endpoint untuk menemukan titik akhir publik.

   

4. Buka titik akhir publik (misalnya, nlb-qv04p*******cn-hangzhou.nlb.aliyuncsslb.com). Masuk dengan akun admin/ice. Pastikan ID pengguna adalah 00000001 dan Anda melihat versi dasar.

5. Masuk dengan akun user/ice. Pastikan ID pengguna adalah 00000002 dan Anda melihat versi canary.

Apakah saya bisa menggunakan kebijakan rewrite dan rilis canary antarmuka depan secara bersamaan?

Hal ini bergantung pada sumber layanan Anda:

• Sumber non-CDN/OSS (ACK, ECS): Ya. Kebijakan rewrite dan rilis canary bekerja secara independen dan tidak saling bertentangan.

• Sumber CDN atau OSS: Tidak. Plug-in frontend-gray menangani penulisan ulang path secara internal melalui blok konfigurasi rewrite. Menambahkan kebijakan rewrite terpisah menyebabkan konflik dan dapat mengembalikan error HTTP 403.

Apakah saya bisa menyuntikkan variabel global ke halaman HTML?

Ya. Gunakan blok konfigurasi injection untuk menyuntikkan JavaScript atau CSS ke halaman entri HTML. Injeksi mendukung tiga posisi:

Contoh konfigurasi:

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>

Contoh ini juga menunjukkan rilis canary berbasis bobot. Dengan weight: 80, 80% traffic yang tidak sesuai aturan diarahkan ke versi canary, dan 20% ke versi dasar.

Kapan versi canary mulai berlaku untuk pengguna?

Versi canary mulai berlaku pada pemuatan halaman penuh berikutnya, bukan secara real-time. Jika pengguna A sedang menggunakan versi 0.0.1 dan Anda menerbitkan versi 0.0.2 dengan aturan canary yang sesuai untuk pengguna A, versi baru hanya muncul setelah pengguna A melakukan refresh atau memuat ulang halaman.

Perilaku ini dirancang untuk dua alasan:

• Pengalaman pengguna: Mengganti versi di tengah sesi dapat mengganggu interaksi yang sedang berlangsung, misalnya membuat tombol menghilang saat pengguna sedang mengkliknya.

• Penguraian keterkaitan arsitektur: Penggantian versi secara real-time akan mengharuskan backend mengontrol versi antarmuka depan secara dinamis, sehingga menghubungkan rilis antarmuka depan dan backend serta mencegah caching CDN.

Kapan refresh halaman terjadi?

Refresh halaman biasanya terjadi ketika:

• Sesi berakhir dan pengguna melakukan autentikasi ulang.

• Pengguna menavigasi ke halaman login.

Untuk memuat konfigurasi canary terbaru saat login, lakukan redirect dengan navigasi halaman penuh:

async function handleLogin(values: LoginParams) {
  try {
    const result = await login(values);
    if (result.success) {
      message.success('Logon succeeded.');
      await updateUserInfo();
      const urlParams = new URL(window.location.href).searchParams;
      // Redirect halaman penuh memastikan versi canary dimuat
      window.location.href = `${urlParams.get('redirect') || '/'}`;
      return;
    }
    console.log(result);
    setLoginResult(result);
  } catch (error) {
    message.error('Logon failed. Try again.');
    console.log(error);
  }
}

Baris kuncinya adalah window.location.href = .... Ini memicu navigasi halaman penuh, memaksa browser meminta halaman dari gateway. Plug-in frontend-gray kemudian mengevaluasi aturan canary dan menyajikan versi yang benar.