👻

Cloudflare Snippets のサンプル

2024/06/18に公開

先日Cloudflare Snippets がアルファ版として全Enterpriseユーザーが触れる形でリリースされました。
https://developers.cloudflare.com/rules/snippets/
またその機能の概要についてフューチャーのゲストブログに寄稿させていただきました。
https://future-architect.github.io/articles/20240614a/

この記事では他のサンプルをご紹介します。

Cloudflare Snippets とは

おさらいです。
SnippetsはCloudflare Workersのプラットフォームを流用することで、ルールとして新しくJavaScriptの断片(これをSnippetsと呼びます)を実行させることができるようになりました。

Cloudflare Workers との違い

Cloudflare Workers はWeb Workers という技術を活用しており通信にJavaScriptの処理を割り込ませることができます。

ただし専用ドメインが割り当てられるためアプリケーション、もしくはDNSでCNAMEやAレコードを設定する必要がある等の変更伴います。一方SnippetsはそのままCDN/WAFとして動作するのでより簡単に処理を割り込ませることができます。

また常に起動するWorkersと異なり、ルールエンジンと連携することで特定の条件に合致したときのみ起動、といった制御が可能です。

この性質により、一つ処理を一つのSnippetsとして分割しておくことで、一つの通信に複数のSnippetsを起動させる、ということも可能です。

また、Workersと異なり、最大実行時間は5msで最大メモリは2MB、パッケージの合計サイズは32KBと小さいのも特徴です。

実行サンプル

簡単なヘッダーの書き換えサンプルなどは以下の記事を参考にしてください。
https://future-architect.github.io/articles/20240614a/

Response Body の書き換え メンテナンスページなど

export default {
    async fetch(request) {
        // Fetch the original request
        const response = await fetch(request);

        // Create a new body for the response
        const newBody = `
            <!DOCTYPE html>
            <html lang="ja">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>ただいまメンテナンス中です。</title>
            </head>
            <body>
                <h1>ただいまメンテナンス中です。</h1>
            </body>
            </html>
        `;

        // Create a new response with the modified body
        const newResponse = new Response(newBody, {
            status: response.status,
            statusText: response.statusText,
            headers: response.headers
        });
        return newResponse;
    }
};

Headerの書き換えと別にSnippetsを作っておくことで、メインテナンスに入る直前のみルールをオンにすることが可能です。

現時点ではSnippetsがエッジで有効化されるまで数秒かかりますのでご注意下さい。

海外からのアクセスのリダイレクト

export default {
    async fetch(request) {
        // リダイレクト先のURL
        const redirectUrl = 'https://www.cloudflare.com';

        // リダイレクトレスポンスを作成
        return Response.redirect(redirectUrl, 301); // 301 は恒久的なリダイレクト
    }
};

このようにシンプルにリダイレクトが可能です。Snippetsの起動ルールをこのように設定することが日本以外からのアクセス時のみこのルールが起動します。

現時点では1Snippetsに対して1ルールのみ適応可能となっています。これは今後の発展に期待です。

Snippetsの起動順について


直感的ですが番号の若い順にルールが合致したものから処理されていきます。

Discussion