วิธีใช้ Cloudflare R2 ร่วมกับ Supabase Edge Functions เพื่อจัดเก็บไฟล์แบบปลอดภัยบน Edge

Overview — Overview

การจัดเก็บไฟล์บน Edge ช่วยลด latency และเพิ่มความปลอดภัยให้กับแอปพลิเคชันของคุณ Supabase Edge Functions เป็นจุดเชื่อมต่อระหว่างฟรอนท์เอนด์และบริการคลาวด์ Cloudflare R2 ให้พื้นที่จัดเก็บแบบไม่มีค่า egress fee บนเครือข่าย CDN ที่กระจายทั่วโลก บทความนี้จะสรุปวิธีตั้งค่า R2 ร่วมกับ Edge Functions อย่างเป็นขั้นตอน และชี้แนวทางรักษาความปลอดภัยสูงสุด

Why Combine Cloudflare R2 & Supabase Edge Functions — WhyCombine

การใช้สองบริการร่วมกันให้คุณได้ข้อดีหลายประการ

• **Latency ต่ำ: ฟังก์ชันทำงานที่ตำแหน่งใกล้ผู้ใช้ที่สุด ส่งไฟล์โดยตรงจาก R2 ที่อยู่บน CDN
• **ค่าใช้จ่ายคงที่: R2 ไม่เรียกเก็บค่า egress ทำให้ต้นทุนลดลงเมื่อมีการดาวน์โหลดจำนวนมาก
• **ความปลอดภัยแบบ Zero‑Trust: คีย์ลับจัดเก็บใน Supabase Secrets จึงไม่ต้องฝังไว้ในโค้ด
• **สเกลอัตโนมัติ: ทั้งสองบริการรองรับปริมาณการร้องขอระดับโลกโดยไม่มีการตั้งค่าเพิ่มเติม

Tip: หากคุณมีแค่ไฟล์สื่อ (ภาพ‑วิดีโอ) หรือเอกสารที่ต้องการให้ผู้ใช้ดาวน์โหลดเร็ว ๆ ควรเลือกโซลูชันนี้เป็นอันดับแรก

Prerequisites — Prereqs

ก่อนลงมือทำขั้นตอนต่อไป คุณควรมีสิ่งเหล่านี้

• บัญชี Supabase และโครงการที่เปิดใช้งาน Edge Functions
• บัญชี Cloudflare พร้อมโดเมนหรือ subdomain ที่ผูกกับ R2 bucket
• ความรู้พื้นฐานเกี่ยวกับ JavaScript/TypeScript และการเรียก API ด้วย fetch

Step‑by‑Step Setup — Setup

1. Create a Cloudflare R2 Bucket — CreateBucket

สร้าง bucket บน R2 เพื่อเป็นที่เก็บไฟล์ของคุณ

• เข้าสู่หน้า Dashboard ของ Cloudflare R2 Create Bucket
• ตั้งชื่อ bucket (เช่น `my‑app‑assets`) และเลือก Region ใกล้ผู้ใช้หลัก
• จดบันทึก Account ID, Bucket Name, Access Key ID และ Secret Access Key

2. Store R2 Credentials in Supabase Secrets — StoreSecrets

เก็บคีย์อย่างปลอดภัยเพื่อให้ Edge Functions ใช้งานได้

• ไปที่ Supabase Dashboard Settings API Environment Variables
• เพิ่มตัวแปร: `R2_ACCOUNT_ID`, `R2_ACCESS_KEY_ID`, `R2_SECRET_ACCESS_KEY`
• กำหนดค่าเป็นค่าส่วนตัว (private) เพื่อไม่ให้เปิดเผยต่อสาธารณะ

3. Write the Edge Function — WriteFunction

สร้างฟังก์ชันเพื่ออัปโหลดและดาวน์โหลดไฟล์จาก R2

```ts // supabase/functions/upload-file.ts import { serve } from "https://deno.land/x/sift/mod.ts";

serve(async (req) => { const url = new URL(req.url); if (url.pathname !== "/upload") return new Response("Not Found", { status: 404 });

// ตรวจสอบวิธีการ POST if (req.method !== "POST") return new Response("Method Not Allowed", { status: 405 });

const form = await req.formData(); const file = form.get("file") as File; if (!file) return new Response("File missing", { status: 400 });

// ดึงคีย์จาก Secrets const accountId = Deno.env.get("R2_ACCOUNT_ID"); const accessKey = Deno.env.get("R2_ACCESS_KEY_ID"); const secretKey = Deno.env.get("R2_SECRET_ACCESS_KEY");

// สร้าง URL ของ R2 (ใช้ S3‑compatible API) const r2Url = `https://${accountId}.r2.cloudflarestorage.com/${process.env.BUCKET_NAME}/${file.name}`;

const uploadRes = await fetch(r2Url, { method: "PUT", headers: { "Authorization": `AWS ${accessKey}:${secretKey}`, "Content-Type": file.type, "Cache-Controlpublic, max-age=31536000" }, body: file.stream(), });

