カスタム・ドメインを使ってIBM Cloud Code Engineのアプリを公開してみる

IBM Cloud Code Engineでアプリ公開すると標準ではIBM提供のアドレス https://xxx.xxx.codeengine.appdomain.cloud/ が利用されますが、エンドユーザー向けのアプリなど独自のドメインでアプリ公開したいときもあると思います
今回は、新たに追加されたドメイン・マッピングの機能を使って、カスタム・ドメインでのアプリ公開を試してみたいと思います

![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136580/df304e7b-5c4f-4ff7-3880-a0c1d847995b.png)


## 事前準備

- 独自ドメインとDNS
  
    私はIBM Cloudでドメインを購入しました
    [https://cloud.ibm.com/classic/services/domains](https://cloud.ibm.com/classic/services/domains)
    
- CA証明書(中間証明書を含むfullchain)とプライベートキー
私はLet's Encryptでワイルドカードの証明書を発行しました
参考にしたqiita：[https://qiita.com/F_clef/items/136d81223c030904523c](https://qiita.com/F_clef/items/136d81223c030904523c)
※自己証明書は利用できません
- Code Engineのアプリ
  
    [数分でアプリがデプロイできるコンテナ環境！IBM Cloud Code Engine - Qiita](https://qiita.com/satokota/items/b3cecd591e244fed391f)
    

## カスタムドメインを使ってアプリにアクセスする流れ

1. アプリの確認
2. ドメインマッピングの作成
3. DNSの設定と確認
4. カスタムドメインのURLを使ってアプリにアクセス

## 1. アプリの確認

まずはCode Engineにデプロイしたアプリが標準のドメイン（appdomain.cloud）にて正常にアクセスできるか確認しておきます

![Untitled 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136580/58b7229a-99c1-59cb-7c6b-7df125471f59.png)

## 2. CodeEngineでのドメインマッピングの作成

それではカスタムドメインでCode Engine上のアプリにアクセスできるように設定してみます。

まずは、左のメニュから **「ドメイン・マッピング」** を選択肢、 **「作成」** をクリックします

![Untitled 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136580/c18582c7-4149-9807-d550-09d3385a9285.png)

 **「ドメイン・マッピングの作成」** ダイアログが表示されるので必要事項を入力します。

- TLSシークレット
    - Certificate chain：　中間証明書を含むfullchainのCA証明書の内容
    （let's encryptの場合はfullchain.pemの内容）
    - Private key：　プライベートキーの内容
    （let's encryptの場合はprivkey.pemの内容）
- Domain name and target application
    - カスタム・ドメイン・ネーム：　アプリ公開に利用したいURL（私はhelloworld.handson-lab.comと指定）
    - ターゲット・コンポーネント：　ターゲットとなるCode Engine上のアプリを選択

![Untitled 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136580/07f47b68-800e-1b49-98a8-94d845828917.png)

必要事項の入力が完了したら、DNS設定に利用する **「CNAME target」** をコピーした後、 **「作成」** をクリックします

マッピング状況が **「デプロイ中」** から **「準備完了」** に変わればCode Engine上での設定は完了です

私のときは１−２分で準備完了となりました

![Untitled 4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136580/8a2eb52a-4004-7e6a-c97c-c87e44c9598d.png)

## 3. DNSの設定と確認

次にDNSの設定をしていきます

アプリ公開に利用したいURLへのリクエストに対して、CNAME targetを返す用に設定します

レコードの内容
- Type: CNAME
- Name: アプリ公開に利用したい名前（私はhelloworld.handson-lab.comと指定）
- Target: 手順２でコピーしたCNAME target（私の場合はcustom.thgi94tqudy.us-south.codeengine.appdomain.cloud）

※ 実際の設定方法はご利用のDNSのガイドを確認してください。

例：IBM CloudのクラシックインフラのDNSを利用した場合

![Untitled 5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136580/05e6213c-532d-31e4-1b09-fcd0ff6ea24c.png)
（Points To に記載するCNAMEの最後に . を追加しないとだめです。私はハマりました。例：custom.thgi94tqudy.us-south.codeengine.appdomain.cloud.）


DNSの設定が反映されるまで待ち、名前解決ができるか確認します

```bash
$ nslookup -type=CNAME {アプリのURL}

# 例
$ nslookup -type=CNAME helloworld.handson-lab.com
```

- **成功した場合**
  
    ```bash
    ❯ nslookup -type=CNAME helloworld.handson-lab.com
    Server:		2404:1a8:7f01:b::3
    Address:	2404:1a8:7f01:b::3#53
    
    Non-authoritative answer:
    helloworld.handson-lab.com	canonical name = custom.thgi94tqudy.us-south.codeengine.appdomain.cloud.
    
    Authoritative answers can be found from:
    ```
    
- **失敗した場合**
  
    ```bash
    ❯ nslookup -type=CNAME helloworld.handson-lab.com
    Server:		2404:1a8:7f01:b::3
    Address:	2404:1a8:7f01:b::3#53
    
    ** server can't find helloworld.handson-lab.com: NXDOMAIN
    ```
    
    DNSの設定が伝播していない可能性もあるのでもう少し待ってから再度チェックしてみてください
    
    DNSの伝播には数分から数時間かかる場合があります
    
    それでもだめな場合はDNSの設定にてHOST名やCNAME Targetがただしいか確認してみてください
    

## 4. カスタムドメインのURLを使ってアプリにアクセス

最後に接続確認として、設定したカスタムドメインのURLを利用してアプリにアクセスします

正常にアプリが表示されれば成功です！

httpsにてアクセスできており、証明書も設定したものが利用されています

![Untitled 6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136580/8a2549d9-3e17-475f-055c-7eeaf3be4e21.png)

以上でカスタムドメインを利用したアプリ公開でした！

Code Engine上での設定はとてもシンプルでサクッと設定できました

個人的にはlet's encryptでの証明書の発行が面倒でしたが、カスタムドメインでアプリ公開をされたい方々はすでにドメインと証明書をお持ちの方も多いと思いますので、**「ドメイン・マッピング」**試してみてください

## お掃除

- Code Engine上
    - **「ドメイン・マッピング」** にて設定削除
    - **「シークレットおよび configmap」** にてTLSのシークレットを削除
- DNS上
    - CNAMEのレコードを削除

## より詳しく

- IBM Cloud Docs
    - Code Engine
        - [Configuring custom domain mappings for your app](https://cloud.ibm.com/docs/codeengine?topic=codeengine-domain-mappings)