Exercício – aprimorar o aplicativo 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

Observação

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

Criar um ConfigMap

1. Crie um arquivo YAML nomeado configmap.yaml e cole no seguinte código 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 que você criou anteriormente.

3. Salve e feche o arquivo.

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

   kubectl apply -f configmap.yaml
   

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

   kubectl get configmap ship-manager-config
   

Criar o aplicativo

1. Crie um arquivo YAML chamado 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 chave subPath. subpath é o nome de arquivo dentro do contêiner.

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

   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} na entrada pelo valor da variável ZONE_NAME que você criou anteriormente.

4. Salve e feche o arquivo.

5. Implante o aplicativo usando o comando kubectl apply.

   kubectl apply -f frontend.yaml
   

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

   kubectl get deployment contoso-ship-manager-frontend
   

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

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