if (!uploadRes.ok) return new Response("Upload failed", { status: 500 }); return new Response(JSON.stringify({ url: r2Url }), { headers: { "Content-Typeapplication/json" } }); }); ```

• บันทึกไฟล์ในโฟลเดอร์ `functions/` ของ Supabase โปรเจค
• ใช้คำสั่ง `supabase functions deploy upload-file` เพื่อนำไปใช้งาน

4. Create a Public Endpoint for Download — DownloadEndpoint

เพิ่มฟังก์ชันหรือใช้ URL โดยตรงจาก R2 เพื่อให้ผู้ใช้ดาวน์โหลดไฟล์

• หากต้องการควบคุมการเข้าถึง ให้สร้าง Edge Function อีกตัวหนึ่งตรวจสอบ JWT ก่อนทำ redirect ไปยัง URL ของ R2
• ตัวอย่างโค้ดสั้น ๆ

```ts serve(async (req) => { const token = req.headers.get("Authorization")?.split()[1]; // ตรวจสอบ token ด้วย Supabase Auth if (!await verifyToken(token)) return new Response("Unauthorized", { status: 401 });

const url = new URL(req.url); const filename = url.searchParams.get("file"); const r2Url = `https://${Deno.env.get("R2_ACCOUNT_ID")}.r2.cloudflarestorage.com/${process.env.BUCKET_NAME}/${filename}`; return Response.redirect(r2Url, 302); }); ```

5. Test End‑to‑End Flow — Test

ตรวจสอบว่าไฟล์อัปโหลดสำเร็จและสามารถดาวน์โหลดจาก Edge ได้

• ใช้ Postman หรือ cURL ส่ง `multipart/form-data` ไปยัง `/upload`
• รับ URL ของไฟล์ที่ตอบกลับ แล้วเปิดในเบราว์เซอร์ ตรวจสอบ latency และ cache header

Tip: เปิด DevTools Network เพื่อดูค่า `cf-cache-status` ควรเป็น `HIT` หลังจากครั้งแรก

Security Best Practices — Security

การรักษาความปลอดภัยของไฟล์บน Edge ต้องคำนึงถึงหลายมิติ

• **ใช้ Secrets เท่านั้น: อย่าเก็บ Access Key ไว้ในโค้ดหรือ environment ของ client
• **ตั้งค่า CORS ให้เข้มงวด: จำกัด origin ที่สามารถอัปโหลด/ดาวน์โหลดได้
• **ทำการตรวจสอบประเภทไฟล์ (MIME) และขนาดไฟล์: ป้องกันการอัพโหลดสคริปต์อันตราย
• **เปิดใช้งาน Object‑Level ACL: กำหนดให้ไฟล์ที่สำคัญเป็น `private` แล้วใช้ฟังก์ชันทำ signed URL เมื่อจำเป็น

Performance & Cost Comparison — Comparison

Caution: หากต้องเก็บไฟล์ที่ต้องการความเป็นส่วนตัวสูง ควรใช้ R2 พร้อม signed URL แทนการทำให้ไฟล์เป็น public อย่างสมบูรณ์

Integration with Supabase Auth — AuthIntegration

เพื่อให้ผู้ใช้เข้าสู่ระบบก่อนอัปโหลดหรือดาวน์โหลดไฟล์ ให้ผสาน Edge Function กับ JWT ของ Supabase

• ในฟังก์ชันตรวจสอบ token ด้วย `supabase.auth.api.getUserByCookie(req)` หรือเรียก `/auth/v1/user` ผ่าน service key
• หากผู้ใช้ไม่มีสิทธิ์ ควรตอบกลับเป็น 403 Forbidden ทันที

Monitoring & Logging — Monitoring

การมอนิเตอร์ช่วยให้คุณตรวจพบปัญหาเร็วขึ้น

• เปิด R2 Analytics ใน Cloudflare Dashboard เพื่อดูจำนวน request, ขนาดข้อมูลที่ส่งออก/เข้า
• ใช้ Supabase Edge Functions Logs (ผ่าน dashboard หรือ CLI) เพื่อตรวจสอบ error ของฟังก์ชัน
• ตั้งค่า webhook แจ้งเตือนเมื่ออัตราการ upload เกินเกณฑ์ที่กำหนด

Summary — Summary

การใช้ Cloudflare R2 ร่วมกับ Supabase Edge Functions ให้คุณสร้างระบบจัดเก็บไฟล์บน Edge ที่เร็ว ปลอดภัย และคุ้มค่าด้วยต้นทุนต่ำ

• สร้าง bucket บน R2 แล้วเก็บ Credential ใน Supabase Secrets
• เขียน Edge Function เพื่ออัปโหลด/ดาวน์โหลดโดยใช้ S3‑compatible API ของ R2
• ตรวจสอบและบังคับใช้ security policy (CORS, MIME, signed URL)
• ใช้ CDN ของ Cloudflare ลด latency ให้ผู้ใช้ทั่วโลกได้อย่างมีประสิทธิภาพ

สิ่งที่ควรจำ

• เก็บคีย์ลับใน Secrets เท่านั้น
• เปิด CORS เฉพาะโดเมนที่ต้องการ
• ตรวจสอบ MIME และขนาดไฟล์ก่อนบันทึก
• ใช้ signed URL สำหรับไฟล์ส่วนตัว
• ติดตาม Log ของ R2 & Edge Functions อย่างสม่ำเสมอ