Edge Security Acceleration:ESA の関数とページを使用した Web サイトレンダリングの高速化

2.1 環境とリソースの準備

1. OSS コンソールにログインします。[バケット] ページに移動し、[バケットの作成] をクリックします。[バケット名] を入力し、他のパラメーターはデフォルト設定のままにして、[作成] をクリックします。

   

2. 作成したバケットを選択します。[ファイル] ページで、リソースファイルから商品画像セットを解凍し、画像をバケットのルートディレクトリにアップロードします。

   

   説明

   OSS の画像リソースはルートディレクトリに配置することを推奨します。

2.2 静的リソースの高速化ドメイン名の設定

1. ESA コンソールで、サイト管理 を選択します。サイト 列で、対象のサイトをクリックします。

2. 左側のナビゲーションウィンドウで、DNS > レコード を選択し、レコードの追加 をクリックします。レコードタイプ に基づいて DNS レコードを追加します。

   設定項目	値の例
   レコードタイプ	CNAME
   ホストレコード	images
   プロキシのステータス	有効
   レコード値 / オリジンサーバー	OSS
   back-to-origin タイプ	プライベートアクセス - 同一アカウント
   権限付与	同一アカウントのプライベートアクセスは、デフォルトで自動的に承認されます。
   OSS バケット	website-resources-shopping.*******.aliyuncs.com
   back-to-origin HOST	オリジンドメイン名に従う

3. レコードタイプで 画像とビデオ を選択し、完了 をクリックします。

4. DNS レコードが作成された後、CNAME 設定ウィザードページから ホストレコード と レコード値 をコピーします。

   

5. Alibaba Cloud DNS コンソールに移動します。左側のナビゲーションウィンドウで、[パブリック DNS] > [権威ドメイン名] を選択します。[権威ドメイン名] タブで、対象サイトのドメイン名を見つけて [DNS 設定] をクリックします。

6. [DNS 設定] で、[レコードの追加] をクリックします。次の設定でレコードを追加し、[OK] をクリックします。

   設定項目	値の例
   レコードタイプ	CNAME
   ホストレコード	images
   レコード値	images.example.com.**.*******.com
   TTL	10 分

7. 手順 4 の CNAME 設定ウィザードページに戻ります。手順 3. CNAME 検証が有効になりました で、検索 をクリックします。メッセージが CNAME レコードが有効になったことを示したら、CNAME 設定は完了です。

   

   説明

   CNAME レコードが有効になるまで数分かかる場合があります。すぐに有効にならない場合は、しばらく待ってください。

8. ブラウザで http://{高速化ドメイン名}/1.png を入力して、画像が正しく表示されることを確認します。

   説明

   404 エラーが発生した場合は、ファイルのディレクトリパスに基づいて URL を変更してアクセスしてください。たとえば、画像がルートディレクトリではなく `images` ディレクトリにある場合、アクセスパスは http://{高速化ドメイン名}/images/1.png となります。

3.1 環境の準備

1. ECS コンソールにログインします。

2. 左側のナビゲーションウィンドウで、[インスタンスとイメージ] > [インスタンス] を選択します。上部のメニューバーで、[中国 (杭州)] リージョンを選択します。

3. [インスタンス] ページで、[インスタンスの作成] をクリックします。次に、Elastic Compute Service の購入ページで ECS インスタンスを作成します。

3.2 動的リソースのデプロイ

1. ECS コンソールにログインします。

2. 左側のナビゲーションウィンドウで、[インスタンスとイメージ] > [インスタンス] を選択します。上部のメニューバーで、[中国 (杭州)] リージョンを選択します。

3. [インスタンス] ページで、対象のインスタンスを見つけ、インスタンス ID をクリックしてインスタンス詳細ページに移動します。

4. [リモート接続] をクリックし、[Workbench 経由で接続] を選択して、[今すぐログイン] をクリックします。ログインパスワードを入力してログインを完了します。

   

5. ソースファイルから Web サイトのコードと商品データをダウンロードし、パッケージを解凍して、2 つのファイルを ECS サーバーにアップロードします。

