CDNサービス「Cloudflare」でWebサイトをhttps化する

Webサイトのhttps化が簡単にできるCDNサービスを使ってhttps化を試してみました。

# CDNとは
Contents Delivery Networkの略で日本語でいうと「コンテンツ配信ネットワーク」の意味。インターネット上にキャッシュサーバーを分散的に配置してエンドユーザーに近い経路にあるキャッシュサーバーから画像や動画などのWebコンテンツを配信する仕組み。そうすることでWebサイトをスピードアップさせることができるらしいです。

# Cloudflareとは？
今回使うCloudFlareは日本国内シェア率が高いCDNサービスです。日本語のサービスサイトはこちら。
https://www.cloudflare.com/ja-jp/cdn/

上記のサイトを見るとわかるように料金は無料から使えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/34a54115-f6c6-7c23-84d7-11f9dba5ffe7.png)
CDNの機能だけでなく、WAFなどのセキュリティ機能やカスタマイズ、大規模なPVのあるサイト、サービスレベルによって課金プランが異なるようです。今回は無料プランを試します。

# 手順
## 前提
以下が揃っている前提で作業を行います。
- ドメイン手配済み（私はお名前ドットコムから購入）
- Webサイト構築し、独自ドメイン設定してhttp://hogehoge.com でアクセス可能な状態になっている
- Webサイトの外部用IPアドレスがわかっている

## アカウント登録
アカウントの新規作成を行います。[こちら](https://dash.cloudflare.com/) のサイトにアクセスするとログイン画面に飛びますので[Sign up]をクリックします。
アカウント作成画面でメールアドレスとパスワードを入力し、[Create Account]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/3f0ac810-a933-212c-531b-717bc16607b6.png)

https化したいサイトのURLを入力して[Add site]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/e91fa70f-c4a4-d9b3-4171-05629ccb649d.png)

プランはフリーを選択して[Confirm plan]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/2bbc16a0-497a-46da-659c-17bf0bd7bdd9.png)

DNS関連の設定画面が表示されますのでIPアドレスとドメインを紐づける設定の入力を行い[Continue]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/fdd9c7c5-a8e2-796a-b9a4-e9c7403b69a1.png)

>私はお名前ドットコムからドメインを購入し、GCPでWebサイトを立ててネームサーバー（NSレコード）を独自ドメインに変更した直後でこの作業を行っているので、この画面になった時には2件表示されてIPアドレスもお名前度とおコムのIPアドレス？なのか異なるIPアドレスが表示されましたが1件削除して1件はIPアドレス修正しただけでOkでした。

あれ。さっき独自ドメインでサイト表示させるためにお名前ドットコムでネームサーバー変更したばかりなのにまたネームサーバー変更するみたいです。この2つのネームサーバー名をドメインを購入したサイトの管理画面で変更してと書いてあるので
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/b7f36f81-290e-bf93-72c1-c2b4c2d3460a.png)

私の場合にはお名前ドットコムのネームサーバー変更画面でお名前ドットコム内のネームサーバーから外部のDNSに変更する作業をしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/3d1b681b-e6d7-4a27-2735-38e8d4790ab5.png)

お名前ドットコムのネームサーバー変更は最大72時間かかるらしいのでここは待つしかないですが今回私が試した時には1時間程度で反映されました。Cloudflareのダッシュボードでも「Great news! Cloudflare is now protecting your site」と表示されてます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/2d135665-81d0-e78f-b1d8-31a0f6a9228d.png)

上のメニュータブから[Crypto]をクリックして暗号化設定を管理するための設定を確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/3fbbe617-a434-66fa-333d-f558e37d444d.png)
下にスクロールすると「Always Use HTTPS」の設定項目がありますので[ON]にします。これはhttpスキームへのリクエストをhttpsスキームにリダイレクトする設定です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/ebe23fdc-3f3b-1f2b-f480-755501cfc58a.png)
さらに下にスクロールして表示される「Automatic HTTPS Rewrites」がONになっていない場合にはONに変更します。この設定はhttpとhttpsの混合コンテンツを修正してくれる設定みたいです。コンテンツの中の画像がhttpになってた場合とかに最適化してくれるものかなとイメージしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/122165bf-42f0-2ace-4214-1986ffd8cb09.png)

あとは一番上のSSLを「Full」に変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/f89b3758-08b5-f3ba-812f-d8dae6cea7ad.png)

これでhttpsでWebサイトにアクセスしてみると、最初はこのような警告表示になり詳細を表示ボタンクリックしてからアクセスする状態でしたが
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/49bf10cc-7b27-b9cf-f735-d5189a3843d0.png)

少し放置してたらhttpsで接続できるようになってました。（30分程度放置した気がします。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/55c65ce0-32a7-2faf-4719-b94c5fc7b9fb.png)



# 参考になるサイト
[CDNってそもそも何？なんかサーバの負荷が下がるって聞いたんだけど！〜Web制作/運営の幅が広がるCDNを知ろう第1回〜](https://knowledge.sakura.ad.jp/19191/)
[CDNとは何か？CDNを利用するメリットを図を使ってわかりやすく解説](https://www.1-firststep.com/archives/2142)
[Wikipedia「CDN」](https://ja.wikipedia.org/wiki/%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%83%87%E3%83%AA%E3%83%90%E3%83%AA%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF)
[1時間で出来る！最強のWordPress環境構築(永久無料)](https://qiita.com/ryuta69/items/dbb0db5cf7099b7a7cc4)