Cloudflare Workers を使用した Gmail 送信の実装 - 開発ガイド

これは、Cloudflare Workers を使用した Gmail 送信の実装に関するシリーズのパート 2 です:

• パート 1: セットアップ ✅
• パート 2: 開発環境 (現在の)
• パート 3: 実装 (近日公開)

導入

パート 1 で Gmail API アクセスを設定した後、Cloudflare Workers 用の開発環境を構成します。このガイドは、Cloudflare ページとワーカーの両方でシームレスに動作する堅牢な開発セットアップの作成に焦点を当てています。

Cloudflareインフラストラクチャを理解する

Cloudflare は、グローバルに分散されたエッジ コンピューティング プラットフォーム上で動作します。トラフィックが増加すると、これらのサーバー間でページが複製され、ユーザーは最も近いサーバーにリダイレクトされます。このサーバーレス アーキテクチャにより、独自のサーバー、Docker コンテナ、または Kubernetes クラスターを管理する必要がなくなります。

Cloudflareのワーカーとページ

労働者の概要

Cloudflare ワーカーは、リクエスト処理を処理するサーバーレス関数です。 Cloudflare Pages がフロントエンド (静的コンテンツ) を処理する一方で、ワーカーはフォーム処理や電子メール送信などのバックエンド操作を管理します。

利用可能なストレージ オプション

従業員はさまざまな Cloudflare ストレージ ソリューションと統合できます:

1. D1:

   • SQLite ベースのサーバーレス SQL データベース
   • 最大 10 GB のストレージ容量
   • 30 日間のタイムトラベル機能

2. KV (キー-値):

   • グローバルに分散されたキーと値のストア
   • エッジ読み取り用に最適化

3. 耐久性オブジェクト:

   • 一貫した状態管理
   • 分散システムに最適

4. R2:

   • S3 互換オブジェクトストレージ
   • 大きなファイルの処理能力

5. ハイパードライブ:

   • PostgreSQL データベース コネクタ
   • 最適化された接続プーリング

Wrangler に関する重要な注意事項

Wrangler の使用パターンに対する最近の変更には注意が必要です。以前は、Wrangler は通常グローバルにインストールされていましたが、推奨されるアプローチが変更されました。

古い方法 (推奨されません):

npm install -g wrangler
wrangler init my-project

新しい推奨方法:

npm create cloudflare@latest

この変更により、プロジェクトの分離とバージョン管理が向上します。

Cloudflareワーカーの言語環境

Cloudflare Workers は Node.js に似ているように見えますが、重要な違いがあります。

• ネイティブ Node.js モジュールは利用できません
• コードはブラウザと互換性がある必要があります
• TypeScript がサポートされており、強力な型指定の利点が得られます
• Node.js は開発専用としてプロジェクトごとにインストールされます
• Node.js ライブラリの代わりに直接 HTTP リクエストを使用する必要があります

Cloudflareページアプリケーションを理解する

Cloudflare Pages アプリケーションは従来のワーカーとは異なります:

• これらは、Cloudflare Pages プラットフォーム上で実行される完全に統合された Web アプリケーションです
• ページ関数は、/functions ディレクトリを通じてこの機能を拡張します
• この統合により、Pages アプリケーション内で直接サーバーサイド処理 (メール処理など) が可能になります
• Pages Functions を使用する場合、個別の Worker デプロイメントは必要ありません

開発環境のセットアップ

1. 前提条件

• Cloudflare アカウントを作成する
• GitHub リポジトリを Pages に接続します
• 展開設定を構成する

2. プロジェクト構造のセットアップ

次のディレクトリ構造を作成します:

npm install -g wrangler
wrangler init my-project

次で初期化します:

npm create cloudflare@latest

3. 依存関係のインストール

your-project/
├── src/
│   └── pages/
│       └── index.astro
├── functions/
│   ├── contact-form.ts
│   └── tsconfig.json
├── public/
├── astro.config.mjs
├── package.json
└── wrangler.toml

4. TypeScriptの設定

functions/tsconfig.json に追加:

mkdir functions
touch functions/contact-form.ts functions/tsconfig.json wrangler.toml

プロジェクト tsconfig.json を更新します:

npm install --save-dev typescript @cloudflare/workers-types

次のステップ

このシリーズの次の記事では、次のような実装の詳細について説明します。

• メール送信機能の作成
• フォーム送信の処理
• エラー処理と検証
• テストと展開

パート 3 では、実際の実装とすべてをまとめますので、ご期待ください。

以上がCloudflare Workers を使用した Gmail 送信の実装 - 開発ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。