ใช้พื้นที่จัดเก็บ + CDN ของคุณเอง

ใช้ได้ใน: แพ็กเกจ API Velocity และ Momentum ไม่สามารถใช้ใน Ignite (ไม่มี CDN), แซนด์บ็อกซ์สำหรับนักพัฒนา (ไฟล์ในแซนด์บ็อกซ์เป็นไฟล์ชั่วคราว) หรือแพ็กเกจ WordPress (ใช้ CDN ของ smallPict แบบจัดการให้)

สรุปสั้นๆ: ในโหมด BYO smallPict จะเขียนไฟล์ต้นฉบับและรูปภาพที่ปรับแต่งแล้วลงในบักเก็ต ของคุณ และ CDN ของคุณ เป็นผู้ส่งไฟล์เหล่านั้น พื้นที่จัดเก็บและ CDN จะเชื่อมต่อพร้อมกันเสมอ: คุณไม่สามารถนำมาใช้อย่างใดอย่างหนึ่งโดยไม่มีอีกอย่างได้

BYO คืออะไร

Velocity และ Momentum มีโหมดการส่งสองแบบ คุณเลือกได้หนึ่งแบบใน แดชบอร์ด → CDN และพื้นที่จัดเก็บ

• แบบจัดการให้ (ค่าเริ่มต้น): smallPict เก็บไฟล์ต้นฉบับของคุณในพื้นที่จัดเก็บที่เข้ารหัสของ smallPict (ย้ายไปยังที่เก็บถาวรระยะยาวหลังจาก 90 วัน) และส่งรูปภาพที่ปรับแต่งแล้วจาก cdn.smallpict.app ไม่ต้องตั้งค่าใดๆ
• ใช้พื้นที่จัดเก็บ + CDN ของคุณเอง (BYO): คุณเชื่อมต่อบักเก็ตที่รองรับ S3 ในบัญชีของคุณเอง และ CDN ในบัญชีของคุณเอง งานใหม่ทุกงานจะเขียนไฟล์ต้นฉบับและไฟล์ที่ปรับแต่งแล้วลงในบักเก็ตของคุณ และ API จะส่งคืน URL บนโดเมน CDN ของคุณ

กฎที่ต้องเชื่อมต่อคู่กันมีขึ้นเพราะ smallPict ต้องทำงานการส่งได้ครบทั้งสองส่วน: เขียนไฟล์ และล้างสำเนาที่ล้าสมัยออกจากแคช บักเก็ตที่ไม่มี CDN จะทำให้คำขอล้างแคชไม่มีที่ไป ส่วน CDN ที่ไม่มีบักเก็ตก็จะไม่มีอะไรให้ส่ง

แบบจัดการให้ เทียบกับ BYO

ผู้ให้บริการที่รองรับ

พื้นที่จัดเก็บ (ใช้ได้แล้ววันนี้): Amazon S3, Cloudflare R2, Google Cloud Storage (S3 interoperability), Alibaba Cloud OSS, Tencent Cloud COS, DigitalOcean Spaces, SumoPod Storage, MinIO และบริการอื่นใดที่รองรับ S3 ผ่าน endpoint แบบกำหนดเอง (เช่น Hetzner, Vultr หรือ Wasabi)

CDN (ใช้ได้แล้ววันนี้): Cloudflare และ Amazon CloudFront

วางแผนไว้: Azure Blob Storage และ CDN อื่นๆ คุณสามารถขอสิทธิ์เข้าถึงก่อนได้ที่หน้า ผู้ให้บริการคลาวด์

ก่อนเริ่มต้น

1. คุณใช้แพ็กเกจ API Velocity หรือ Momentum และลงชื่อเข้าใช้ในฐานะผู้ดูแลบัญชี
2. คุณมีบักเก็ต และ CDN ที่ส่งไฟล์จากบักเก็ตนั้นผ่าน HTTPS
3. endpoint ของพื้นที่จัดเก็บเข้าถึงได้จากอินเทอร์เน็ตผ่าน HTTPS ส่วน endpoint แบบส่วนตัว ภายใน และ HTTP ธรรมดาจะถูกปฏิเสธ
4. คุณได้สร้างคีย์ที่มีสิทธิ์จำกัดสำหรับ smallPict แล้ว (ดู สิทธิ์ขั้นต่ำ ด้านล่าง) อย่าใช้คีย์ root หรือคีย์ผู้ดูแลของบัญชี

