カスタム traefik イングレス コントローラーの使用と HTTPS の構成Use a custom traefik ingress controller and configure HTTPS

この記事では、カスタム traefik イングレス コントローラーを使用するように Azure Dev Spaces を構成する方法について説明します。This article shows you how to configure Azure Dev Spaces to use a custom traefik ingress controller. この記事では、そのカスタム イングレス コントローラーが HTTPS も使用するように構成する方法についても説明します。This article also shows you how to configure that custom ingress controller to use HTTPS.

前提条件Prerequisites

カスタム traefik イングレス コントローラーの構成Configure a custom traefik ingress controller

Kubernetes のコマンドライン クライアントである kubectl を使ってクラスターに接続します。Connect to your cluster using kubectl, the Kubernetes command-line client. Kubernetes クラスターに接続するように kubectl を構成するには、az aks get-credentials コマンドを使用します。To configure kubectl to connect to your Kubernetes cluster, use the az aks get-credentials command. このコマンドは、資格情報をダウンロードし、それを使用するように Kubernetes CLI を構成します。This command downloads credentials and configures the Kubernetes CLI to use them.

az aks get-credentials --resource-group myResourceGroup --name myAKS

クラスターへの接続を確認するには、クラスター ノードの一覧を返す kubectl get コマンドを使用します。To verify the connection to your cluster, use the kubectl get command to return a list of the cluster nodes.

$ kubectl get nodes
NAME                                STATUS   ROLES   AGE    VERSION
aks-nodepool1-12345678-vmssfedcba   Ready    agent   13m    v1.14.1

traefik イングレス コントローラーの Helm チャートを含む公式の安定版 Helm リポジトリを追加します。Add the official stable Helm repository, which contains the traefik ingress controller Helm chart.

helm repo add stable https://kubernetes-charts.storage.googleapis.com/

traefik イングレス コントローラー用に Kubernetes 名前空間を作成し、それを helm を使用してインストールします。Create a Kubernetes namespace for the traefik ingress controller and install it using helm.

kubectl create ns traefik
helm install traefik stable/traefik --namespace traefik --set kubernetes.ingressClass=traefik --set kubernetes.ingressEndpoint.useDefaultPublishedService=true --version 1.85.0

kubectl get を使用して、traefik イングレス コントローラー サービスの IP アドレスを取得します。Get the IP address of the traefik ingress controller service using kubectl get.

kubectl get svc -n traefik --watch

このサンプル出力では、traefik 名前空間にあるすべてのサービスの IP アドレスを示しています。The sample output shows the IP addresses for all the services in the traefik name space.

NAME      TYPE           CLUSTER-IP    EXTERNAL-IP   PORT(S)                      AGE
traefik   LoadBalancer   10.0.205.78   <pending>     80:32484/TCP,443:30620/TCP   20s
...
traefik   LoadBalancer   10.0.205.78   MY_EXTERNAL_IP   80:32484/TCP,443:30620/TCP   60s

A レコードを、az network dns record-set a add-record を使用し、traefik サービスの外部 IP アドレスが使用された DNS ゾーンに追加します。Add an A record to your DNS zone with the external IP address of the traefik service using az network dns record-set a add-record.

az network dns record-set a add-record \
    --resource-group myResourceGroup \
    --zone-name MY_CUSTOM_DOMAIN \
    --record-set-name *.traefik \
    --ipv4-address MY_EXTERNAL_IP

上記の例では、A レコードを MY_CUSTOM_DOMAIN DNS ゾーンに追加します。The above example adds an A record to the MY_CUSTOM_DOMAIN DNS zone.

この記事では、Azure Dev Spaces 自転車シェア サンプル アプリケーションを使用して、Azure Dev Spaces の使い方のデモを行います。In this article, you use the Azure Dev Spaces Bike Sharing sample application to demonstrate using Azure Dev Spaces. GitHub からアプリケーションを複製して、そのディレクトリに移動します。Clone the application from GitHub and navigate into its directory:

