Latihan - Meningkatkan aplikasi dengan peta konfigurasi

Selesai

Anda menyebarkan back end aplikasi, dan sekarang Anda perlu menyebarkan front end aplikasi menggunakan ConfigMap.

Sebelum kita mulai

Nota

Latihan ini bersifat opsional. Jika Anda ingin menyelesaikan latihan ini, Anda harus membuat langganan Azure sebelum memulai. Jika Anda tidak memiliki akun Azure atau tidak ingin membuatnya saat ini, Anda dapat membaca instruksi sehingga Anda memahami informasi yang sedang disajikan.

Membuat ConfigMap

  1. Buat file YAML baru bernama configmap.yaml dan tempelkan kode berikut untuk membuat spesifikasi ConfigMap:

    apiVersion: v1
    kind: ConfigMap
    metadata:
      name: ship-manager-config
      namespace: default
    data:
      config.js: |
        const config = (() => {
          return {
            'VUE_APP_BACKEND_BASE_URL': 'http://ship-manager-backend.{your-dns-zone}.aksapp.io',
          }
        })()
    
  2. Ganti {your-dns-zone} dengan nilai variabel ZONE_NAME yang Anda buat sebelumnya.

  3. Simpan dan tutup file.

  4. Terapkan perubahan pada kluster Anda menggunakan perintah kubectl apply.

    kubectl apply -f configmap.yaml
    
  5. Periksa hasilnya dengan mengkueri ConfigMap menggunakan perintah kubectl get configmap.

    kubectl get configmap ship-manager-config
    

Membuat aplikasi

  1. Buat file YAML baru bernama frontend.yaml dan tempelkan kode berikut untuk membuat spesifikasi Penyebaran:

    apiVersion: apps/v1
    kind: Deployment
    metadata:
      name: contoso-ship-manager-frontend
      namespace: default
    spec:
      replicas: 1
      selector:
        matchLabels:
          app: contoso-ship-manager-frontend
      template:
        metadata:
          labels:
            app: contoso-ship-manager-frontend
        spec:
          containers:
            - image: mcr.microsoft.com/mslearn/samples/contoso-ship-manager:frontend
              name: contoso-ship-manager-frontend
              ports:
                - containerPort: 80
                  name: http
              volumeMounts:
                - name: config
                  mountPath: /usr/src/app/dist/config.js
                  subPath: config.js
          volumes:
            - name: config
              configMap:
                name: ship-manager-config
    ---
    

    Perhatikan bagaimana ConfigMap dipasang di objek Penyebaran. Kami tidak menentukan kunci apa pun, yang berarti kami perlu menentukan kunci subPath. subpath adalah nama file di dalam kontainer.

  2. Di bawah tiga tanda strip, tempelkan kode berikut untuk membuat spesifikasi Service dan Ingress:

    apiVersion: v1
    kind: Service
    metadata:
      name: contoso-ship-manager-frontend
      namespace: default
    spec:
      selector:
        app: contoso-ship-manager-frontend
      ports:
        - name: http
          port: 80
          targetPort: 80
    ---
    apiVersion: networking.k8s.io/v1
    kind: Ingress
    metadata:
      name: contoso-ship-manager-frontend
      namespace: default
      annotations:
        spec.ingressClassName: webapprouting.kubernetes.azure.com
    spec:
      rules:
        - host: contoso-ship-manager.{your-dns-zone}.aksapp.io
          http:
            paths:
              - path: /
                pathType: Prefix
                backend:
                  service:
                    name: contoso-ship-manager-frontend
                    port: 
                      name: http
    
  3. Ganti {your-dns-zone} di Ingress dengan nilai variabel ZONE_NAME yang Anda buat sebelumnya.

  4. Simpan dan tutup file.

  5. Sebarkan aplikasi menggunakan perintah kubectl apply.

    kubectl apply -f frontend.yaml
    
  6. Periksa hasilnya dengan mengkueri API Kubernetes menggunakan perintah kubectl get deployment.

    kubectl get deployment contoso-ship-manager-frontend
    

    Saat API tersedia, Anda akan mendapatkan output yang mirip dengan contoh berikut:

    NAME                           READY   UP-TO-DATE   AVAILABLE   AGE
    contoso-ship-manager-frontend  1/1     1            1           18s