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