【IBM Cloud】CDNをサービスの紹介（チュートリアル）

## はじめに
今回はIBM Cloud® Content Delivery Network (CDN)を使ってコンテンツを配信し、その方法の把握や配信速度の向上を確認したくチュートリアルを行ったため、その流れについて整理しながらCDNサービスを紹介していきたいと思います。

今回の内容にはIBM Cloudの[アカウント](https://cloud.ibm.com/docs/account?topic=account-accounts)（無料利用可能）が前提となっています。
なお、この記事でのコマンドは全てMacOS向けとなっています。

## CDNとは？
インターネット上で公開されるWebサイトなどのコンテンツのデリバリー、つまり閲覧者に対するコンテンツの配信のために利用されるサービスです。例えば、スマートフォンを通じて情報を得ることができるのも、スマートフォンがネットワークに接続されていて、インターネットを通じて私たちが欲しい情報が格納されているサーバーと繋がっているためですが、この営みを最適化させるために利用されるネットワークを提供するサービスということになります。

IBM Cloudでは、Akamai社とのパートナーシップを結んでCDNを提供しています。

## 環境作成の流れ
CDNを介したコンテンツ配信の流れについて記載します。より詳しい情報は[こちら](https://cloud.ibm.com/docs/CDN?topic=solution-tutorials-static-files-cdn)を参照ください。
#### Webアプリケーション・コードを取得する
以下のコマンドでWebアプリケーション・コードを取得します。
```shell:Webアプリケーション・コード
git clone https://github.com/IBM-Cloud/webapp-with-cos-and-cdn
cd webapp-with-cos-and-cdn
```
#### Object Storageを作成する
次はオObject Storageを作成します。
IBM Cloudの[コンソール](https://cloud.ibm.com/objectstorage/create)にアクセスし、インスタンスを作成します。
![スクリーンショット 2022-12-09 16.05.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2626032/2574ad15-81be-f995-fa4b-d7010f6fc86c.png)

インスタンスに入り、`バケットの作成`→`カスタム・バケット`をクリックします。
![スクリーンショット 2022-12-09 16.06.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2626032/878192ba-7ff3-bfba-bd57-9dba3efab270.png)
![スクリーンショット 2022-12-09 16.07.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2626032/3ec47699-73d9-87f1-cadc-0d1fa54f2f8c.png)

バケットの設定を行います。
username-mywebsiteなどの固有のバケット名を設定します。バケット名にはドット(.)は使用しないでください。
「耐障害性 (Resiliency)」を「リージョン(Regional)」に設定し、「ロケーション」を適切に設定します。今回はjp-tokに設定しました。
「ストレージ・クラス」は「Smart Tier」を選択し、下にスクロールして「静的 Web サイト・ホスティング」の`追加`をクリックします。
「ルーティング・ルール (個別)」、「インデックス文書」テキスト・ボックスに「index.html」と入力、「パブリック・アクセス」を`オン`にします。
また、「静的Webサイト・ホスティング」タイトル上部の`保存`をクリックします。
スクロールダウンして`バケットの作成`をクリックします。
![FireShot Capture 061 - Cloud Object Storage - IBM Cloud - cloud.ibm.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2626032/deb925e7-0b0a-fd46-41b6-a0e4c2db3bbe.png)
バケットの作成が完了すると、バケットが表示されます。 `「構成 (Configuration)」`タブをクリックします。「エンドポイント」セクションを参照し、パブリック・エンドポイントをメモします。(後で ibmcloud CLI と CDN の両方を構成するために必要になります)
例えば、回復力を「リージョン (Regional)」に設定したjp-tokリージョンのバケットの場合、パブリック・エンドポイントは`s3.jp-tok.cloud-object-storage.appdomain.cloud`になります。

#### バケットにファイルをアップロードする
次は、バケットにコンテンツファイルをアップロードします。
まず、IBM Cloudにログインし、バケットが作成されたリージョンをターゲットにします。（以下例）
```shell:リージョンのターゲット
ibmcloud target -r jp-tok
```

以下のCOSエンドポイントのURL（パブリック）を表す変数とバケット名を表す変数を設定します。
上記で作成した内容でコマンドを入力し今す。
```shell:エンドポイント変数
PUBLIC_ENDPOINT=s3.jp-tok.cloud-object-storage.appdomain.cloud
```
```shell:バケット名変数
BUCKET_NAME=<YOUR_BUCKET_NAME>
```

前にダウンロードした Web アプリケーションのコードのコンテンツ・ディレクトリーから、`index.html`、`a-css-file.css`、`a-picture.png`、および`a-video.mp4`という名前のファイルをアップロードします。 ファイルは、バケットのルートにアップロードします。
```shell:ファイルのアップロード
ibmcloud cos upload --bucket $BUCKET_NAME --key index.html --file index.html
ibmcloud cos upload --bucket $BUCKET_NAME --key a-picture.png --file a-picture.png
ibmcloud cos upload --bucket $BUCKET_NAME --key a-css-file.css --file a-css-file.css
ibmcloud cos upload --bucket $BUCKET_NAME --key a-video.mp4 --file a-video.mp4
```
そうすると、コンソールにてファイルのアップロードが確認できます。
![スクリーンショット 2022-12-09 16.26.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2626032/2ea4474a-aac1-7e07-0b06-0440b6dcecde.png)

ファイルがアップロードできたら、curl を使用して、ブラウザーでファイルにアクセスします。
```shell:ブラウザーでファイルにアクセス
curl http://$BUCKET_NAME.$PUBLIC_ENDPOINT/index.html
echo open http://$BUCKET_NAME.$PUBLIC_ENDPOINT/index.html
```
結果として、以下のように表示されます。
```
<html>
<head>
  <title>Files hosted in Cloud Object Storage and accessible through a Content Delivery Network</title>
  <link rel="stylesheet" href="a-css-file.css"></link>
</head>

<body>
  <div class="container">
    <section>
      <h2>A picture</h2>
      <div class="section-content">
        <img src="a-picture.png" width="640" height="360"/>
      </div>
    </section>
・
・
・
<省略>
```

#### CDNを使用しファイルをグローバルに提供する
Ojbect Storageの作成・設定が終わったらCDNの設定を行います。
CDNの作成のため、[コンソール](https://cloud.ibm.com/catalog/infrastructure/cdn-powered-by-akamai)にアクセスします。`作成`をクリックすると、オーダと共に設定画面に移ります。
![スクリーンショット 2022-12-09 17.12.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2626032/4e3ac6c3-597a-adc9-db3a-e7304bd4249e.png)

設定画面に映ったら、まず「Hostname」を設定します。ドメインはユーザーが管理でkるカスタム・ドメインのサブドメインに設定します。
その他`Optional`と表記されている箇所は空欄のままにします。
Ojbect Storageタブを開き、エンドポイントとバケット名を入力します。
ポート・タイプはHTTPS Portもチェックし、作成を行います。
![FireShot Capture 062 - IBM Cloud CDN Service - cloud.ibm.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2626032/a71c1a12-49cb-5edf-f952-fc8d06f4b9dd.png)

作成が完了したら、作成したインスタンスを選択します。
先ほど「DV SAN 証明書」を選択した場合は、Requesting certificateと表示されることがあります。 この状態が完了するまで 24 時間かかる場合があります。 利用可能になったら、`ドメイン検証の表示 (View domain validation)`をクリックして表示される手順に従ってください。 なお、これには数時間かかることがあります。 このチュートリアルを進めるには、新規 CDN を作成するだけにして、今回はHTTPSを有効にしたり、ワイルドカード証明書を選択したりしないでください。必ず別のホスト名を選択してください。

また、個別にDNSサービスにてドメインの用意が必要となります。もしドメインがない場合には、[こちら](https://cloud.ibm.com/classic/services/domains)でオーダーすることも可能です。
![スクリーンショット 2022-12-12 13.39.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2626032/de6ee6df-6055-c083-d311-1f361fc45f34.png)

その次に、ご利用のDNSプロバイダーに移動し、IBM CNAMEのHOSTNAMEのCNAMEレコードを作成します。
![スクリーンショット 2022-12-09 17.28.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2626032/350100d5-8fcb-ce5f-71c9-303fe31a1b93.png)

ここでパフォーマンスの向上を確認することができます。CDNを介してアクセスし、curlの出力を確認して、正常に接続されたことを確認します。
```shell:SUBDOMAINの確認
SUBDOMAIN=static.example.com（作成したドメインに置き換え）
curl http://$SUBDOMAIN/index.html
while sleep 1; do curl --output /tmp/fast http://$SUBDOMAIN/a-video.mp4; done
```
すると、以下のような結果が表示され、接続情報が確認できます。
```
<html>
<head>
  <title>Files hosted in Cloud Object Storage and accessible through a Content Delivery Network</title>
  <link rel="stylesheet" href="moon-cdn.example.com/a-css-file.css"></link>
</head>

<body>
  <div class="container">
    <section>
      <h2>A picture</h2>
      <div class="section-content">
        <img src="moon-cdn.example.com/a-picture.png" width="640" height="360"/>
      </div>
    </section>

    <section>
      <h2>A video</h2>
      <div class="section-content">
        <video src="moon-cdn.example.com/a-video.mp4" width="640" height="480" controls autoplay loop>
          Oh, it looks like your web browser does not support the <code>video</code> tag.
          You can still download the video <a href="moon-cdn.example.com/a-video.mp4">here</a>.
        </video>
      </div>
    </section>
  </div>
</body>
</html>
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  5867  100  5867    0     0  36233      0 --:--:-- --:--:-- --:--:-- 39375
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  5867  100  5867    0     0   142k      0 --:--:-- --:--:-- --:--:--  197k
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  5867  100  5867    0     0   186k      0 --:--:-- --:--:-- --:--:--  318k
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  5867  100  5867    0     0   150k      0 --:--:-- --:--:-- --:--:--  220k
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  5867  100  5867    0     0   186k      0 --:--:-- --:--:-- --:--:--  301k
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  5867  100  5867    0     0   185k      0 --:--:-- --:--:-- --:--:--  337k
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  5867  100  5867    0     0   160k      0 --:--:-- --:--:-- --:--:--  238k
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  5867  100  5867    0     0   154k      0 --:--:-- --:--:-- --:--:--  238k
```

以下のコマンドを使ってCOSを介してアクセスします。
```Shell:COSを介したアクセス
curl http://$PUBLIC_ENDPOINT/$BUCKET_NAME/index.html
while sleep 1; do curl --output /tmp/slow http://$PUBLIC_ENDPOINT/$BUCKET_NAME/a-video.mp4 ; done
```

ファイル index.html を置き換えて、cdn.html をアップロードします。
```Shell:cdn.htmlのアップロード
ibmcloud cos upload --bucket $BUCKET_NAME --key index.html --file cdn.html
```

設定が終わったら、構成タブのパブリックエンドポイントのURLをクリックすると、コンテンツが表示されることがわかります。
![スクリーンショット 2022-12-09 17.47.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2626032/d3a7db00-341a-a73f-c0a5-9d822815f9ec.png)
![スクリーンショット 2022-12-09 17.46.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2626032/6e687681-74cc-e251-99b7-d79b62a346e0.png)