6. ItemInfo.json で、ドメイン名 images.example.com を静的リソースの実際の高速化ドメイン名 (手順 2.2 で設定したドメイン名) に置き換えます。

   次に、Workbench で、左上隅の [ファイル] > [新しいファイル管理を開く] > [ファイルのアップロード] をクリックし、2 つのファイルをサーバーにアップロードします。

   

7. [Workbench] コンソールで、次のコマンドを入力して、ローカルでシンプルな HTTP サーバーを起動します。

   cd /  # システムのルートディレクトリに移動します
   nohup python -m http.server 80 &  # ポート 80 で HTTP サービスをバックグラウンドで起動します

8. ブラウザで http://<public_IP>/ItemsInfo.json を入力して、動的な商品情報が正しく返されることを確認します。

3.3 動的リソースの高速化ドメイン名の設定

1. ESA コンソールで、サイト管理 を選択します。対象サイトの 操作 列で、DNS レコード設定 をクリックします。

2. 左側のナビゲーションウィンドウで、DNS > レコード を選択します。

3. レコードリストページで、レコードの追加 をクリックします。次の情報でパラメーターを設定し、次へ をクリックします。

   設定項目	値の例
   レコードタイプ	A/AAAA
   ホストレコード	www
   プロキシのステータス	有効
   レコード値/オリジン	10.0.x.x (対象の ECS インスタンスのパブリック IP アドレス)
   TTL	自動

4. レコードタイプで API インターフェース を選択し、完了 をクリックします。

5. DNS レコードが作成された後、CNAME 設定ウィザードページから ホストレコード と レコード値 をコピーします。

   説明

   設定完了後、現在のページを閉じないでください。手順 8 でこのページに戻り、CNAME レコードが有効になったことを確認する必要があります。

   

6. Alibaba Cloud DNS コンソールに移動します。左側のナビゲーションウィンドウで、[パブリック DNS] > [権威ドメイン名] を選択します。[権威ドメイン名] タブで、対象サイトのドメイン名を見つけて [DNS 設定] をクリックします。

7. [DNS 設定] で、[レコードの追加] をクリックします。次の設定でレコードを追加し、[OK] をクリックします。

   設定項目	値の例
   レコードタイプ	CNAME
   ホストレコード	www
   レコード値	www.example.com.**.*******.com (CNAME 設定ウィザードからのレコード値)
   TTL	10 分

8. 手順 5 の CNAME 設定ウィザードページに戻ります。手順 3. CNAME 検証が有効になりました で、検索 をクリックします。メッセージが CNAME レコードが有効になったことを示したら、CNAME 設定は完了です。

   

   説明

   CNAME レコードが有効になるまで数分かかる場合があります。すぐに有効にならない場合は、しばらく待ってください。

4.1 Functions and Pagesの作成

1. ESA コンソールにログインします。左側のナビゲーションウィンドウで、エッジコンピューティング > Functions and Pages を選択します。

2. ルーチンを作成 をクリックします。作成方法として Function Templates を選択します。Hello World テンプレートを選択し、[次へ] をクリックします。

3. ルーチン名 を入力し、必要に応じて説明を追加して、送信 をクリックします。

