10 Minutes で Web サイトに Yeap CDN と無料の HTTPS を導入する

このチュートリアルでは、既存の Web サイトに Yeap CDN を導入し、無料の HTTPS を有効にする手順をご紹介します。HTTP または HTTPS でアクセスできるオリジンと、DNS 設定を変更できるドメインがすでにあることを前提としています。ここでは www.example.com を例に説明します。

事前に用意するもの

• Yeap Cloud アカウント。ログイン先は console.yeap.cloud です。
• オリジンのアドレス。IP アドレスまたはホスト名に加え、待ち受けに使用しているプロトコルとポートを確認してください。
• ドメインの DNS を変更できる権限。現在の DNS プロバイダーで CNAME レコードを追加できるか、レジストラでネームサーバーを変更できる必要があります。

ステップ1：ドメインを追加する（約 2 minutes）

コンソールで CDN → ドメイン を開き、ドメインを追加するボタンをクリックします。セットアップウィザード（/cdn/domains/new）が開きます。ウィザードは、基本情報、プラン、接続方式、オリジン設定、設定手順の5ステップで構成されています。

「基本情報」で、次の項目を入力します。

• ドメイン：例として example.com を入力します。
• 回線 / グループ：使用するエッジノードのグループを選びます。
• SSL を有効化：オンにします。
• その他のオプション（WAF、HTTP バージョン、WebSocket、プロキシのタイムアウト）は、デフォルトのままで構いません。後からドメイン設定で変更できます。

「プラン」で CDN プランを選択します。試用には無料プランで十分です。有料プランでは、支払いを完了してから次に進みます。

ステップ2：接続方式を選択する（約 1 minute）

次の2つの方式があります。

NS 方式では、プラットフォームがドメインの DNS ゾーンを自動的に作成し、CDN に必要な CNAME レコードを登録します。このチュートリアルでは CNAME 方式を使用します。

ステップ3：オリジンを設定する（約 2 minutes）

「オリジン設定」で、高速化するホスト名ごとにオリジンを追加します。

• ホスト名：www.example.com を入力します。
• オリジンアドレス：オリジンの IP アドレスまたはホスト名を入力します。
• プロトコルとポート：オリジンが実際に待ち受けているものを指定します。例：HTTPS / 443。
• 負荷分散モード：オリジンアドレスが複数ある場合に、それらの間で負荷を分散する方法を指定します。
• HTTP バージョン、WebSocket、タイムアウトは必要に応じて調整できます。

オリジンが HTTP のみに対応している場合は、ここで HTTP を選択してください。その場合の注意点は、後述の SSL モードの説明でご紹介します。

ステップ4：CNAME レコードを追加する（約 2 minutes、別途 DNS の伝播時間が必要）

オリジンを保存すると、ウィザードは「設定手順」に進み、ホスト名ごとの CNAME の参照先を表示します。それをコピーして、DNS プロバイダーでレコードを追加します。

www.example.com.   300   IN   CNAME   <CNAME target shown in the console>.

次に、設定手順のページで「DNS チェック」をクリックし、レコードが反映されたことを確認します。次のコマンドでも確認できます。

dig +short CNAME www.example.com

多くの DNS プロバイダーでは、ゾーンの頂点（example.com 自体）に CNAME を設定できません。頂点のドメインを高速化するには、NS 方式、または DNS プロバイダーの CNAME フラットニング機能を使用してください。

ステップ5：無料の証明書を取得する（約 2 minutes）

ドメインの詳細ページで「SSL」タブを開きます（ドメインの詳細ページ：/cdn/domains/your-domain/ssl）。対象ホスト名の「証明書の管理」をクリックします。「自動証明書（Let's Encrypt）」の「HTTP-01 検証」をクリックしてください。

HTTP-01 は、認証局が http://www.example.com/.well-known/acme-challenge/... にリクエストを送り、ドメインを管理していることを確認する仕組みです。ドメインがすでに CDN を参照しているため、リクエストはエッジノードに届き、エッジノードが直接応答します。そのため、証明書を申請する前にステップ4を完了し、DNS が反映されるのを待ってください。

申請処理中は、ページに進捗状況（待機中、検証中、発行中）が表示されます。証明書の有効期間は 90 days で、期限前に自動更新されるため、お客様の作業は不要です。すでに独自の証明書をお持ちの場合は、代わりに同じページで PEM 形式の証明書と秘密鍵をアップロードできます。

ステップ6：SSL モードを選択して HTTPS を強制する（約 1 minute）

証明書はブラウザと CDN の間の通信を暗号化します。CDN とオリジンの間の通信は、SSL モードで制御します。

Full (strict) では、オリジン証明書が信頼できる CA によって発行され、ホスト名と一致している必要があります。最も簡単な方法は、オリジンにも Let's Encrypt 証明書をインストールすることです。より安全なモードから Off または Flexible に切り替えると、コンソールにセキュリティが低下する旨の警告が表示されます。

次に「HTTPS を強制」をオンにすると、エッジがすべての HTTP リクエストを HTTPS にリダイレクトします。すべて正常に動作することを確認したら、同じページで「HSTS」を有効にすることで、一定期間、ブラウザが HTTPS のみを使用するようにできます（一般的な max-age は 31536000 seconds、つまり1年です）。ブラウザが一度 HSTS を受け取ると取り消しが難しいため、最初は短い max-age を設定し、「サブドメインを含める」と「preload」は、すべてのサブドメインが HTTPS に対応していることを確認してから有効にしてください。

ステップ7：動作を確認する

# HTTP should redirect to HTTPS
curl -sI http://www.example.com/ | head -n 3

# HTTPS responds normally and carries a cache status header
curl -sI https://www.example.com/logo.png | grep -i -E "^HTTP|x-cache-status"

キャッシュ可能な静的アセットでは、通常、最初のリクエストは MISS となり、再度リクエストすると HIT が表示されます。動的ページでは、デフォルトで BYPASS や MISS と表示されることがありますが、これは正常です。

次に行うこと

• 「キャッシュ」タブでキャッシュの有効期間とクエリ文字列のモードを調整し、ヒット率を高めます。
• 「ファイアウォール」タブでアクセスルールを追加します。
• 「最適化」タブで圧縮などのパフォーマンス機能を有効にします。
• 「トラフィック」タブと「診断」タブで、トラフィックの確認やトラブルシューティングを行います。

この手順全体で実際に待ち時間が必要になるのは、DNS の伝播だけです。DNS レコードの TTL を短くしておけば、ドメインの追加から HTTPS の利用開始まで、約10分で完了できます。