27
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-09-05

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

CDNとは

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

Cloudflareとは?

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

上記のサイトを見るとわかるように料金は無料から使えます。
image.png
CDNの機能だけでなく、WAFなどのセキュリティ機能やカスタマイズ、大規模なPVのあるサイト、サービスレベルによって課金プランが異なるようです。今回は無料プランを試します。

手順

前提

以下が揃っている前提で作業を行います。

  • ドメイン手配済み(私はお名前ドットコムから購入)
  • Webサイト構築し、独自ドメイン設定してhttp://hogehoge.com でアクセス可能な状態になっている
  • Webサイトの外部用IPアドレスがわかっている

アカウント登録

アカウントの新規作成を行います。こちら のサイトにアクセスするとログイン画面に飛びますので[Sign up]をクリックします。
アカウント作成画面でメールアドレスとパスワードを入力し、[Create Account]をクリックします。
image.png

https化したいサイトのURLを入力して[Add site]をクリックします。
image.png

プランはフリーを選択して[Confirm plan]をクリックします。
image.png

DNS関連の設定画面が表示されますのでIPアドレスとドメインを紐づける設定の入力を行い[Continue]をクリックします。
image.png

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

あれ。さっき独自ドメインでサイト表示させるためにお名前ドットコムでネームサーバー変更したばかりなのにまたネームサーバー変更するみたいです。この2つのネームサーバー名をドメインを購入したサイトの管理画面で変更してと書いてあるので
image.png

私の場合にはお名前ドットコムのネームサーバー変更画面でお名前ドットコム内のネームサーバーから外部のDNSに変更する作業をしました。
image.png

お名前ドットコムのネームサーバー変更は最大72時間かかるらしいのでここは待つしかないですが今回私が試した時には1時間程度で反映されました。Cloudflareのダッシュボードでも「Great news! Cloudflare is now protecting your site」と表示されてます。
image.png

上のメニュータブから[Crypto]をクリックして暗号化設定を管理するための設定を確認します。
image.png
下にスクロールすると「Always Use HTTPS」の設定項目がありますので[ON]にします。これはhttpスキームへのリクエストをhttpsスキームにリダイレクトする設定です。
image.png
さらに下にスクロールして表示される「Automatic HTTPS Rewrites」がONになっていない場合にはONに変更します。この設定はhttpとhttpsの混合コンテンツを修正してくれる設定みたいです。コンテンツの中の画像がhttpになってた場合とかに最適化してくれるものかなとイメージしました。
image.png

あとは一番上のSSLを「Full」に変更します。
image.png

これでhttpsでWebサイトにアクセスしてみると、最初はこのような警告表示になり詳細を表示ボタンクリックしてからアクセスする状態でしたが
image.png

少し放置してたらhttpsで接続できるようになってました。(30分程度放置した気がします。)
image.png

参考になるサイト

CDNってそもそも何?なんかサーバの負荷が下がるって聞いたんだけど!〜Web制作/運営の幅が広がるCDNを知ろう第1回〜
CDNとは何か?CDNを利用するメリットを図を使ってわかりやすく解説
Wikipedia「CDN」
1時間で出来る!最強のWordPress環境構築(永久無料)

27
22
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
27
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?