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

2.1 環境とリソースの準備

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

   

2. 前の手順で作成したバケットを選択します。ファイルリストページで、ファイルをアップロードします。デモ用のファイル資料 からプロダクト画像セットを解凍し、画像をバケットのルートディレクトリにアップロードします。

   

   説明

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

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

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

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

   パラメーター	値の例
   レコードタイプ	CNAME
   ホスト名	images
   プロキシのステータス	有効
   レコード値	OSS
   アクセスタイプ	プライベートアクセス (同一アカウント)
   承認	デフォルトでは、同じアカウントのプライベートアクセスは自動的に承認されます。
   OSS バケット	website-resources-shopping.*******.aliyuncs.com
   オリジン HOST	オリジンドメイン名に従う
   TTL	自動

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

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

   

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

6. 設定 ページで、レコードの追加 をクリックします。以下の設定でレコードを追加し、OK をクリックします。

   パラメーター	値の例
   レコードタイプ	CNAME
   ホスト名	images
   レコード値	images.example.com.**.*******.com
   TTL	10 分

7. ステップ 4 の CNAME 設定ウィザードページに戻ります。3. CNAME 検証が有効になりました で、検索 をクリックします。CNAME レコードが有効になっている場合、設定は完了です。

   

   説明

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

8. ブラウザで http://{高速化ドメイン名}/1.png を入力して、画像が表示されるかテストします。

   説明

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

3.1 環境の準備

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

2. 左側のナビゲーションウィンドウで、インスタンス & イメージ > インスタンス を選択します。トップメニューバーで、インスタンスがデプロイされているリージョンを選択します。

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

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

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

2. 左側のナビゲーションウィンドウで、インスタンス & イメージ > インスタンス を選択します。トップメニューバーで、インスタンスがデプロイされているリージョンを選択します。

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

4. リモート接続 をクリックし、ワークベンチ を選択して、今すぐサインイン をクリックします。ログインパスワードを入力してログインします。

   

5. デモ用のファイル資料 からウェブサイトのコードとプロダクトデータをコンピュータにダウンロードします。パッケージを解凍した後、2 つのファイルを ECS サーバーにアップロードします。

6. ItemInfo.json ファイル内のドメイン名 images.example.com を、ステップ 2.2 で設定した静的リソースの高速化ドメイン名に置き換えます。

   次に、左上隅で [ファイル] > [新しいファイルマネージャーを開く] > [ファイルのアップロード] を選択します。ダウンロードした 2 つのファイルをサーバーにアップロードします。

   

7. ワークベンチ コンソールで、次のコマンドを入力してインスタンス上でシンプルな HTTP サーバーを起動します。

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

8. ブラウザで http://<パブリック 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 コンソールで、左側のナビゲーションウィンドウで 設定 > パブリックゾーン を選択します。パブリックゾーンタブで、対象サイトのドメイン名を見つけ、設定 をクリックします。

7. 設定 ページで、レコードの追加 をクリックします。以下の設定でレコードを追加し、OK をクリックします。

   パラメーター	値の例
   レコードタイプ	CNAME
   ホスト名	www
   レコード値	www.example.com.**.*******.com (CNAME 設定ウィザード の レコード値)
   TTL	10 分

8. ステップ 5 の CNAME 設定ウィザードページに戻ります。3. 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. 関数詳細ページで、Domain Name タブに切り替え、ドメイン名を追加 をクリックします。エンドポイント shopping.example.com を関数に割り当て、OK をクリックします。

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

      

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

   6. 設定 ページで、レコードの追加 をクリックします。以下の設定でレコードを追加し、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. 対象のサイト管理ページで、左側のナビゲーションウィンドウで SSL/TLS > エッジ証明書 を選択します。

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) をオリジンフェッチに使用します。しかし、このデモのオリジンサーバーは HTTPS をサポートしていないため、オリジンサーバーへの HTTPS リクエストは失敗します。したがって、ESA でオリジンプロトコルとして HTTP を指定する必要があります。

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

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

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 ファイルのリクエスト URL
       const staticDataUrl = 'http://' + urlPrefix + '/index.html';
       // 動的データのリクエスト URL
       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://<関数のエンドポイント>) にアクセスします。

   • ページが読み込まれ、プロダクト情報が動的にレンダリングされるか確認します。

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

5.2 (オプション) リソースのクリーンアップ

継続的な課金を防ぐため、チュートリアル完了後は、特定の手順でリソースを削除する必要があります。

1. 高速化 POP の設定を削除します。

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

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

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

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

   ECS コンソール にログインします。[インスタンス] ページで、ターゲットインスタンスを見つけます。[アクション] 列で、[リリース] を選択します。プロンプトに従ってインスタンスをリリースします。

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

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