最終更新日:2024-09-03 15:10:01
このクイックスタートガイドでは、ユーザーエージェントに基づいてコンテンツ書き換えを実行するシンプルなエッジクラウドアプリ関数を作成する方法を説明します。ユーザーがChromeブラウザを使用してWebサイトにアクセスすると、ページコンテンツが書き換えられます。それ以外の場合は、元のコンテンツが表示されます。
開始する前に、以下が完了していることを確認してください。
ここに関連付けられたテストドメインは、オンラインデバッグにのみ使用され、テスト環境で有効であり、本番環境には影響しません。
**テンプレートを使用すると、ストリームM3u8の書き換え、Webリンクの書き換え、集約されたリクエストの応答などの一般的な機能の関数をすばやく作成できます。**各テンプレートには、その機能の説明があります。関数を作成するためにテンプレートを選択すると、CloudIDEインターフェースに、対応する関数のサンプルコードが直接表示されます。テンプレートライブラリは継続的に更新されており、その他のテンプレートは現在開発中で、近日中に利用可能になります。
CloudIDE内では、コードを自由に記述、編集、デバッグできます。CloudIDEは、構文の強調表示、自動補完、エラープロンプトなどの機能を提供し、コードを効率的に記述できるようにします。CloudIDEの詳細については、CloudIDEドキュメントを参照してください。
以下は、ユーザーエージェントに基づいて異なるページコンテンツを返す方法を示す、事前に記述された関数です。
export async function handleRequest(request) {
let response = await fetch(request)
response.headers.set("X-Version", "petshop-v1")
if (isFromChrome(request) && isHtml(response)) {
console.log("rewrite page")
let body = await response.text()
const en = true
body = body.replace('Make Your Pets Happy',
en ? ':::R:::E:::W:::R:::I:::T:::T:::E:::N:::')
body = body.replace('Dolore tempor clita lorem rebum kasd eirmod dolore diam eos kasd.',
en ? 'Only when accessed using Chrome browser will the text be rewritten.</br>For other browsers, the original text will be displayed.</br>' : 'The content will be rewritten only when accessed using the Chrome browser</br>Other browsers will display the original text.</br>')
response.headers.delete('ETag')
response.headers.delete('Last-Modified')
return new Response(body, response);
} else {
console.log("pass page")
return response
}
}
function isFromChrome(request) {
let userAgent = request.headers.get("User-Agent")
return userAgent && userAgent.toLowerCase().includes("chrome")
}
function isHtml(response) {
let contentType = response.headers.get("Content-Type")
return contentType && contentType.toLowerCase().includes("text/html")
}
addEventListener("fetch", event => {
return event.respondWith(handleRequest(event.request))
})
各関数は、複雑な関数ロジックをより適切に整理および管理するために、複数のJavaScriptファイルを含むことができます。ただし、各関数には、関数のエントリポイントとして
index.js
ファイルを含める必要があることに注意してください。関数がトリガーされると、プラットフォームはindex.js
ファイルからコードの実行を開始します。
/ECA-test/pet-shop-website-template/index.html
です。リクエストパラメータ、リクエストパス、ヘッダー、または本文コンテンツを構成するには、テストページの対応するタブで1つずつ構成して、実際のリクエストシナリオをシミュレートします。User Agent
をそれぞれChrome
とFirefox
として構成した場合の実際のコードリターン効果を示しています。
デバッグが完了し、テスト要件を満たしたら、関数を本番環境にデプロイできます。エッジクラウドアプリのグレースケールデプロイメント機能を使用して、バッチデプロイメントスケジュールをプリセットできます。これは、設定された間隔でプラットフォームによってトリガーされます。エッジクラウドアプリを使用すると、段階的なデプロイメントのカスタムバッチサイズと比率、およびバッチアクティベーション時間を構成できます。変更をすぐに有効にする場合は、アクティベーション時間を現在の時間に設定するだけです。詳細については、グレースケールデプロイメントのドキュメントを参照してください。
設定が完了すると、グレースケールデプロイメントインターフェースで、作成した関数のデプロイメントレコードと現在のデプロイメントステータスを表示できます。デプロイする必要がなくなった場合は、停止をクリックしてデプロイメントスケジュールを終了できます。
トリガーを構成した後、関数はCDNetworksプラットフォームで構成されたアクセラレーションドメインで正式に有効になります。次に、CDNetworksコンソールの関数分析ページを通じて、実際のリクエスト数、平均実行時間、エラー率など、関数の稼働状態を監視できます。
ユーザーのリクエストヘッダーのUser Agent
がChrome
の場合:
ユーザーのリクエストヘッダーのUser Agent
がFirefox
の場合: