Latihan - Meningkatkan aplikasi dengan peta konfigurasi
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
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', } })()
Ganti
{your-dns-zone}
dengan nilai variabel ZONE_NAME yang Anda buat sebelumnya.Simpan dan tutup file.
Terapkan perubahan pada kluster Anda menggunakan perintah
kubectl apply
.kubectl apply -f configmap.yaml
Periksa hasilnya dengan mengkueri ConfigMap menggunakan perintah
kubectl get configmap
.kubectl get configmap ship-manager-config
Membuat aplikasi
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.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
Ganti
{your-dns-zone}
di Ingress dengan nilai variabel ZONE_NAME yang Anda buat sebelumnya.Simpan dan tutup file.
Sebarkan aplikasi menggunakan perintah
kubectl apply
.kubectl apply -f frontend.yaml
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