Cloudflareを接続する（基本編）

こんにちは、yagiです。

本日は、Cloudflareを接続する方法について記載したいと思います。

Cloudflareについてはこちらをご参照ください。

Cloudflareネットワークインターコネクト

それでは早速やってみます。

今回はエンドツーエンドSSLの要件があったため、

Cloudflare - CloudFront - S3（Web静的ホスティング）の構成としています。

なお、Cloudflareではリダイレクトの設定やキャッシュの設定などもコンソールから簡単に行うことができます。

準備作業

まずはCloudFrontとS3でWeb静的ホスティング環境を構築しました。

なおCloudFrontにはACM証明書を取得して設定しています。

S3バケットを作成して、CloudFrontで設定します。

Cloudflare側での設定

コンソール へログインします。

アカウントの Home から、Add a site を選択し、サイト名を入れて Add site を押下します。

プランを選びます。ここではFreeを選択し、Continue を押下します。

次に、Cloudflare側でDNSの設定をします。

以下の通り CNAME を選択し、Name に 最初に登録したNameを入れ、Target にCloudFrontディストリビューション名を入力して、Save を押下し、Continue を押下します。

さらに、Cloudflare Nameservers欄に記載されたNSレコードを追加するよう、自身のネームサーバの変更を行います。

私はRoute53を使用しているので、以下の通りNSレコードを追加しています。

その後、Cloudflareコンソール側に戻り、 Done, check nameservers ボタンを押下します。

なお、ネームサーバの処理が更新されるのに最大24時間かかることがあるので、気長に待ちます。

完了するとCloudflareからメールが届きます。

設定が完了すると、ステータスが Active になります。

Cloudflare のサイト名をブラウザのURLに入力し、無事アクセスできていることを確認します。

なお、今回はエンドツーエンドのSSLの要件があったため、下記の通り、SSLの設定を Full(strict)で設定しています。

コンソール上の左側のSSL/TLS の overview より設定可能となります。

結論

Cloudflareを接続し、CloudFrontとS3Web静的ホスティングの構成の前段に配置してエンドツーエンドSSLを実現する方法について記載しました。

なお、ネームサーバにCloudflareのNSレコードを登録したくない場合などは他の方法もあります。

Cloudflareには他にもリダイレクトの設定やキャッシュ周りの設定などがコンソールで簡単に行える機能があるので、 次回以降また紹介できればと思います。