12k
All articles

Cloudflare Workers 初心者ガイド

Cloudflare WorkersでD1データベース、Hyperdrive、静的アセット、Node.js互換性を活用したエッジ上のフルスタックアプリ構築を解説する。

OpenReplay Team
OpenReplay Team
Cloudflare Workers 初心者ガイド

はじめに

サーバー管理なしでモダンなWebアプリケーションを構築したい場合、Cloudflare Workersは単純なサーバーレス関数をはるかに超える魅力的なソリューションを提供します。従来のプラットフォームとは異なり、Workersは現在、フルスタックアプリケーションに必要なすべてを提供しています。D1によるSQLデータベース、Hyperdriveを介した既存のPostgreSQLやMySQLへの接続、静的アセットホスティング、そして広範なNode.js互換性—これらすべてがエッジで、ユーザーの近くで実行されます。

このCloudflare Workersチュートリアルでは、エッジベースの実行の理解から、モダンなデータベース接続とアセット管理を備えた完全なアプリケーションの構築まで、開始するために必要な基本的な概念とツールを取り上げます。

重要なポイント

  • Cloudflare WorkersはJavaScript、TypeScript、Pythonを実行でき、WebAssemblyにコンパイルされたRustも実行可能で、すべて世界中のユーザーから50ミリ秒以内のエッジロケーションで動作します
  • D1はエッジでの自動レプリケーションを備えたサーバーレスSQLiteデータベースを提供します
  • Hyperdriveは既存のPostgreSQLおよびMySQLデータベースへの効率的な接続を可能にします
  • Workersは静的アセットホスティングとNode.js互換性を備えたフルスタックアプリケーションをサポートします

Cloudflare Workersとは?

エッジベース実行の説明

Cloudflare Workersは、Cloudflareのグローバルデータセンターネットワーク上で実行されるJavaScript、TypeScript、Python、またはRust関数です。単一のサーバーで実行される代わりに、コードは各ユーザーに最も近いエッジロケーションで実行され、通常、地球上のどこからでも50ミリ秒以内でアクセス可能です。

このエッジベースモデルは、リクエストが中央サーバーに移動する必要がないため、アプリケーションの応答が高速になることを意味します。プラットフォームは自動的にスケーリングを処理します。10人のユーザーでも1000万人のユーザーでも、Workersは設定なしで調整します。

コアコンセプト:バインディングと環境

Workersはバインディングを使用してコードをリソースに接続します。これらは従来の環境変数ではなく、サービスへの直接接続です:

  • KVネームスペース - キーバリューストレージ用
  • D1データベース - SQL操作用
  • R2バケット - オブジェクトストレージ用
  • サービスバインディング - 他のWorkersへの接続用
  • Hyperdrive接続 - 外部データベース用

各バインディングは、Workerに渡されるenvオブジェクトのプロパティとして表示されます:

export default {
  async fetch(request, env, ctx) {
    // D1データベースへのアクセス
    const result = await env.DB.prepare('SELECT * FROM users').all()
    return Response.json(result)
  }
}

Cloudflare D1データベースによるモダンなデータベースオプション

D1:エッジでの本番環境対応SQL

Cloudflare D1データベースは、自動レプリケーションとバックアップを備えたSQLiteをエッジにもたらします。従来のサーバーレスデータベースとは異なり、D1はWorkersと同じロケーションで実行されるため、データベースクエリのネットワークレイテンシが解消されます。

D1データベースの作成は簡単です:

npx wrangler d1 create my-database
npx wrangler d1 execute my-database --file=./schema.sql

Workerはバインディングを通じてD1にアクセスし、クエリがローカルのように感じられます:

const user = await env.DB.prepare('SELECT * FROM users WHERE id = ?')
  .bind(userId)
  .first()

既存データベース向けのHyperdrive接続

Hyperdrive接続は、一般的な課題を解決します:プライベートネットワーク内のものを含む、既存のPostgreSQLまたはMySQLデータベースへのWorkersの接続です。HyperdriveはCloudflareのエッジで接続プールを維持し、接続オーバーヘッドを最大30倍削減します。

Hyperdriveのセットアップには最小限の設定が必要です:

npx wrangler hyperdrive create my-postgres \
  --connection-string="postgresql://user:pass@host:5432/db"

その後、WorkerはHyperdrive接続で使い慣れたデータベースライブラリを使用します:

import { Client } from 'pg'

export default {
  async fetch(request, env) {
    const client = new Client(env.HYPERDRIVE.connectionString)
    await client.connect()
    const result = await client.query('SELECT * FROM products')
    return Response.json(result.rows)
  }
}

フルスタックアプリケーションの構築

Workers静的アセットとルーティング

