Alibaba Cloudの中国にも配信可能なCDNを活用してみた

#背景
Alibaba Cloudは中国で生まれたサービスです。中国本土から海外に接続するインターネット回線帯域が少ないために中国に向けて中国以外の国からWebサイトをアクセスさせるためにはAlibaba Cloudの中国リージョンのサーバを使ったり、CDN、Express Connect(専用線型のVPC間接続）、CEN(Cloud Enterprise Network）などのネットワークサービスを活用することが可能です。ただし、自分のような中国人でもなく中国の企業も持っていないものではできない部分もあるのでそのような注意点も踏まえてCDNの活用方法を調べてみました。
##利用したサービス
-OSS: 簡易なWebサイトを作るため
-CDN: Webサイトのコンテンツ配信ネットワーク
-DNS: 今回はAlibaba Cloud DNSではなくお名前.comで
#手順
簡易なWebサイトをたててそれをCDNに繋げることにしました。
1.CDNの仕組みと料金をチェック！
2.OSSによる静的Webサイト公開
3.CDNへのドメイン設定
4.設定後のモニタリング
5.その他機能のお試し
##CDNの仕組みと料金をチェック！
まずはCDNはどんなものかコンソール画面に入って確認します。よくある質問に価格の概要から設定方法まで必要な情報がリンクされていました。わかりやすいですね。
<img width="1142" alt="スクリーンショット 2018-12-11 22.16.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/113808/485d73be-2295-3d2f-962d-2a1e03197403.png">

料金は２種類あります。配信する帯域に応じた課金と配信したGByte単位で課金する従量制です。予算に限りがあるとか従量制が怖い時は帯域課金もいいですね。でも使わなくてもお金発生するので、今回は従量制で！
<img width="719" alt="スクリーンショット 2018-12-11 22.17.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/113808/e00b1cf0-a497-ea19-6fc6-ce3d99f5654f.png">

従量制の料金はこんな感じです。中国本土向けで4.6円/GBですね。日本向けというのはアジア太平洋１-AP1に含まれているようです。13.8円/GBですね。ちなみにECSのサーバから発生するアウトバンドのトラフィック課金料金が12.3円/GB(日本）なのでエリアによってCDNの方が安い、高いがありますね。
<img width="974" alt="スクリーンショット 2018-12-11 23.50.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/113808/7407f571-006e-faff-7f38-eb14da486f16.png">
その他の機能も少しみてみましょう。LIVEでライブビデオもCDNできるのですね。DCDNは次回以降にさせてください。
<img width="658" alt="スクリーンショット 2018-12-11 22.16.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/113808/b7740cdf-b97c-4cdd-e63f-a49c154a405d.png">
仕様確認はそんなところで、設定をやって行く中でも気になった部分書いていきます。


##OSSによる静的Webサイト公開
Alibaba Cloud OSSではHTMLファイルと画像ファイルを組み合わせて簡単にWebサイトを公開することができます。
###Webサイト用のバケットを作成してみます。
OSSのメニューから"+"ボタンをクリックするとバケット作成できます。
<img width="449" alt="スクリーンショット 2018-12-13 23.48.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/113808/9a0e6e46-26f4-47a9-bfbb-28c19b0e488c.png">

バケット名とリージョンを選びます。今回少し遊びで香港リージョンに作成してみました。香港のサーバができるということですね。中国本土から香港へのアクセスは比較的インターネット回線が潤沢と聞いています。中国国内にサーバ立てたれない場合は香港リージョンを活用することも手です。WebにするならばACLは「公開読み取り」としておく必要あります。
<img width="676" alt="スクリーンショット 2018-12-13 23.49.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/113808/f6bef100-7e8e-31f2-c920-67b75d6bf5c8.png">

バケットができたら、バケットの基本設定にある静的ページの設定を行います。ホームページのhtmlファイル名とエラー時のページを登録します。デフォルトのページはindex.html相当のファイルですね。
<img width="876" alt="スクリーンショット 2018-12-13 23.50.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/113808/9c6e197d-edeb-1b93-eb23-34804916c1e7.png">

###Webの公開
このあと、バケットにホームページのhtmlファイルと必要画像をアップしておきます。OSSのファイルメニューからアップロードをクリックします。
<img width="421" alt="スクリーンショット 2018-12-14 0.01.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/113808/dab3e621-8962-0fd7-3cc7-b237964d46c1.png">

ファイルをPCからドラック&ドロップでアップできます。
<img width="579" alt="スクリーンショット 2018-12-14 0.01.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/113808/aefa089e-3838-5e3d-5858-c72ed2026202.png">

ファイルをアップすればもうOSSのエンドポイントとバケット名を組み合わせたURLにアクセスするともうWebが公開されています。
今回はこんなURLになってます。
[http://alieaters-test-hk.oss-cn-hongkong.aliyuncs.com/](http://alieaters-test-hk.oss-cn-hongkong.aliyuncs.com/)
<img width="859" alt="スクリーンショット 2018-12-14 0.12.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/113808/42ad0c2e-cf06-c1f4-af0c-f66b24cf22ee.png">

##DNSの設定
CDNの設定でわかるのですが、OSSのURLを直接CDNの設定にしようとするとエラーになります。OSSドメインはもう登録すみと言われます。OSSそのものはCDNをすでに経由しているのかもです。
そこで、なにかドメインを用意します。今回自分の運用している下川井テニスクラブのサブドメインを使わせていただきます。お名前.comのDNSでサブドメインを作っておきます。
**alieaterstest.shimokawai.jp**
Alibaba CloudのDNSを使う場合はこちらのドキュメントセンター資料をみてください。
[https://jp.alibabacloud.com/help/doc-detail/58153.htm](https://jp.alibabacloud.com/help/doc-detail/58153.htm?spm=a21mg.l28256.b99.9.667f5dd3EPJjUB)
##いよいよCDNの設定
ここまで準備したものを使っていよいよCDNの設定を行います。こんな１枚画面で設定が行えます。ドメイン名は、先ほどDNSで準備したWebサイトのドメイン名ですね。ビジネスタイプというものが配信コンテンツの種類になります。ビデオやライブ配信も行えます。
<img width="609" alt="スクリーンショット 2018-12-12 0.06.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/113808/f38197dc-f4ed-a389-7b59-527735cf6c1b.png">

オリジンサイトの設定部分が、今回用意したOSSによるWebサイトとなります。OSSドメイン名を選択して、バケット名とエンドポイントを組み合わせたURLが表示されますので選択します。また、IPアドレスやオリジンサイトを選ぶことで普通のWebサイトも登録可能ですね。

ここで、なぜwww.shimokawai.jpというオリジンサイトを登録しなかったか解説しておきます。ポート番号が80と443を選べますが、SSLを利用する時は443ですね。でもこの443を選ぶということは、CDN側にもSSL証明書が必要になるということです。すでに持っているSSL証明書があれば、それをCDNにも登録することができます。www.shimokawai.jpのサイトはホスティング会社の関係でSSL証明書を私自身でもっていないため残念ながらSSL無しのサイトをOSSで用意したわけです。

<img width="560" alt="スクリーンショット 2018-12-12 0.22.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/113808/3ce7dd78-8728-834e-a030-69785ffc832f.png">

ちなみにオリジンサイトを選ぶとこんな感じに複数のオリジンサイトが登録可能になります。
<img width="513" alt="スクリーンショット 2018-12-11 22.58.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/113808/f576d33c-1490-84ed-6b93-41041ccdf810.png">

ここで中国本土向けに配信するように設定してみます。アクセラレーションリージョンを中国本土とします。配信エリアで中国本土、グローバル、アジア地域と区別できます。グローバルには中国本土は含まれません。
<img width="609" alt="スクリーンショット 2018-12-11 23.06.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/113808/5d2eab2c-428d-709f-573c-e9bc123e3b8f.png">

中国本土を選んで「次へ」とすると。。。やっぱり！こんな画面が出ます。
<img width="562" alt="スクリーンショット 2018-12-11 23.07.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/113808/544b4755-6386-bda1-e8e2-d26b20a853f8.png">

ICPライセンスとは中国本土内でWebサーバを立てる場合に必要になるWebサイト毎に中国政府から付与される認証番号です。この番号をとるには、中国人であったり、中国の企業登録があったりしないとできません。また、非商用ICPライセンスと商用ICPライセンスなどWebサイトの容態により複数種類があります。残念ですが今回はICPライセンスをとることまでできないので、配信先を香港含むアジアにしておきます。ICPライセンスに関してはこちらのドキュメントセンター資料も参考にしてください。
[ICP申請の手引き](https://jp.alibabacloud.com/help/doc-detail/36922.htm)

これで設定は最終的に以下のようにしました。
<img width="632" alt="スクリーンショット 2018-12-14 0.51.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/113808/37b9d43f-528c-b9aa-9236-67ae9d9d95e1.png">


##設定後の動作確認
設定が終わるとこのような画面で状況が確認できます。ここでCNAMEを登録しなさいと警告がでています。
<img width="950" alt="スクリーンショット 2018-12-12 0.09.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/113808/d9103f28-27a2-458b-b2d9-f567e4711583.png">

<img width="340" alt="スクリーンショット 2018-12-12 0.10.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/113808/1f6f6af3-543e-2956-c766-a667a5fe0731.png">

この状態ではWebサイト側とCDNが繋がってません。DNSにてCDNの作成したCNAMEにドメイン名を転送する必要があります。お名前.comの画面で参考にしてください。反映を早くするためTTLを360にしていますが、反映がされたあとは大きな数字に変更しておきましょう。
<img width="668" alt="スクリーンショット 2018-12-12 0.12.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/113808/dc2ac495-aff9-501e-a214-f1d22f083153.png">

これで設定完了！
<img width="954" alt="スクリーンショット 2018-12-12 0.28.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/113808/7dd6be89-3b76-76b0-1b89-93c0d5687e62.png">

左側メニューにあるツールを利用すると動作状況もわかります。SSLの443を使って登録してしまったのでエラーが残ってしまいました。
<img width="728" alt="スクリーンショット 2018-12-12 0.27.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/113808/d96aec9a-0ee7-9bd2-b8a5-641dab6cccd1.png">

##CDNの動作モニタリング
CDNの左メニューに便利なモニタリング機能がありますのでそれを使って初期動作をみてみました。
データモニタリングのリアルタイムモニタリングをみてみます。時間を指定することで動作直後からの状況もみれました。
<img width="960" alt="スクリーンショット 2018-12-12 0.33.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/113808/b078910a-2c9a-1610-933a-57ab96d4c06a.png">

<img width="952" alt="スクリーンショット 2018-12-12 0.33.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/113808/1e42ed01-f2f3-e92a-a88c-6fb220c86b4f.png">

使用状況のメニューでは全体のトラフィックもみれます。
<img width="953" alt="スクリーンショット 2018-12-12 0.34.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/113808/d86ac142-dfa3-8d50-886d-d2123bdd45ee.png">

OSS側のモニター画面でもどんなトラフィックがWebサーバから発生したかみてみました。
数回のアクセスがあったはずですが、保存容量とダウンロードのトラフィックがほぼ同じ！ということは、CDNで配信されているのでWebサーバからのトラフィックは１回のみだったことがわかりました。うまく効いてますね。
<img width="855" alt="スクリーンショット 2018-12-12 0.45.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/113808/a3a0af01-fdaf-8a97-42a7-5a806835f4eb.png">

##その他の機能
CDNではコンテンツの更新方法が課題になります。Alibaba Cloudでもリフレッシュ機能がありました。URL単位やファイル単位でCDNのキャッシュをリフレッシュできました。
<img width="694" alt="スクリーンショット 2018-12-12 0.39.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/113808/e002afd0-d75f-f207-ed9f-d746ceae545f.png">

<img width="957" alt="スクリーンショット 2018-12-12 0.39.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/113808/97745234-a048-7b03-2a26-1ec2fcb85c97.png">

#まとめ
-OSSでは静的Webページが簡単につくれます
-CDNの設定はシンプル。オリジンサーバをOSSにすることができます。
-モニタリング機能もグラフ化されていてすぐに使えます。

**注意ポイント**
-中国向けのCDNにはICPライセンスが必要でした。
-CDNにもSSL証明書必要なので注意しましょう。