Anterior

Seguinte

Exercício – Melhorar a aplicação com configmaps

Concluído

Você implantou o back-end do aplicativo e agora precisa implantar o front-end do aplicativo usando um ConfigMap.

Antes de começar

Nota

Este exercício é opcional. Se quiser concluir este exercício, terá de criar uma subscrição do Azure antes de começar. Se você não tiver uma conta do Azure ou não quiser criar uma no momento, leia as instruções para entender as informações que estão sendo apresentadas.

Criar um ConfigMap

1. Crie um novo arquivo YAML chamado configmap.yaml e cole no código a seguir para criar a especificação 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. Substitua {your-dns-zone} pelo valor da variável ZONE_NAME criada anteriormente.

3. Guarde e feche o ficheiro.

4. Aplique as alterações ao cluster usando o kubectl apply comando.

   kubectl apply -f configmap.yaml
   

5. Verifique o resultado consultando o ConfigMap usando o kubectl get configmap comando.

   kubectl get configmap ship-manager-config
   

Criar a aplicação

1. Crie um novo arquivo YAML nomeado frontend.yaml e cole no código a seguir para criar a especificação de implantação:

   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 como o ConfigMap é montado no objeto Deployment. Não especificamos nenhuma chave, o que significa que precisamos especificar uma subPath chave. O subpath é o nome do arquivo dentro do contêiner.

2. Abaixo dos três traços, cole o código a seguir para criar as especificações de Serviço e Ingresso:

   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. Substitua {your-dns-zone} no Ingress pelo valor da variável ZONE_NAME que você criou anteriormente.

4. Guarde e feche o ficheiro.

5. Implante o aplicativo usando o kubectl apply comando.

   kubectl apply -f frontend.yaml
   

6. Verifique o resultado consultando a API do Kubernetes usando o kubectl get deployment comando.

   kubectl get deployment contoso-ship-manager-frontend
   

   Quando a API estiver disponível, você deverá obter uma saída semelhante ao exemplo a seguir:

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

Continuar