Übung: Erweitern der Anwendung mit ConfigMaps

Abgeschlossen

Sie haben das Anwendungs-Back-End bereitgestellt, und jetzt müssen Sie das Anwendungs-Front-End mithilfe einer ConfigMap bereitstellen.

Voraussetzungen

Hinweis

Diese Übung ist optional. Wenn Sie die Schritte in dieser Übung ausführen möchten, müssen Sie zuvor ein Azure-Abonnement erstellen. Wenn Sie kein Azure-Konto besitzen oder gerade kein Konto erstellen möchten, können Sie die Anweisungen durchlesen und die dargelegten Informationen nachvollziehen.

Erstellen einer ConfigMap

1. Erstellen Sie eine neue YAML-Datei namens configmap.yaml, und fügen Sie den folgenden Code ein, um die ConfigMap-Spezifikation zu erstellen:

   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. Ersetzen Sie {your-dns-zone} durch Wert der zuvor erstellten ZONE_NAME-Variablen.

3. Speichern und schließen Sie die Datei.

4. Wenden Sie die Änderungen mithilfe des kubectl apply-Befehls auf Ihren Cluster an.

   kubectl apply -f configmap.yaml
   

5. Überprüfen Sie das Ergebnis, indem Sie die ConfigMap mithilfe des kubectl get configmap-Befehls abfragen.

   kubectl get configmap ship-manager-config
   

Erstellen der Anwendung

1. Erstellen Sie eine neue YAML-Datei namens frontend.yaml, und fügen Sie den folgenden Code ein, um die Bereitstellungsspezifikation zu erstellen:

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

   Beachten Sie, wie die ConfigMap im Deployment-Objekt bereitgestellt wird. Wir geben keine Schlüssel an, was bedeutet, dass wir einen subPath-Schlüssel angeben müssen. subpath ist der Dateiname innerhalb des Containers.

2. Fügen Sie unter den Gedankenstrichen den folgenden Code ein, um die Dienst- und Eingangsspezifikationen zu erstellen.

   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. Ersetzen Sie {your-dns-zone} im Eingangsschritt durch den Wert der zuvor erstellten ZONE_NAME-Variablen.

4. Speichern und schließen Sie die Datei.

5. Stellen Sie die Anwendung mit dem Befehl kubectl apply bereit.

   kubectl apply -f frontend.yaml
   

6. Prüfen Sie das Ergebnis, indem Sie die Kubernetes-API mit dem kubectl get deployment-Befehl abfragen.

   kubectl get deployment contoso-ship-manager-frontend
   

   Wenn die API verfügbar ist, sollten Sie eine Ausgabe ähnlich dem folgenden Beispiel erhalten:

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