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

• パート 1: セットアップ ?
• パート 2: 開(kāi)発環(huán)境 (現(xiàn)在の)
• パート 3: 実裝 (近日公開(kāi))

導(dǎo)入

パート 1 で Gmail API アクセスを設(shè)定した後、Cloudflare Workers 用の開(kāi)発環(huán)境を構(gòu)成します。このガイドは、Cloudflare ページとワーカーの両方でシームレスに動(dòng)作する堅(jiān)牢な開(kāi)発セットアップの作成に焦點(diǎn)を當(dāng)てています。

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

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

Cloudflareのワーカーとページ

労働者の概要

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

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

従業(yè)員はさまざまな Cloudflare ストレージ ソリューションと統(tǒng)合できます:

1. D1:

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

2. KV (キー-値):

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

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

   • 一貫した狀態(tài)管理
   • 分散システムに最適

4. R2:

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

5. ハイパードライブ:

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

Wrangler に関する重要な注意事項(xiàng)

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

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

npm install -g wrangler
wrangler init my-project

新しい推奨方法:

npm create cloudflare@latest

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

Cloudflareワーカーの言語(yǔ)環(huán)境

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

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

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

Cloudflare Pages アプリケーションは従來(lái)のワーカーとは異なります:

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

開(kāi)発環(huán)境のセットアップ

1. 前提條件

• Cloudflare アカウントを作成する
• GitHub リポジトリを Pages に接続します
• 展開(kāi)設(shè)定を構(gòu)成する

2. プロジェクト構(gòu)造のセットアップ

次のディレクトリ構(gòu)造を作成します:

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の設(shè)定

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

次のステップ

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

• メール送信機(jī)能の作成
• フォーム送信の処理
• エラー処理と検証
• テストと展開(kāi)

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

以上がCloudflare Workers を使用した Gmail 送信の実裝 - 開(kāi)発ガイドの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。