ウェブサイト検索

CloudFlare WorkersとKVを使用して静的サイトを提供する方法

エッジコンピューティングにおいて、ここ数年で革新が起きています。CloudFlare (CF) Workersは、サーバーサイドのJavaScriptアプリケーションを消費者に最も近いエッジで直接実行できるようにします。シンプルなアプリケーションでも複雑なアプリケーションでも、CloudFlare Workerは素晴らしいパフォーマンスを発揮し、従来のサーバーレスコンピューティングが提供する価格の一部で、コールドスタートもありません。

CF Workersの概念とともに、Workers KV（キー-バリュー）データストアという機能があり、データを直接ワーカーに保存および提供できるようになっています。この機能を使用することで、ワーカーをデータベースおよびファイルリポジトリとして利用し、エッジから直接静的サイトを提供することができます。この記事では、CloudFlare Workersにサポートされた新しいシンプルな静的サイトをどのようにプロビジョニングするかを探っていきます。

始めに

この記事では、すでにCloudFlareアカウントをお持ちで、そのアカウントがドメインにリンクされていることを前提としています。また、KV機能を提供するWorkers Bundledプランが必要です。以下の機能が利用可能で、これが無料プランと異なる点です。

  • 最低5ドルの料金と月ごとのリクエストごとに0.50ドル/百万件

    • 追加料金が発生する前に1000万件のリクエスト
  • 最大30のサイトを展開する
  • フリーワーカーズ.devサブドメイン

  • リクエストごとに最大50ミリ秒のCPU時間

    • 無料プランでは10msを提供しています
  • 常に最低のレイテンシ

  • ワーカーズ KV へのアクセス

    • 最大100のネームスペース（データベースを考えてください）
    • 1 GBのストレージ（追加のストレージは1GBあたり0.50ドル）

    • 1000万の読み取り操作、100万の書き込み、削除、リスト操作

      • 追加の100万回の読み取り操作ごとに$0.50、追加の100万回の書き込み、削除、リスト操作ごとに$5.00

CloudFlare Workers バンドルプランを購入した後は、Workers KV と CloudFlare Workers サイト機能を利用できるようになります。

ラングラーコマンドラインツール

サイトデプロイメントを作成するために、CloudFlareはWranglerコマンドラインツールを作成しました。Wranglerは、NPM（NodeJSパッケージマネージャー）またはCargo（Rust言語パッケージマネージャー）を介してインストールする必要があります。

NPMのインストール

npm i @cloudflare/wrangler -g

貨物

cargo install wrangler

Cargoに含まれるOpenSSLバイナリを使用したくない場合は、以下のコマンドラインを使用してシステムのOpenSSLをインストールすることを選択できます。これにより、インストールサイズが減少します。

cargo install wrangler --features sys-openssl

サイトを作成する

Wranglerをインストールし、Workersを購入したので、サイトを作成できます。この例では、より新しく簡単な認証方法を導入したWranglerの1.11.0バージョンを使用しています。また、PowerShellが使用されているシェル環境であると仮定していますが、WranglerはNPMやCargoのインストールをサポートする任意の環境で動作します。

Wranglerのログインとサイト作成

まず、Wranglerを使ってCloudFlareにログインします。そのために、新しいwrangler login機能を使用します。これにより、ブラウザが開くように促され、すでにCloudFlareで認証されている場合、認証は非常に迅速に行われます。それ以外の場合は、ログインし、WranglerがAPIトークンを自動的に設定します。

wrangler login

設定場所からわかるように、すべてのその後の操作をスムーズに行うためのAPIトークンが含まれる.tomlファイルがあります。

サイトを生成しています

次に、実際のサイトを生成します。generateコマンドを利用して、迅速にサイトを作成します。この時点で、サイトのディレクトリに移動し、git initを使用して新しいリポジトリを作成することもお勧めします。このステップは任意ですが、非常に推奨されます。

wrangler generate --site worker-site

サイト構造

Wranglerは次のサイト構造を作成します:

  • public - これはあなたのプロジェクトの静的アセットで、デフォルトのindex.htmlとfavicon.icoファイルが含まれています。
  • workers-site - 静的サイトのサービングを実行するJavaScriptで、index.jsファイルにあります。追加機能を加える必要がない限り、編集しないでください。
  • wrangler.toml - アカウントとプロジェクト情報を指す設定ファイルです。

プロジェクトのwrangler.tomlファイルを更新する必要があるという警告が表示されるかもしれません。最低限、サイトをプレビューするためには、wrangler.tomlファイルにaccount_idの値を追加する必要があります。

アカウントIDを取得する最も簡単な方法は、CloudFlareのダッシュボードに移動し、WorkersをクリックしてアカウントIDを見つけることです。

wrangler.tomlを開き、account_idの値をあなたのCloudFlareアカウントの値に更新してください。

サイトのプレビュー

サイトが正常に動作していることを確認するには、Wranglerのpreviewコマンドを使用してサイトを生成し、ブラウザ内にサイトを表示します。--watchパラメータを追加することで、サイトに加えた変更はブラウザウィンドウに即座に反映されます。

wrangler preview --watch

サイトを本番環境にデプロイする

次のステップは、このサイトを本番環境にデプロイすることです。wrangler.tomlファイルで調整が必要な設定はわずかです。

  • zone_id - ワーカーが適用されるウェブサイト。
  • ルート - ワーカーが適用される場所。
  • workers_dev - この値をfalseに変更してください。

CloudFlareダッシュボード内で適用したいWorkerのウェブサイトに移動し、概要ページに行き、APIセクションの下にあるゾーンIDを見つけることで、zone_idを取得できます。

ルートを設定するには、通常、トップレベルドメインまたはサブドメインのいずれかにページを提供する2つの形式のいずれかを使用します:

  • example.com/*
  • subdomain.example.com/*

あなたの wrangler.toml 設定の最終結果は、このようなものになるはずです:

name = "worker-site"
type = "webpack"
account_id = "my-account-id"
workers_dev = false
route = "example.com/*"
zone_id = "my-zone-id"
**[**site]
bucket = "./public"

最後に、publish コマンドを実行してサイトを公開し、定義されたゾーンとルートの下に Workers サイトを作成します。

wrangler publish

結論

CloudFlare Workers Sitesは、開発者が簡単にアクセスできる強力な機能を提供します。静的サイトは、インタラクティブ性がないため、非常に高速かつ安全です。ただし、すべてのユースケースがこれで解決されるわけではありませんが、使いやすさとサイトをホストするために必要なサードパーティのサーバーが不要であることは、この機能を非常に魅力的にしています！

関連記事: