Cloudflare Snippets (alpha) を使う

2023年9月22日時点の情報です。
alpha のため、諸々の変更の可能性はあります。

Cloudflare Snippets

Cloudflare Snippetsで最もプログラム可能なSupercloudを実現

• JavaScript（モダン）、VCL（レガシー）、Apache .htaccessファイル（レガシー）など、様々な言語で書かれたコードのインポートをサポート
• Workers なしで、軽量な Workers 処理を柔軟に書ける
• すべてのプランレベルで追加料金なしで利用できる

Cloudflare Snippets の発表！トラフィック操作に関して、出来合いの Rule 群に当てはまらない要件の場合、Snippets を書くことで追加費用なくカスタマイズ可能に。Snippets は、JavaScript / VCL / Apache .htaccess に対応予定。来年クローズドベータ開始予定。すごすぎるhttps://t.co/hH4EHyN5SX

— kyhayama (@kyhayama) November 17, 2022

• Cloudflare Snippetsはアルファ版で提供を開始

アルファプログラムに参加したい方は、以下の waitlist にご参加ください。

動作

Cloudflare Snippets (alpha) · Cloudflare Rules docs

• Snippet Rule に対して Snippet を紐付ける
• 複数ルールマッチすれば、同じリクエストに対して Snippet が複数回、順次実行される
• 最大実行時間は5msで最大メモリは2MB、パッケージの合計サイズは32KB
• Origin Rules > Cache Rules > Configuration Rules > Single Redirects > Bulk Redirects > Snippets の順で実行
  • Phases list · Cloudflare Ruleset Engine docs

Snippet 作成

以下の手順で作成できます。

• Create a snippet in the dashboard · Cloudflare Rules docs

デフォルト Snippet サンプル

まさに Workers の手前で動く Workers という形ですが、
Snippet Rule によって複数フィールドを使ったマッチ実行条件を設定できたりと、ルール群ならではの面もあります。

(Workers は カスタムドメインやルートトリガー等のホスト名条件で起動してしまう）

sample_snippet.js

Copied!

// Enter Snippet code bellow

export default {
    async fetch(request) {
        const response = await fetch(request);

        // Clone the response so that it's no longer immutable
        const newResponse = new Response(response.body, response);

        // Add a custom header with a value
        newResponse.headers.append(
            "x-snippets-hello",
            "Hello from Cloudflare Snippets"
        );

        // Delete headers
        newResponse.headers.delete("x-header-to-delete");
        newResponse.headers.delete("x-header2-to-delete");

        // Adjust the value for an existing header
        newResponse.headers.set("x-header-to-change", "NewValue");
        return new Response('Welcome to Cloudflare Snippets!');
    },
};

動作確認

デフォルトのサンプルコードだと、最後の行だけが実質有効なので、以下の結果となります。

Copied!

% curl -s https://snippet.example.com/     
Welcome to Cloudflare Snippets!

Google Cloud Storage のプライベートオブジェクトにアクセス

以下の記事を参考にして、認証ヘッダをつける処理が Snippet で動くかを確認します。

• Cloudflare Workers から HMAC 認証を使って Google Cloud Storage を fetch してキャッシュする - Qiita
• AWS Signature V4 を TypeScript でスクラッチ実装してみた
• Google Cloud Storage origin (private) | Fastly Developer Hub

環境変数が使えないため、以下のパラメータを直打ちします。

• バケット名 YOUR_GCS_BUCKET_NAME
• リージョン asia-northeast1
  • Bucket locations によって変えてください。
• accessKeyId YOUR_GCS_ACCESS_KEY_ID
• secretAccessKey YOUR_GCS_SECRET_ACCESS_KEY

今後は Cloudflare Secrets Store にパラメータを保管して Snippet から利用できることが期待されます。

また、外部ライブラリの import が使えないため、ネイティブで書ける範囲で処理を行う必要があります。

上記 Snippet を適用した上で、以下のようにアクセスできることが確認できました。

まとめ

Workers のようで Workers でない Snippets でしたが、この程度の処理なら Snippets を使っていけそうです。

詳細なログの確認や Secrets Store との連携は今後に期待です。