Workers静的アセットにより、別途ホスティングの必要がなくなります。HTML、CSS、JavaScript、画像がAPIコードと一緒にデプロイされます。プラットフォームは適切なキャッシュヘッダーと圧縮を使用して静的ファイルを自動的に提供します。

静的アセットの処理には、publicディレクトリを指すwrangler.tomlassetsエントリが必要です。

フルスタックWorkerのプロジェクト構造:

my-app/
├── src/
│   └── index.js        # Workerコード
├── public/
│   ├── index.html      # 静的アセット
│   ├── style.css
│   └── app.js
└── wrangler.toml       # 設定

ルーティングは静的リクエストと動的リクエストの両方を処理します:

export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url)
    
    if (url.pathname.startsWith('/api/')) {
      // APIルートを処理
      return handleAPI(request, env)
    }
    
    // 静的アセットを提供
    return env.ASSETS.fetch(request)
  }
}

Node.js互換性レイヤーのメリット

Node.js互換性レイヤーにより、数千のnpmパッケージがWorkersで動作するようになります。Web標準APIのみをサポートしていた初期バージョンとは異なり、Workersは現在、BuffercryptostreampathなどのNode.js組み込みモジュールをサポートしています。

wrangler.tomlでNode.js互換性を有効にします:

compatibility_flags = ["nodejs_compat"]

この互換性により、既存のNode.jsコードは最小限の変更で動作することが多く、従来のサーバーからの移行が簡単になります。

ローカル開発ワークフロー

環境のセットアップ

CloudflareのCLIツールであるWranglerから始めます:

npm create cloudflare@latest my-app
cd my-app
npm run dev

Wranglerは、すべてのバインディングにローカルでアクセスできるホットリロード開発を提供します。D1データベース、KVネームスペース、さらにはHyperdrive接続も開発モードで動作します。

テストとデプロイ

ローカル開発サーバーは本番環境の動作を模倣します:

# ローカルD1データベースでテスト
npx wrangler d1 execute DB --local --file=./seed.sql

# 本番環境へデプロイ
npm run deploy

その他のプラットフォーム機能

このチュートリアルはコアコンセプトに焦点を当てていますが、Workersは探索する価値のある追加機能を提供しています:

  • Queues - バックグラウンドジョブ処理用
  • R2イベント通知 - オブジェクトストレージトリガー用
  • 段階的デプロイメント - 安全なロールアウト用
  • Workers Analyticsと構造化ログ - 可観測性用

これらの機能は、アプリケーションの成長に合わせてシームレスに統合されます。

まとめ

Cloudflare Workersは、シンプルなエッジ関数からモダンなWebアプリケーション向けの完全なプラットフォームへと進化しました。サーバーレスSQL用のD1、既存のデータベース接続用のHyperdrive、組み込みの静的アセットホスティング、包括的なNode.js互換性により、最小限の設定でグローバルに実行されるフルスタックアプリケーションを構築できます。

シンプルなWorkerから始め、データ永続化のためにD1データベースを追加し、必要に応じてHyperdriveやR2などの機能を段階的に組み込んでいきます。プラットフォームはグローバル配信の複雑さを処理し、アプリケーションの構築に集中できるようにします。

よくある質問

Cloudflare Workersは従来のバックエンドサーバーを完全に置き換えることができますか?

はい、WorkersはAPIエンドポイント、データベース操作、認証、ファイルストレージを含むほとんどのバックエンドタスクを処理できます。SQL用のD1、キャッシング用のKV、オブジェクトストレージ用のR2、既存データベース用のHyperdriveにより、Workersは自動的にスケールする完全なバックエンドソリューションを提供します。

Workersと従来のホスティングの主なコストの違いは何ですか?

Workersはリクエストごとおよび計算時間ごとに課金され、1日10万リクエストの寛大な無料枠があります。固定月額コストの従来のホスティングとは異なり、実際の使用量に対してのみ支払います。これにより、Workersは小規模プロジェクトと高トラフィックアプリケーションの両方でコスト効率が良くなります。

WorkersにはCPU時間30秒の制限があるため、長時間実行タスクをどのように処理すればよいですか?

バックグラウンド処理にはQueuesを使用し、ステートフル操作にはDurable Objectsを使用するか、タスクを小さなチャンクに分割します。制限を超えるタスクの場合は、Workersを外部サービスと組み合わせるか、バッチ処理にCloudflareのスケジュールされたWorkersを使用することを検討してください。

Workersのデバッグは従来のNode.jsアプリケーションと異なりますか?

Workersはwrangler devによるローカル開発、リアルタイムログで表示されるコンソールログ、Chrome DevToolsとの統合を提供します。主な違いは、リクエストベースのライフサイクルを理解し、本番環境のデバッグに構造化ログを使用することです。

DevTools for the frontend

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers.

Star on GitHub12k

We use cookies to improve your experience. By using our site, you accept cookies.