git clone https://github.com/Azure/dev-spaces
cd dev-spaces/samples/BikeSharingApp/charts

values.yaml を開き、MY_CUSTOM_DOMAIN には自分自身のドメインを使用し、 <REPLACE_ME_WITH_HOST_SUFFIX> のすべてのインスタンスを traefik.MY_CUSTOM_DOMAIN に置き換えます。Open values.yaml and replace all instances of <REPLACE_ME_WITH_HOST_SUFFIX> with traefik.MY_CUSTOM_DOMAIN using your domain for MY_CUSTOM_DOMAIN. また、kubernetes.io/ingress.class: traefik # Custom Ingresskubernetes.io/ingress.class: traefik-azds # Dev Spaces-specific に置き換えます。Also replace kubernetes.io/ingress.class: traefik-azds # Dev Spaces-specific with kubernetes.io/ingress.class: traefik # Custom Ingress. 更新された values.yaml ファイルの例を次に示します。Below is an example of an updated values.yaml file:

# This is a YAML-formatted file.
# Declare variables to be passed into your templates.

bikesharingweb:
  ingress:
    annotations:
      kubernetes.io/ingress.class: traefik  # Custom Ingress
    hosts:
      - dev.bikesharingweb.traefik.MY_CUSTOM_DOMAIN  # Assumes deployment to the 'dev' space

gateway:
  ingress:
    annotations:
      kubernetes.io/ingress.class: traefik  # Custom Ingress
    hosts:
      - dev.gateway.traefik.MY_CUSTOM_DOMAIN  # Assumes deployment to the 'dev' space

変更を保存し、ファイルを閉じます。Save your changes and close the file.

azds space select を使用して、サンプル アプリケーションで dev 空間を作成します。Create the dev space with your sample application using azds space select.

azds space select -n dev -y

helm install を使用してサンプル アプリケーションをデプロイします。Deploy the sample application using helm install.

helm install bikesharing . --dependency-update --namespace dev --atomic

サンプル アプリケーションは、上記の例では、dev 名前空間にデプロイされます。The above example deploys the sample application to the dev namespace.

azds list-uris を使用してサンプル アプリケーションにアクセスするための URL を表示します。Display the URLs to access the sample application using azds list-uris.

azds list-uris

azds list-uris で出力される URL の例は次の通りです。The below output shows the example URLs from azds list-uris.

Uri                                                  Status
---------------------------------------------------  ---------
http://dev.bikesharingweb.traefik.MY_CUSTOM_DOMAIN/  Available
http://dev.gateway.traefik.MY_CUSTOM_DOMAIN/         Available

azds list-uris コマンドからパブリック URL を開いて、bikesharingweb サービスに移動します。Navigate to the bikesharingweb service by opening the public URL from the azds list-uris command. 上記の例では、bikesharingweb サービスのパブリック URL は http://dev.bikesharingweb.traefik.MY_CUSTOM_DOMAIN/ です。In the above example, the public URL for the bikesharingweb service is http://dev.bikesharingweb.traefik.MY_CUSTOM_DOMAIN/.

azds space select コマンドを使用すると、dev の下に子空間を作成し、子開発空間にアクセスするための URL を列挙できます。Use the azds space select command to create a child space under dev and list the URLs to access the child dev space.

azds space select -n dev/azureuser1 -y
azds list-uris

以下は、azds list-uris で出力された、azureuser1 子開発空間のサンプル アプリケーションにアクセスするための URL の例です。The below output shows the example URLs from azds list-uris to access the sample application in the azureuser1 child dev space.

Uri                                                  Status
---------------------------------------------------  ---------
http://azureuser1.s.dev.bikesharingweb.traefik.MY_CUSTOM_DOMAIN/  Available
http://azureuser1.s.dev.gateway.traefik.MY_CUSTOM_DOMAIN/         Available