จากนั้นเปิด แดชบอร์ด → CDN และพื้นที่จัดเก็บ เลือก ใช้พื้นที่จัดเก็บ + CDN ของคุณเอง กรอกทั้งสองส่วน แล้วเลือก บันทึกพื้นที่จัดเก็บ + CDN smallPict จะเรียกใช้การตรวจสอบการเชื่อมต่อ (อธิบายด้านล่าง) และจะเปลี่ยนคุณไปใช้ BYO ก็ต่อเมื่อการตรวจสอบผ่านเท่านั้น

คู่มือการตั้งค่า

A. Amazon S3 + Amazon CloudFront

1. สร้างบักเก็ต ในภูมิภาคที่ต้องการ เช่น my-images ใน ap-southeast-1 เปิด Block Public Access ไว้
2. สร้าง CloudFront distribution โดยใช้บักเก็ตเป็น origin ใช้ Origin access control (OAC) เพื่อให้ CloudFront อ่านบักเก็ตได้ในขณะที่บักเก็ตยังเป็นส่วนตัว และใช้นโยบายบักเก็ตที่ CloudFront เสนอให้
3. ไม่บังคับ: โดเมนของคุณเอง เพิ่มชื่อโดเมนสำรอง (เช่น images.example.com) และใบรับรองให้กับ distribution แล้วชี้ระเบียน DNS ไปยัง distribution
4. สร้างผู้ใช้ (หรือบทบาท) IAM สำหรับพื้นที่จัดเก็บ ด้วยนโยบายนี้:

{  "Version": "2012-10-17",  "Statement": [    {      "Effect": "Allow",      "Action": [        "s3:PutObject",        "s3:GetObject",        "s3:DeleteObject"      ],      "Resource": "arn:aws:s3:::my-images/*"    }  ]}

5. สร้างผู้ใช้ IAM สำหรับ CloudFront (เป็นผู้ใช้คนเดียวกันได้) ด้วยนโยบายนี้ cloudfront:GetDistribution ไม่บังคับ หากมีสิทธิ์นี้ smallPict จะตรวจพบโดเมนของ distribution ได้เมื่อคุณเว้นโดเมน CDN ว่างไว้

{  "Version": "2012-10-17",  "Statement": [    {      "Effect": "Allow",      "Action": [        "cloudfront:CreateInvalidation",        "cloudfront:GetDistribution"      ],      "Resource": "arn:aws:cloudfront::123456789012:distribution/E2QWRUHAPOMQZL"    }  ]}