4. Functions and Pagesのエンドポイントを追加します。

   1. ESA コンソールにログインします。左側のナビゲーションウィンドウで、エッジコンピューティング > Functions and Pages を選択します。

   2. Functions and Pages リストページで、対象の関数をクリックします。

   3. 関数詳細ページで、ドメイン名 タブに切り替えて ドメイン名を追加 をクリックし、エンドポイント shopping.example.com をエッジ関数に割り当ててから、OK をクリックします。

   4. ドメインバインドエリアで、作成したエッジ関数のドメイン名を見つけます。操作 列で、DNS レコードの表示 をクリックします。DNS レコード管理ページで、エッジ関数ドメイン名の CNAME 値をコピーします。

      

   5. Alibaba Cloud DNS コンソールにログインします。左側のナビゲーションウィンドウで、[パブリック DNS] > [権威ドメイン名] を選択します。[権威ドメイン名] タブで、対象サイトのドメイン名を見つけて [DNS 設定] をクリックします。

   6. [DNS 設定] で、[レコードの追加] をクリックします。次の設定でレコードを追加し、[OK] をクリックします。

      設定項目	説明	値の例
      レコードタイプ	向けるドメイン名のタイプを選択します。	CNAME
      ホストレコード	ドメイン名のプレフィックスに基づいてホストレコードを入力します。	shopping
      レコード値	エッジ関数ドメイン名に対応する CNAME 値を入力します。	shopping.example.com.**.*******.com
      TTL	ドメイン名の更新サイクルです。デフォルト値のままにします。	10 分

   7. DNS レコードページを更新し、エッジ関数ドメイン名の [CNAME ステータス] が [未設定] から [設定済み] に変更されたことを確認します。

      説明

      CNAME レコードが有効になるまで数分かかる場合があります。すぐに有効にならない場合は、しばらく待ってください。

4.2 エッジ証明書の設定

ESA は HTTPS 暗号化をサポートしています。ESA のエッジ証明書で SSL 証明書を設定し、SSL/TLS 機能を有効にしてクライアントと ESA POP 間の通信を暗号化できます。このチュートリアルでは、無料証明書を申請することを推奨します。詳細については、エッジ証明書の設定方法をご参照ください。

1. ESA コンソールで、左側の サイト管理 をクリックします。サイト管理ページで、対象のサイトをクリックします。

2. 対象のサイト管理ページで、左側のナビゲーションウィンドウから エッジ証明書 を選択します。

3. エッジ証明書 で、SSL/TLS を見つけ、右側のスイッチをクリックしてこの機能を有効にします。

   

4. エッジ証明書 で、証明書の管理 を見つけ、無料証明書の申請 をクリックします。次の情報でパラメーターを設定し、OK をクリックします。

   設定項目	説明	値の例
   認証局	デフォルト値を選択します。	Let's Encrypt
   証明書ドメイン名	前の手順で設定した静的リソースドメイン名、動的リソースドメイン名、エッジ関数ドメイン名を入力します。	images.example.com www.example.com shopping.example.com

5. 無料証明書の申請には約 5～10 分かかります。証明書が発行されると、自動的に ESA プラットフォームにデプロイされます。手動操作は必要ありません。

4.3 オリジンプロトコルとポートの設定

SSL 証明書を設定した後、ESA はデフォルトでクライアントプロトコル (HTTPS) を使用して back-to-origin を行います。しかし、このチュートリアルでは、オリジンサーバーは HTTPS をサポートしていません。そのため、HTTPS を使用した back-to-origin は失敗します。ESA で back-to-origin に HTTP を指定する必要があります。

1. ESA コンソールで、左側の サイト管理 をクリックします。サイト管理ページで、対象のサイトをクリックします。

2. 対象のサイト管理ページで、左側のナビゲーションウィンドウから エッジ証明書 を選択します。

3. オリジン証明書 で、back-to-origin プロトコルとポート を見つけ、設定 をクリックします。次の情報でパラメーターを設定し、OK をクリックします。

   設定項目	説明	値の例
   オリジンプロトコル	オリジンサーバーは HTTPS をサポートしていないため、HTTP を選択します。	HTTP
   HTTP ポート	デフォルト値の 80 のままにします。	80

   

4.4 エッジ関数のテストと公開

1. ESA コンソールにログインし、左側のナビゲーションウィンドウで エッジコンピューティング > Functions and Pages を選択します。

2. Functions and Pages リストページで、対象の関数をクリックします。

