Oefening: de toepassing verbeteren met configmaps

10 minuten

U hebt de back-end van de toepassing geïmplementeerd en nu moet u de front-end van de toepassing implementeren met behulp van een ConfigMap.

Voordat we beginnen

Notitie

Deze oefening is optioneel. Als u deze oefening wilt voltooien, moet u een Azure-abonnement maken voordat u begint. Als u geen Azure-account hebt of als u er op dit moment geen wilt maken, kunt u de instructies doorlezen zodat u de informatie begrijpt die wordt gepresenteerd.

Een ConfigMap maken

Maak een nieuw YAML-bestand met de naam configmap.yaml en plak de volgende code om de ConfigMap-specificatie te maken:

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',
      }
    })()

Vervang {your-dns-zone} door de waarde van de ZONE_NAME variabele die u eerder hebt gemaakt.
Sla het bestand op en sluit het.
Pas de wijzigingen toe op uw cluster met behulp van de opdracht kubectl apply.
```
kubectl apply -f configmap.yaml
```
Controleer het resultaat door een query uit te voeren op de ConfigMap met behulp van de opdracht kubectl get configmap.
```
kubectl get configmap ship-manager-config
```

De toepassing maken

Maak een nieuw YAML-bestand met de naam frontend.yaml en plak de volgende code om de implementatiespecificatie te maken:

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

U ziet hoe de ConfigMap is gekoppeld in het implementatieobject. We geven geen sleutels op, wat betekent dat we een subPath sleutel moeten opgeven. De subpath is de bestandsnaam in de container.

Plak onder de drie streepjes de volgende code om de specificaties voor de Service en Ingress te maken:

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

Vervang {your-dns-zone} in de Ingress door de waarde van de variabele ZONE_NAME die u eerder hebt gemaakt.
Sla het bestand op en sluit het.
Implementeer de toepassing met behulp van de opdracht kubectl apply.
```
kubectl apply -f frontend.yaml
```
Controleer het resultaat door een query uit te voeren op de Kubernetes-API met behulp van de opdracht kubectl get deployment.
```
kubectl get deployment contoso-ship-manager-frontend
```
Wanneer de API beschikbaar is, moet u uitvoer krijgen die vergelijkbaar is met het volgende voorbeeld:
```
NAME                           READY   UP-TO-DATE   AVAILABLE   AGE
contoso-ship-manager-frontend  1/1     1            1           18s
```

Oefening: de toepassing verbeteren met configmaps

Voordat we beginnen

Een ConfigMap maken

De toepassing maken

Feedback