6. ในแดชบอร์ด:
   • ผู้ให้บริการพื้นที่จัดเก็บ Amazon S3 บักเก็ต my-images ภูมิภาค ap-southeast-1 เว้น endpoint ว่างไว้ (ระบบจะใช้ endpoint มาตรฐานของภูมิภาค) และกรอก access key ID และ secret ของพื้นที่จัดเก็บ
   • CDN Amazon CloudFront กรอก Distribution ID (เช่น E2QWRUHAPOMQZL), access key ID และ secret ของ CloudFront และโดเมน CDN (https://images.example.com) หากต้องการ เว้นโดเมนว่างไว้เพื่อใช้โดเมน *.cloudfront.net ของ distribution เอง

B. Cloudflare R2 + Cloudflare

1. สร้างบักเก็ต R2 เช่น my-images
2. เชื่อมต่อโดเมนที่กำหนดเอง กับบักเก็ต (R2 → บักเก็ตของคุณ → Settings → Custom Domains) เช่น images.example.com บนโซนในบัญชี Cloudflare เดียวกัน คำขอที่ไปยังโดเมนนั้นจะผ่านแคชของ Cloudflare อย่าใช้ URL สำหรับการพัฒนา r2.dev ในระบบใช้งานจริง
3. สร้าง R2 API token (R2 → Manage API tokens) ที่มีสิทธิ์ Object Read & Write โดยจำกัดเฉพาะบักเก็ตนี้ คัดลอก Access Key ID และ Secret Access Key ที่แสดง
4. สร้าง Cloudflare API token (My Profile → API Tokens) สำหรับโซนที่มีสิทธิ์ Zone → Cache Purge → Purge ส่วน Zone → Zone → Read ไม่บังคับ
5. ในแดชบอร์ด:
   • ผู้ให้บริการพื้นที่จัดเก็บ Cloudflare R2 บักเก็ต my-images endpoint https://<account_id>.r2.cloudflarestorage.com (แสดงในรายละเอียด S3 API ของบักเก็ต) ภูมิภาค auto และ Access Key ID และ Secret Access Key ของ R2
   • CDN Cloudflare กรอก Zone ID (หน้า Overview ของโดเมน ในส่วน API), API token และโดเมน CDN https://images.example.com

C. Google Cloud Storage + Cloudflare

Google Cloud Storage เชื่อมต่อผ่าน XML API ที่รองรับ S3 โดยใช้คีย์ HMAC

1. สร้างบักเก็ต เช่น my-images
2. สร้าง service account และมอบบทบาท Storage Object User (roles/storage.objectUser) ให้เฉพาะบนบักเก็ตนี้
3. สร้างคีย์ HMAC สำหรับ service account: Cloud Storage → Settings → Interoperability → Create a key for a service account คัดลอก access ID และ secret
4. ทำให้ CDN ของคุณอ่านไฟล์ที่ปรับแต่งแล้วได้ Cloudflare ดึงไฟล์จาก Cloud Storage ผ่าน HTTPS ดังนั้นออบเจ็กต์ใน optimized/ ต้องอ่านได้แบบสาธารณะ เมื่อใช้ uniform bucket-level access การมอบบทบาท Storage Object Viewer ให้ allUsers จะทำให้ทั้งบักเก็ตอ่านได้ รวมถึง originals/ ด้วย หากต้องการให้ไฟล์ต้นฉบับเป็นส่วนตัว ให้วางเลเยอร์ยืนยันตัวตนไว้ด้านหน้า (เช่น Cloudflare Worker ที่ลงนามคำขอไปยังบักเก็ต)
5. ชี้ระเบียน DNS ของ Cloudflare แบบ proxied ไปยัง Cloud Storage เช่น images.example.com โดยอาจตั้งชื่อบักเก็ตตามชื่อโฮสต์แล้วใช้ CNAME แบบ proxied ไปยัง c.storage.googleapis.com หรือใช้ Cloudflare Origin Rule ที่ส่งคำขอไปยัง storage.googleapis.com โดยมีชื่อบักเก็ตอยู่ต้นพาธ
6. สร้าง Cloudflare API token สำหรับโซนที่มีสิทธิ์ Zone → Cache Purge → Purge (Zone → Zone → Read ไม่บังคับ)
7. ในแดชบอร์ด: ผู้ให้บริการพื้นที่จัดเก็บ Google Cloud Storage บักเก็ต endpoint https://storage.googleapis.com ภูมิภาค auto และ access ID กับ secret ของ HMAC จากนั้น CDN Cloudflare กรอก Zone ID, API token และโดเมน CDN https://images.example.com

D. MinIO หรือพื้นที่จัดเก็บที่รองรับ S3 อื่นๆ + Cloudflare

ส่วนนี้ครอบคลุม MinIO และบริการที่รองรับ S3 เช่น Hetzner, Wasabi, Vultr, SumoPod, Alibaba Cloud OSS, Tencent Cloud COS และ DigitalOcean Spaces

1. สร้างบักเก็ต และคีย์ที่จำกัดเฉพาะบักเก็ตนั้น โดยมีสิทธิ์เขียน อ่าน และลบออบเจ็กต์ (ดู สิทธิ์ขั้นต่ำ ด้านล่าง)
2. ทำให้ CDN ของคุณอ่าน optimized/ ได้ เช่น ใช้นโยบายบักเก็ตที่อนุญาต s3:GetObject แบบไม่ระบุตัวตนเฉพาะ optimized/* บน MinIO:

{  "Version": "2012-10-17",  "Statement": [    {      "Effect": "Allow",      "Principal": {        "AWS": [          "*"        ]      },      "Action": [        "s3:GetObject"      ],      "Resource": [        "arn:aws:s3:::my-images/optimized/*"      ]    }  ]}

3. วาง Cloudflare ไว้หน้าบักเก็ต: สร้างระเบียน DNS แบบ proxied สำหรับ images.example.com ที่ชี้ไปยังโฮสต์สาธารณะของบักเก็ต หากผู้ให้บริการต้องการชื่อโฮสต์ของตนเองในคำขอ ให้เพิ่ม Cloudflare Origin Rule ที่เขียน header Host ใหม่ (และสำหรับโฮสต์แบบ path-style ให้เพิ่มชื่อบักเก็ตลงในพาธ)
4. สร้าง Cloudflare API token สำหรับโซนที่มีสิทธิ์ Zone → Cache Purge → Purge (Zone → Zone → Read ไม่บังคับ)
5. ในแดชบอร์ด: เลือกผู้ให้บริการจากตาราง กรอกบักเก็ต endpoint ภูมิภาค (auto หากผู้ให้บริการไม่มีภูมิภาค) และคีย์ เปิดคำขอแบบ path-style ในกรณีที่ตารางระบุ จากนั้นเลือก CDN Cloudflare กรอก Zone ID, API token และโดเมน CDN

สิทธิ์ขั้นต่ำ

ให้คีย์แก่ smallPict ที่ทำได้เฉพาะสิ่งที่จำเป็น บนบักเก็ตเดียว

การตรวจสอบการเชื่อมต่อ

ทุกครั้งที่คุณบันทึก (และเมื่อเลือก ตรวจสอบอีกครั้ง) smallPict จะตรวจสอบการเชื่อมต่อทั้งหมดก่อนนำไปใช้:

1. พื้นที่จัดเก็บ: เขียนไฟล์ทดสอบขนาดเล็กใน .smallpict-probe/ ในบักเก็ตของคุณ อ่านกลับ แล้วลบทิ้ง
2. Cloudflare: ส่งคำขอล้างแคชทดสอบแบบ URL เดียวหนึ่งครั้งไปยังโซนของคุณ
3. CloudFront: สร้าง invalidation ทดสอบหนึ่งรายการสำหรับพาธ /.smallpict-probe/... ซึ่งจะนับรวมในจำนวนพาธ invalidation ของ CloudFront ประจำเดือนของคุณ

หากขั้นตอนใดล้มเหลว จะไม่มีการเปลี่ยนแปลงใดๆ แดชบอร์ดจะแสดงสาเหตุไว้ข้างช่องที่เกี่ยวข้อง เช่น ชื่อบักเก็ตหรือ API token การตรวจสอบการเชื่อมต่อจำกัดไว้ที่ 5 ครั้งต่อนาที

การเข้าถึงบักเก็ตสำหรับ CDN ของคุณ

• optimized/ ต้องให้ CDN ของคุณอ่านได้: จะเปิดอ่านแบบสาธารณะเฉพาะ prefix นั้น หรือให้ CDN เข้าถึงบักเก็ตส่วนตัวผ่าน origin (CloudFront origin access control หรือโดเมนที่กำหนดเองของ R2) ก็ได้
• originals/ เป็นส่วนตัวได้ CDN ของคุณไม่จำเป็นต้องเข้าถึงเลย
• CORS จำเป็นเฉพาะเมื่อเบราว์เซอร์ดึงรูปภาพข้ามต้นทาง (cross-origin) จาก JavaScript (เช่น fetch() หรือ canvas) แท็ก <img> ธรรมดาไม่จำเป็นต้องใช้ หากจำเป็น ให้อนุญาต GET และ HEAD จาก origin ของเว็บไซต์คุณ

โครงสร้างออบเจ็กต์และ URL

โดเมน CDN สามารถมี path prefix ได้ เช่น https://example.com/images ซึ่ง URL จะเป็น https://example.com/images/optimized/<job_id>.<ext>

Header ของแคช

ไฟล์ที่ปรับแต่งแล้วจะถูกเขียนพร้อม Cache-Control: public, max-age=31536000, immutable ทุกงานจะได้คีย์ที่ไม่ซ้ำกัน ผลลัพธ์ใหม่จึงมี URL ใหม่เสมอ และแทบไม่ต้องล้างแคช อย่าให้กฎการแคชของ CDN เขียนทับ header นี้ด้วยระยะเวลาที่สั้นกว่า

การล้างแคช

• คำขอล้างแคชผ่าน API (POST /v1/purge) จะถูกส่งเป็นชุดไปยัง CDN ของคุณ
• บน Cloudflare ไฟล์จะถูกล้างตาม URL “ล้างทั้งหมด” จะล้างเฉพาะโฮสต์สำหรับส่งและ path prefix ของคุณ ไม่ใช่ทั้งโซน
• บน CloudFront ไฟล์จะถูกล้างด้วย invalidation “ล้างทั้งหมด” จะสร้าง invalidation /* พาธ invalidation ที่เกินโควตาฟรีรายเดือนของ CloudFront จะถูก AWS เรียกเก็บเงินจากบัญชีของคุณ

การเปลี่ยนโหมด

การเปลี่ยนโหมด จะไม่ย้ายไฟล์ที่มีอยู่ ไฟล์ที่ส่งไปแล้วจะยังใช้ URL เดิม เฉพาะงานใหม่เท่านั้นที่ใช้โหมดใหม่

• แบบจัดการให้ → BYO: งานใหม่จะไปยังบักเก็ตของคุณและส่งผ่าน CDN ของคุณ ไฟล์ที่อยู่บน cdn.smallpict.app แล้วจะยังอยู่ที่นั่น
• BYO → แบบจัดการให้: งานใหม่กลับไปใช้พื้นที่จัดเก็บและ CDN แบบจัดการให้ การตั้งค่าและคีย์ BYO ของคุณยังถูกบันทึกไว้แต่ไม่ได้ใช้งาน คุณจึงเปลี่ยนกลับได้โดยไม่ต้องกรอกใหม่ จนกว่าคุณจะเลือก ยกเลิกการเชื่อมต่อ
• ยกเลิกการเชื่อมต่อ: ลบคีย์และการตั้งค่า BYO ที่บันทึกไว้ และพาคุณกลับไปใช้แบบจัดการให้ ไฟล์ในบักเก็ตของคุณจะไม่ถูกแตะต้อง

เมื่อเกิดข้อผิดพลาด

• หาก smallPict เขียนลงบักเก็ตของคุณไม่ได้ ระบบจะลองใหม่ แล้วจึง ทำให้งานล้มเหลว พร้อมเหตุผลที่คุณอ่านได้ในการตอบกลับของ API
• แดชบอร์ดจะแสดงข้อผิดพลาดล่าสุดและเวลาที่เกิด พร้อมปุ่ม ตรวจสอบอีกครั้ง
• คุณจะได้รับ อีเมลหนึ่งฉบับต่อเหตุการณ์ ไม่ใช่หนึ่งฉบับต่องานที่ล้มเหลว
• smallPict จะไม่สลับกลับไปใช้พื้นที่จัดเก็บแบบจัดการให้เองเด็ดขาด ไฟล์ของคุณจะไม่ถูกเก็บไว้ในที่ที่คุณไม่ได้เลือก

ความปลอดภัย

• คีย์จะถูกเก็บไว้ใน ที่เก็บข้อมูลลับที่เข้ารหัส จะไม่แสดงอีก ไม่ถูกส่งคืนผ่าน API และไม่ถูกเขียนลงในล็อก
• หากต้องการเปลี่ยนคีย์ ให้กรอกคีย์ใหม่แล้วบันทึก การตรวจสอบการเชื่อมต่อจะทำงานด้วยคีย์ใหม่ เว้นช่องคีย์ว่างไว้เพื่อใช้คีย์ที่บันทึกไว้
• endpoint ของพื้นที่จัดเก็บและ CDN ต้องใช้ HTTPS endpoint ที่แปลงเป็นที่อยู่ส่วนตัว loopback, link-local หรือที่อยู่ภายในอื่นๆ จะถูกปฏิเสธ
• ใช้คีย์แยกต่างหากที่มีสิทธิ์จำกัดสำหรับ smallPict และเพิกถอนคีย์เหล่านั้นในคอนโซลของผู้ให้บริการหากคุณเลิกใช้ BYO