azds list-uris コマンドからパブリック URL を開いて、azureuser1 子開発空間の bikesharingweb サービスに移動します。Navigate to the bikesharingweb service in the azureuser1 child dev space by opening the public URL from the azds list-uris command. 上記の例で、azureuser1 子開発空間の bikesharingweb サービスのパブリック URL は http://azureuser1.s.dev.bikesharingweb.traefik.MY_CUSTOM_DOMAIN/ です。In the above example, the public URL for the bikesharingweb service in the azureuser1 child dev space is http://azureuser1.s.dev.bikesharingweb.traefik.MY_CUSTOM_DOMAIN/.

HTTPS を使用する traefik イングレス コントローラーの構成Configure the traefik ingress controller to use HTTPS

cert-manager を使用して、HTTPS を使用するように traefik イングレス コントローラーを構成するときに TLS 証明書の管理を自動化します。Use cert-manager to automate the management of the TLS certificate when configuring your traefik ingress controller to use HTTPS. helm を使用して、certmanager チャートをインストールします。Use helm to install the certmanager chart.

kubectl apply --validate=false -f https://raw.githubusercontent.com/jetstack/cert-manager/release-0.12/deploy/manifests/00-crds.yaml --namespace traefik
kubectl label namespace traefik certmanager.k8s.io/disable-validation=true
helm repo add jetstack https://charts.jetstack.io
helm repo update
helm install cert-manager --namespace traefik --version v0.12.0 jetstack/cert-manager --set ingressShim.defaultIssuerName=letsencrypt --set ingressShim.defaultIssuerKind=ClusterIssuer

letsencrypt-clusterissuer.yaml ファイルを作成し、自分のメール アドレスでメール フィールドを更新します。Create a letsencrypt-clusterissuer.yaml file and update the email field with your email address.

apiVersion: cert-manager.io/v1alpha2
kind: ClusterIssuer
metadata:
  name: letsencrypt
spec:
  acme:
    server: https://acme-v02.api.letsencrypt.org/directory
    email: MY_EMAIL_ADDRESS
    privateKeySecretRef:
      name: letsencrypt
    solvers:
      - http01:
          ingress:
            class: traefik

注意

テストの場合、ClusterIssuer に使用できるステージング サーバーもあります。For testing, there is also a staging server you can use for your ClusterIssuer.

kubectl を使用して letsencrypt-clusterissuer.yaml を適用します。Use kubectl to apply letsencrypt-clusterissuer.yaml.

kubectl apply -f letsencrypt-clusterissuer.yaml --namespace traefik

helm を使用して、HTTPS を使用するように traefik をアップグレードします。Upgrade traefik to use HTTPS using helm.

helm upgrade traefik stable/traefik --namespace traefik --set kubernetes.ingressClass=traefik --set kubernetes.ingressEndpoint.useDefaultPublishedService=true --version 1.85.0 --set ssl.enabled=true --set ssl.enforced=true --set ssl.permanentRedirect=true

cert-manager および HTTPS を使用するための詳細を含むように values.yaml を更新します。Update values.yaml to include the details for using cert-manager and HTTPS. 更新された values.yaml ファイルの例を次に示します。Below is an example of an updated values.yaml file:

# This is a YAML-formatted file.
# Declare variables to be passed into your templates.

bikesharingweb:
  ingress:
    annotations:
      kubernetes.io/ingress.class: traefik  # Custom Ingress
      cert-manager.io/cluster-issuer: letsencrypt
    hosts:
      - dev.bikesharingweb.traefik.MY_CUSTOM_DOMAIN  # Assumes deployment to the 'dev' space
    tls:
    - hosts:
      - dev.bikesharingweb.traefik.MY_CUSTOM_DOMAIN
      secretName: dev-bikesharingweb-secret

