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

2.1 環境の準備

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

   

2. 作成したバケットを選択します。ファイルリストページで、必要なファイルをアップロードします。「ファイル資料」セクションからイメージセットを解凍し、イメージをバケットのルートディレクトリにアップロードします。

   

   説明

   イメージリソースは OSS バケットのルートディレクトリに保存することをお勧めします。

2.2 静的リソースのドメイン名の構成

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

2. 左側のナビゲーションウィンドウで、DNS > レコード > レコードの追加 を選択します。DNS レコードを追加します。次の表に設定例を示します。

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

3. レコードタイプには [イメージ/ビデオ] を選択し、[完了] をクリックします。

4. DNS レコードが作成されたら、CNAME 構成ガイドページから [ホスト名] と [レコード値] をコピーします。

   

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

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

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

7. ステップ 4 の CNAME 構成ガイドページに戻ります。[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. 「ファイル資料」からデモの python スクリプトと製品データをダウンロードします。パッケージを解凍した後、2 つのファイルを ECS サーバーにアップロードします。

6. セクション 2.2 で構成した静的リソースの高速化ドメイン名で、ItemInfo.json 内のドメイン名 images.example.com を置き換えます。

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

   

7. [Workbench] コンソールで、次のコマンドを入力して 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 構成ウィザード] ページに戻ります。[CNAME 検証] ステップで、[クエリ] をクリックします。[有効] と表示された場合、CNAME レコードは正常に構成されています。

   

   説明

   CNAME レコードが有効になるまで数分かかる場合があります。

4.1 エッジ関数の作成

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

2. [作成] をクリックします。[関数テンプレート] から Hello World を選択し、[次へ] をクリックします。

3. [関数名] を入力します。説明を追加し、[送信] をクリックします。

4. エッジ関数のエンドポイントを追加します。

   1. 左側のナビゲーションウィンドウで、[エッジコンピューティング] > Functions and Pages を選択します。エッジ関数リストページで、ターゲット関数をクリックします。

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

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

      

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

   5. [設定] セクションで、[レコードの追加] をクリックします。次の設定でレコードを追加し、[OK] をクリックします。

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

   6. 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 コンソール で、左側の [Web サイト] をクリックし、ターゲットサイトをクリックします。

2. [Web サイト] ページで、左側のナビゲーションウィンドウで [SSL/TLS] > [オリジン証明書] を選択します。

3. [オリジン証明書] セクションで、[オリジンプロトコルとポート] を見つけ、[構成] をクリックします。次の表の説明に従ってパラメーターを構成し、[OK] をクリックします。

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

   

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

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

2. エッジ関数リストページで、ターゲット関数を選択します。

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}${item.discountPrice}

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

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

5.1 デモの確認

1. エッジ関数を公開した後、次の方法で結果を確認します。

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

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

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

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

このデモでは、複数のリソースインスタンスを作成します。これらのリソースが不要になった場合は、課金を避けるためにそれらをリリースします。

1. ESA から Web サイトを削除します。

   ESA コンソール にログインします。左側のナビゲーションウィンドウで、[Websites] をクリックします。削除したい Web サイトを見つけ、[アクション] 列の [削除] をクリックします。

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

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

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

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

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

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