Ejercicio: Mejora de la aplicación con configmaps

Completado

Ha implementado el back-end de la aplicación y ahora debe implementar el front-end de la aplicación mediante un objeto ConfigMap.

Antes de empezar

Nota:

Este ejercicio es opcional. Si le interesa completar este ejercicio, deberá crear una suscripción de Azure antes de empezar. Si no tiene una cuenta de Azure o no quiere crear una en este momento, puede leer las instrucciones para comprender la información que se está presentando.

Crea un ConfigMap

  1. Cree un nuevo archivo YAML denominado configmap.yaml y pegue el código siguiente para crear la especificación 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. Reemplace {your-dns-zone} por el valor de la variable ZONE_NAME que creó anteriormente.

  3. Guarde y cierre el archivo.

  4. Aplique los cambios en el clúster mediante el kubectl apply comando .

    kubectl apply -f configmap.yaml
    
  5. Para comprobar el resultado, consulte configMap mediante el kubectl get configmap comando .

    kubectl get configmap ship-manager-config
    

Creación de la aplicación

  1. Cree un nuevo archivo YAML denominado frontend.yaml y pegue el código siguiente para crear la especificación de implementación:

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

    Observe cómo se monta ConfigMap en el objeto Deployment. No se especifican claves, lo que significa que es necesario especificar una subPath clave. subpath es el nombre de archivo dentro del contenedor.

  2. Debajo de los tres guiones, pegue el siguiente código para crear las especificaciones de Service e 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. Reemplaza {your-dns-zone} en el Ingress por el valor de la variable ZONE_NAME que creó anteriormente.

  4. Guarde y cierre el archivo.

  5. Implemente la aplicación mediante el comando kubectl apply.

    kubectl apply -f frontend.yaml
    
  6. Para comprobar el resultado, consulte la API de Kubernetes mediante el kubectl get deployment comando .

    kubectl get deployment contoso-ship-manager-frontend
    

    Cuando la API esté disponible, debería obtener una salida similar al ejemplo siguiente:

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