首頁 > web前端 > js教程 > 使用 Cloudflare Workers 實作 Gmail 傳送 - 開髮指南

使用 Cloudflare Workers 實作 Gmail 傳送 - 開髮指南

Mary-Kate Olsen
發布: 2024-11-25 12:00:17
原創
367 人瀏覽過

Implementing Gmail Sending with Cloudflare Workers - Development Guide

這是使用 Cloudflare Workers 實作 Gmail 發送系列的第 2 部分:

  • 第 1 部分:設定 ✅
  • 第 2 部分:開發環境(目前)
  • 第 3 部分:實作(即將推出)

介紹

在第 1 部分設定 Gmail API 存取權限後,我們現在將為 Cloudflare Workers 設定開發環境。本指南重點介紹創建一個與 Cloudflare Pages 和 Workers 無縫協作的強大開發設定。

了解 Cloudflare 基礎設施

Cloudflare 在全球分散式邊緣運算平台上運作。當流量增加時,頁面會在這些伺服器之間複製,並將使用者導向到最近的伺服器。這種無伺服器架構無需管理您自己的伺服器、Docker 容器或 Kubernetes 叢集。

Cloudflare 工作人員和頁面

工人概覽

Cloudflare Workers 是處理請求的無伺服器函數。 Cloudflare Pages 處理前端(靜態內容),而 Workers 則管理表單處理和電子郵件傳送等後端操作。

可用的儲存選項

Workers 可以與各種 Cloudflare 儲存解決方案整合:

  1. D1:

    • 基於 SQLite 的無伺服器 SQL 資料庫
    • 高達10GB儲存容量
    • 30天時間旅行功能
  2. KV(鍵值):

    • 全球分散式鍵值儲存
    • 針對邊緣閱讀進行了最佳化
  3. 耐用物

    • 一致的狀態管理
    • 分散式系統的理想選擇
  4. R2:

    • S3 相容的物件儲存
    • 大檔案處理能力
  5. 超級光碟機:

    • PostgreSQL 資料庫連接器
    • 最佳化連線池

關於牧馬人的重要說明

最近牧馬人使用模式的變化需要注意。以前,Wrangler 通常是全域安裝的,但建議的方法已更改:

舊方法(不建議):

npm install -g wrangler
wrangler init my-project
登入後複製
登入後複製

新推薦方法:

npm create cloudflare@latest
登入後複製
登入後複製

此變更提供了更好的專案隔離和版本管理。

Cloudflare Worker 中的語言環境

雖然 Cloudflare Workers 可能看起來與 Node.js 類似,但存在重要差異:

  • 原生 Node.js 模組不可用
  • 程式碼必須與瀏覽器相容
  • 支援 TypeScript,提供強大的打字優勢
  • 每個專案安裝 Node.js 僅用於開發
  • 必須使用直接 HTTP 請求而不是 Node.js 函式庫

了解 Cloudflare 頁面應用程式

Cloudflare Pages 應用程式與傳統 Workers 不同:

  • 它們是在 Cloudflare Pages 平台上運行的完全整合的 Web 應用程式
  • Pages Functions 透過 /functions 目錄擴充此功能
  • 此整合允許直接在您的頁面應用程式中進行伺服器端處理(例如電子郵件處理)
  • 使用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中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板