3. 関数詳細ページで、コード タブに切り替えます。次の JavaScript コードを使用し、urlPrefix 変数をオリジンドメイン名 www.example.com に置き換えます。次に、保存 をクリックします。

   async function handleRequest(request) {
       const urlPrefix = 'www.example.com';
       // HTML ファイルのリクエストアドレス
       const staticDataUrl = 'http://' + urlPrefix + '/index.html';
       // 動的データのリクエストアドレス
       const dynamicDataUrl = 'http://' + urlPrefix + '/ItemsInfo.json';
   
       // Cache API を使用してページスケルトンデータをクエリします
       const htmlCache = await cache.get(staticDataUrl);
       let html = '';
       if (htmlCache === undefined) {
           const htmlResponse = await fetch(staticDataUrl);
           html = await htmlResponse.text();
           await cache.put(staticDataUrl, new Response(html, { headers: [["cache-control", "max-age=1000"]] }));
       } else {
           html = await htmlCache.text();
       }
   
       // オリジンサーバーから商品データをフェッチします
       const jsonResponse = await fetch(dynamicDataUrl);
       const json = await jsonResponse.json();
   
       // 動的データを div ブロックにカプセル化します
       let itemsHtml = '';
       for (const item of json.data) {
           const itemHtml = `
               <div class="bg-white overflow-hidden shadow rounded-lg">
                           <div class="p-4">
                               <img class="h-48 w-full object-cover" src="${item.image}" alt="Placeholder image of a product">
                               <h3 class="mt-2 text-gray-900 text-sm font-medium">${item.title}</h3>
                               <div class="mt-4">
                                   ${item.originalPrice}
                               </div>
                               <div class="mt">
                                   ${item.discountPrice}
                               </div>
       
                           </div>
                       </div>`;
           itemsHtml += itemHtml;
       }
   
       // 静的 HTML の #(itemsHtml) を動的データに置き換えます
       const finalHtml = html.replace("#(itemsHtml)", itemsHtml);
   
       // エッジ POP でレンダリングされた HTML ページをブラウザに返します
       return new Response(finalHtml, {
           headers: {
               "content-type": "text/html;charset=UTF-8",
           },
       });
   }
   
   export default {
       async fetch(request) {
           return handleRequest(request);
       },
   };
   

4. コードエディタで、右上の リクエスト をクリックしてローカルテストを実行します。実行ログはエディタの左下に表示されます。

5. ローカルテストが成功したら、ワンクリック公開 をクリックしてコードを本番環境にデプロイします。

5.1 ソリューションの検証

1. エッジ関数を公開した後、次の方法で結果を検証できます：

   • ブラウザを開き、手順 4.1 で作成したエッジ関数ドメイン名 (https://<your_edge_function_domain_name>) にアクセスします。

   • ページが正しく読み込まれ、商品情報が動的にレンダリングされることを確認します。

   • 開発者ツールを使用してネットワークリクエストを表示し、静的リソースがキャッシュから提供され、動的データがエッジ POP を介して高速化されていることを確認します。

5.2 リソースのクリーンアップ (任意)

このソリューションでは、複数のクラウドリソースインスタンスを作成しました。ソリューションのテストが完了した後、これらのリソースが不要になった場合は、次の手順に従って対応するプロダクトのインスタンスを削除し、追加料金が発生しないようにすることができます：

1. 高速化ノードを削除できます。

   ESA コンソールにログインします。左側のナビゲーションウィンドウで、サイト管理 をクリックします。サイト管理リストページで、右側の 操作 列にある 削除 をクリックします。

2. エッジ関数を削除します。

   ESA コンソールで、左側のナビゲーションウィンドウから エッジコンピューティング > Functions and Pages を選択します。Functions and Pages リストページで、対象の関数をクリックします。[基本情報] タブで、ルーチンを削除 をクリックします。

3. ECS インスタンスをリリースします。

   ECS コンソールにログインします。[インスタンス] ページで、対象のインスタンスを見つけます。[操作] 列で、[リリース] を選択し、プロンプトに従ってインスタンスをリリースします。

4. セキュリティグループを削除します：

   ECS コンソールにログインします。[セキュリティグループ] ページで、対象のセキュリティグループを見つけます。[操作] 列で、[削除] をクリックし、プロンプトに従ってセキュリティグループを削除します。