gateway:
  ingress:
    annotations:
      kubernetes.io/ingress.class: traefik  # Custom Ingress
      cert-manager.io/cluster-issuer: letsencrypt
    hosts:
      - dev.gateway.traefik.MY_CUSTOM_DOMAIN  # Assumes deployment to the 'dev' space
    tls:
    - hosts:
      - dev.gateway.traefik.MY_CUSTOM_DOMAIN
      secretName: dev-gateway-secret

helm を使用してサンプル アプリケーションをアップグレードします。Upgrade the sample application using helm:

helm upgrade bikesharing . --namespace dev --atomic

dev/azureuser1 子空間のサンプル アプリケーションに移動し、HTTPS を使用するようにリダイレクトされていることを確認します。Navigate to the sample application in the dev/azureuser1 child space and notice you are redirected to use HTTPS. ページが読み込まれ、ブラウザーにいくつかエラーが表示されていることも確認します。Also notice that the page loads, but the browser shows some errors. ブラウザー コンソールを開くと、HTTP リソースを読み込もうとしている HTTPS ページにエラーが関連していることが表示されます。Opening the browser console shows the error relates to an HTTPS page trying to load HTTP resources. 次に例を示します。For example:

Mixed Content: The page at 'https://azureuser1.s.dev.bikesharingweb.traefik.MY_CUSTOM_DOMAIN/devsignin' was loaded over HTTPS, but requested an insecure resource 'http://azureuser1.s.dev.gateway.traefik.MY_CUSTOM_DOMAIN/api/user/allUsers'. This request has been blocked; the content must be served over HTTPS.

このエラーを修正するには、BikeSharingWeb/azds.yamlkubernetes.io/ingress.classtraefik が使用され、 $(hostSuffix) にお使いのカスタム ドメインが使用されるように更新します。To fix this error, update BikeSharingWeb/azds.yaml to use traefik for kubernetes.io/ingress.class and your custom domain for $(hostSuffix). 次に例を示します。For example:

...
    ingress:
      annotations:
        kubernetes.io/ingress.class: traefik
      hosts:
      # This expands to [space.s.][rootSpace.]bikesharingweb.<random suffix>.<region>.azds.io
      - $(spacePrefix)$(rootSpacePrefix)bikesharingweb.traefik.MY_CUSTOM_DOMAIN
...

BikeSharingWeb/package.jsonurl パッケージの依存関係が使用されるように更新します。Update BikeSharingWeb/package.json with a dependency for the url package.

{
...
    "react-responsive": "^6.0.1",
    "universal-cookie": "^3.0.7",
    "url": "0.11.0"
  },
...

BikeSharingWeb/pages/helpers.jsgetApiHostAsync メソッドで HTTPS が使用されるように更新します。Update the getApiHostAsync method in BikeSharingWeb/pages/helpers.js to use HTTPS:

...
    getApiHostAsync: async function() {
        const apiRequest = await fetch('/api/host');
        const data = await apiRequest.json();
        
        var urlapi = require('url');
        var url = urlapi.parse(data.apiHost);

        console.log('apiHost: ' + "https://"+url.host);
        return "https://"+url.host;
    },
...

BikeSharingWeb ディレクトリに移動し、azds up を使用し、更新されたお使いの BikeSharingWeb サービスを実行します。Navigate to the BikeSharingWeb directory and use azds up to run your updated BikeSharingWeb service.

cd ../BikeSharingWeb/
azds up

dev/azureuser1 子空間のサンプル アプリケーションに移動し、HTTPS を使用するようにリダイレクトされ、エラーがないことを確認します。Navigate to the sample application in the dev/azureuser1 child space and notice you are redirected to use HTTPS without any errors.

次のステップNext steps

Azure Dev Spaces を使用して複数のコンテナーにまたがるより複雑なアプリケーションを開発する方法と、別の空間で別のバージョンまたは分岐を使用して作業することによって共同開発を簡略化する方法について学習します。Learn how Azure Dev Spaces helps you develop more complex applications across multiple containers, and how you can simplify collaborative development by working with different versions or branches of your code in different spaces.