前へ

次へ

演習 - ConfigMap を使用したアプリケーションの強化

完了

アプリケーション バックエンドをデプロイしました。ここで、ConfigMap を使用してアプリケーション フロントエンドをデプロイする必要があります。

開始前の準備

注意

この演習は省略してもかまいません。 この演習を実行する場合は、始める前に Azure サブスクリプションを作成する必要があります。 Azure アカウントをお持ちでない場合、またはこの時点で作成しない場合は、提示されている情報を理解するため手順に目を通してください。

ConfigMap の作成

1. configmap.yaml という名前の新しい YAML ファイルを作成し、次のコードを貼り付けて 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. {your-dns-zone} を、前に作成した ZONE_NAME 変数の値に置き換えます。

3. ファイルを保存して閉じます。

4. kubectl apply コマンドを使用して、クラスターに変更を適用します。

   kubectl apply -f configmap.yaml
   

5. kubectl get configmap コマンドを使用して ConfigMap に対してクエリを実行し、結果を確認します。

   kubectl get configmap ship-manager-config
   

アプリケーションを作成する

1. frontend.yaml という名前の新しい YAML ファイルを作成し、次のコードを貼り付けてデプロイ スペックを作成します。

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

   ConfigMap がデプロイ オブジェクトにどのようにマウントされているかを確認してください。 キーを指定していません。つまり、subPath キーを指定する必要があります。 subpath はコンテナー内のファイル名です。

2. 3 つのダッシュの下に次のコードを貼り付けて、サービスとイングレス スペックを作成します。

   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. イングレス内の {your-dns-zone} を、前に作成した ZONE_NAME 変数の値に置き換えます。

4. ファイルを保存して閉じます。

5. kubectl apply コマンドを使用して、アプリケーションをデプロイします。

   kubectl apply -f frontend.yaml
   

6. kubectl get deployment コマンドを使用して Kubernetes API にクエリを実行し、結果を確認します。

   kubectl get deployment contoso-ship-manager-frontend
   

   API が使用可能になると、次の例のような出力が表示されます。

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

続行