signed URL และ direct upload — แอปออกใบอนุญาต ไม่ได้แบกไฟล์เอง

ประโยคเดียวของบทนี้: แอปออกใบอนุญาต ไม่ได้แบกไฟล์เอง

ตอนนี้ไฟล์รูปอยู่ใน MinIO แล้ว · คำถามต่อไปคือใครเป็นคนขนไฟล์ระหว่างเบราว์เซอร์กับ MinIO · ถ้าให้ Rails ขนเอง รูปขนาด 600 KB ที่คนเปิดดู 1,000 ครั้ง = Rails ต้องอ่านไฟล์จาก MinIO แล้วส่งต่อ 600 MB

ระหว่างส่ง Rails ต้องกันคนรับคำขอไว้หนึ่งคนจนกว่าจะส่งเสร็จ · และ Rails มีคนรับคำขอจำกัด (Puma = โปรแกรมที่รับคำขอแทน Rails · ไฟล์ config/puma.rb ของเราตั้งไว้ 3 คน) · ถ้าคนรับคำขอทุกคนกำลังขนรูป คนที่แค่อยากเปิดหน้าบทความก็ต้องรอคิว

ทางที่ Active Storage ใช้คือ Rails ไม่ขนไฟล์ แต่ออก "ใบอนุญาต" ให้เบราว์เซอร์ไปคุยกับ MinIO เอง · ใช้สองทิศ:

เทียบของที่รู้: ถ้าเคยทำ JWT ใน บท 49 (Go) — คือไอเดียเดียวกัน: ข้อมูลที่เซ็นแล้ว + มีเวลาหมดอายุ ฝั่งที่รับตรวจลายเซ็นเองได้โดยไม่ต้องถามฐานข้อมูล · ต่างกันแค่ JWT เป็น "บัตรที่บอกว่าคุณเป็นใคร" ส่วน URL ที่เซ็นแล้วเป็น "บัตรที่บอกว่าเปิดไฟล์นี้ได้"

ขาออก ① — <img> ของเราชี้ไปที่ไหน

เปิดบทความที่มีรูปปก (บท 138 คุณอัปให้บทความไหนไว้ ใช้เลขนั้น · ในบทนี้ใช้บทความ 1 · ถ้ายังไม่มี ให้เข้า /posts/1/edit เลือกรูปแล้วกดบันทึกก่อน) · แล้วดูแท็ก <img> ที่ Rails ส่งมา · curl -s = ขอหน้าเว็บแบบเงียบ (ไม่โชว์แถบความคืบหน้า) · grep -o = ตัดมาเฉพาะส่วนที่ตรงกับรูปแบบ · รูปแบบ '<img[^>]*>' อ่านว่า "ตั้งแต่ <img ไปจนเจอ > ตัวแรก" = แท็กรูปหนึ่งแท็ก:

$ curl -s localhost:3000/posts/1 | grep -o '<img[^>]*>'
<img alt="" class="w-full max-h-96 object-cover rounded-box" src="http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsiZGF0YSI6NCwicHVyIjoiYmxvYl9pZCJ9fQ==--e48eee28ac016f73b5f68e117da8de5324704ad9/cover.jpg" />

มาจากบรรทัดนี้ใน app/views/posts/_post.html.erb (บท 138):

<%# app/views/posts/_post.html.erb (ในกิ่ง if full) %>
<%= image_tag post.cover, alt: "", class: "w-full max-h-96 object-cover rounded-box" if post.cover.attached? %>

src ไม่ได้ชี้ไปที่ MinIO · มันชี้กลับมาที่ Rails เอง แบ่งเป็น 4 ท่อน:

• /rails/active_storage/blobs/redirect/ — ทางเข้า (route) ที่ Active Storage เพิ่มให้แอปเองตั้งแต่ติดตั้ง · คำว่า redirect บอกว่าทางนี้จะส่ง 302
• eyJfcmFp…fQ== — ข้อมูลที่เข้ารหัสแบบ base64 (วิธีเขียนข้อมูลให้เป็นตัวอักษรล้วน ถอดกลับได้ ไม่ใช่การล็อก) · ลองถอดดู:

  $ echo 'eyJfcmFpbHMiOnsiZGF0YSI6NCwicHVyIjoiYmxvYl9pZCJ9fQ==' | base64 -d
  {"_rails":{"data":4,"pur":"blob_id"}}

  (| = ส่งข้อความต่อให้คำสั่งถัดไป · base64 -d = ถอดกลับ) · ได้ว่า "blob เลข 4 · ใช้เป็นรหัส blob" · ใครก็ถอดได้
• --e48eee28… — ลายเซ็นของ Rails (คำนวณจากรหัสลับของแอป) · ถ้าใครแก้ 4 เป็น 5 เพื่อแอบดูไฟล์ของคนอื่น ลายเซ็นจะไม่ตรง Rails ไม่ยอม (ลองแล้ว: แก้เลขแล้วขอ URL นั้น ได้ 404 Not Found · log บอก 0 queries = ลายเซ็นไม่ผ่านตั้งแต่ด่านแรก ไม่ได้ไปค้นตารางด้วยซ้ำ) · ทั้งก้อนสองท่อนนี้ Rails เรียกว่า signed_id
• cover.jpg — ชื่อไฟล์ติดท้ายไว้ให้คนอ่านรู้เรื่อง · Rails ไม่ได้ใช้หาไฟล์

ขาออก ② — Rails ตอบ 302 แล้วชี้ไป MinIO

ขอ URL นั้นด้วย curl -I (-I = ขอดูแค่หัวของคำตอบ ไม่เอาเนื้อ) · ใช้ src ของคุณเองแทน · หัวคำตอบยาว ข้างล่างตัดมาเฉพาะบรรทัดที่ต้องดู:

$ curl -I http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsiZGF0YSI6NCwicHVyIjoiYmxvYl9pZCJ9fQ==--e48eee28ac016f73b5f68e117da8de5324704ad9/cover.jpg
HTTP/1.1 302 Found
…
date: Tue, 10 Nov 2026 03:18:55 GMT
location: http://localhost:9000/wongnok-dev/16r6iq1cr83g24mawphb39a7j0oi?response-content-disposition=inline%3B%20filename%3D%22cover.jpg%22%3B%20filename%2A%3DUTF-8%27%27cover.jpg&response-content-type=image%2Fjpeg&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20261110%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261110T031855Z&X-Amz-Expires=300&X-Amz-SignedHeaders=host&X-Amz-Signature=7731b001629a439069df22519f98af2188713a248d8dd88e20c4fc2f8572e52f
content-type: text/html; charset=utf-8
cache-control: max-age=300, private
…
content-length: 0

• 302 Found + location: http://localhost:9000/… — "รูปไม่ได้อยู่ที่ผม ไปเอาที่ MinIO ตามที่อยู่นี้" · เบราว์เซอร์เดินตามเอง ผู้ใช้ไม่เห็นอะไรเปลี่ยน
• content-length: 0 — คำตอบของ Rails ไม่มีตัวไฟล์เลยสักไบต์
• cache-control: max-age=300, private — บอกเบราว์เซอร์ว่า "จำทางนี้ไว้ได้ 300 วินาที (5 นาที) · เก็บไว้ในเครื่องของคุณเท่านั้น" · ตัวเลข 300 นี้จะโผล่อีกรอบในหัวข้อถัดไป

ฝั่ง Rails ทำอะไรบ้าง ดูใน log (หน้าต่าง bin/dev) ของคำขอนั้น:

Started GET "/rails/active_storage/blobs/redirect/eyJfcmFp…/cover.jpg" for ::1 at 2026-11-10 10:18:55 +0700
Processing by ActiveStorage::Blobs::RedirectController#show as JPEG
  …
  ActiveStorage::Blob Load (0.7ms)  SELECT "active_storage_blobs".* FROM "active_storage_blobs" WHERE "active_storage_blobs"."id" = 4 LIMIT 1 …
  S3 Storage (0.6ms) Generated URL for file at key: 16r6iq1cr83g24mawphb39a7j0oi (http://localhost:9000/wongnok-dev/16r6iq1cr83g24mawphb39a7j0oi?…)
Redirected to http://localhost:9000/wongnok-dev/16r6iq1cr83g24mawphb39a7j0oi?…
Completed 302 Found in 9ms (ActiveRecord: 2.4ms (1 query, 0 cached) | GC: 0.0ms)

• Blob Load … "id" = 4 — เปิดใบรับฝากเลข 4 (เลขที่ได้จาก signed_id) เพื่อดู key = เลขช่องเก็บในโกดัง
• S3 Storage (0.6ms) Generated URL — เซ็น URL ใช้เวลาไม่ถึง 1 ms · เป็นการคำนวณในเครื่อง ไม่ได้คุยกับ MinIO เลย
• ไม่มีบรรทัด Downloaded file — Rails ไม่ได้โหลดรูป · ตรงกับประโยคในสไลด์หน้า 10 "Rails ไม่เคยแตะตัวไฟล์เลย — มันแค่เซ็นชื่อแล้วชี้ทาง"

อ่าน URL ที่เซ็นแล้วทีละท่อน

URL ใน location: ยาวมากแต่ไม่ได้ซับซ้อน · ผมตัดขึ้นบรรทัดใหม่ตรงเครื่องหมาย ? และ & ให้อ่านง่าย (ของจริงเป็นบรรทัดเดียว) · %2F %3B %20 คือวิธีเขียน / ; และช่องว่างใน URL

http://localhost:9000/wongnok-dev/16r6iq1cr83g24mawphb39a7j0oi
?response-content-disposition=inline%3B%20filename%3D%22cover.jpg%22%3B%20filename%2A%3DUTF-8%27%27cover.jpg
&response-content-type=image%2Fjpeg
&X-Amz-Algorithm=AWS4-HMAC-SHA256
&X-Amz-Credential=minioadmin%2F20261110%2Fus-east-1%2Fs3%2Faws4_request
&X-Amz-Date=20261110T031855Z
&X-Amz-Expires=300
&X-Amz-SignedHeaders=host
&X-Amz-Signature=7731b001629a439069df22519f98af2188713a248d8dd88e20c4fc2f8572e52f

MinIO รู้รหัสลับตัวเดียวกัน · พอได้คำขอ มันคำนวณลายเซ็นซ้ำจากทุกท่อนในคำขอ · ถ้าตรงกับ X-Amz-Signature = ร้านออกบัตรนี้จริงและไม่มีใครแก้ตัวอักษรสักตัว · แล้วค่อยเช็คว่ายังไม่หมดเวลา

$ curl -s "http://localhost:9000/wongnok-dev/16r6iq…&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=…" -w '\n[%{http_code}]\n'

$ curl -s "http://localhost:9000/wongnok-dev/16r6iq1cr83g24mawphb39a7j0oi?…&X-Amz-Date=20261110T032423Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=3da33dbc…" -w '\n[%{http_code}]\n'
<?xml version="1.0" encoding="UTF-8"?>
<Error><Code>SignatureDoesNotMatch</Code><Message>The request signature we calculated does not match the signature you provided. Check your key and signing method.</Message>
<Key>16r6iq1cr83g24mawphb39a7j0oi</Key><BucketName>wongnok-dev</BucketName>…</Error>
[403]

5 นาทีมาจากไหน — และหมดแล้วเห็นอะไร

เราไม่เคยตั้งค่าเลข 5 นาทีที่ไหน · ถาม Rails ตรง ๆ ใน bin/rails console (พิมพ์ชื่อค่าตั้งแล้ว Enter = ถามว่าตอนนี้เป็นเท่าไร):

Loading development environment (Rails 8.1.4)
wongnok-blog-all-in-one(dev):001> ActiveStorage.service_urls_expire_in
=> 5 minutes
wongnok-blog-all-in-one(dev):002> ActiveStorage.urls_expire_in
=> nil
wongnok-blog-all-in-one(dev):003> exit

• service_urls_expire_in → 5 minutes — อายุของ URL ฝั่ง MinIO (ตัว :9000) · เป็นค่าเริ่มต้นที่ Active Storage ใส่ให้เองเมื่อเราไม่ได้ตั้ง · อยากเปลี่ยนให้เขียน config.active_storage.service_urls_expire_in = 1.hour ใน config/environments/… (บทนี้ไม่ต้องทำ)
• urls_expire_in → nil — อายุของ URL ฝั่ง Rails (ตัว :3000 ใน src) · nil = ไม่หมดอายุ

ลองของจริง: เก็บ URL ของ :9000 ที่เซ็นตอน 10:18:55 ไว้ในตัวแปรของ shell (URL="http://localhost:9000/wongnok-dev/…" ทั้งเส้น) แล้วเปิดซ้ำตอนใกล้ครบ 5 นาที กับตอนเลย 5 นาที · (ไม่ต้องรอตามก็ได้ อ่านผลด้านล่างพอ)

• date +%T; = พิมพ์เวลาตอนนั้น · ; = จบคำสั่งนี้แล้วรันคำสั่งถัดไปต่อเลย
• -o /dev/null = ทิ้งเนื้อไฟล์ ไม่พิมพ์ออกจอ · -w '%{http_code} %{content_type} %{size_download}\n' = ให้ curl พิมพ์ status · ชนิดไฟล์ · จำนวนไบต์ที่ได้
• -i = โชว์หัวคำตอบก่อนเนื้อ

$ date +%T; curl -s -o /dev/null -w '%{http_code} %{content_type} %{size_download}\n' "$URL"
10:23:45
200 image/jpeg 618479
$ date +%T; curl -s -i "$URL"
10:24:05
HTTP/1.1 403 Forbidden
…
Content-Type: application/xml
Server: Silo
…

<?xml version="1.0" encoding="UTF-8"?>
<Error><Code>AccessDenied</Code><Message>Request has expired</Message><Key>16r6iq1cr83g24mawphb39a7j0oi</Key><BucketName>wongnok-dev</BucketName>…</Error>

• 4 นาที 50 วินาที → 200 image/jpeg 618479 (ได้รูปครบ 618,479 ไบต์)
• เลย 5 นาที → 403 + <Code>AccessDenied</Code><Message>Request has expired</Message> · ลายเซ็นยังถูก แต่บัตรหมดเวลาแล้ว · ในเบราว์เซอร์จะเห็นข้อความ XML ก้อนนี้แทนรูป
• Server: Silo — ชื่อโปรแกรมที่ตอบ · คือ MinIO ตัวที่คอร์สใช้ (image pgsty/silo) ไม่ใช่ของแปลกปลอม

แล้วหน้าบทความล่ะ — คนที่เปิดหน้าเว็บหลัง 5 นาทีจะเห็นรูปเสียไหม? ขอ URL ของ Rails (:3000 ตัวเดิมใน src) อีกรอบ:

# 10:24:23 — เลย 5 นาทีหลังเซ็นครั้งแรก (10:18:55)
$ curl -I http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsiZGF0YSI6NCwicHVyIjoiYmxvYl9pZCJ9fQ==--e48eee28ac016f73b5f68e117da8de5324704ad9/cover.jpg
HTTP/1.1 302 Found
…
date: Tue, 10 Nov 2026 03:24:23 GMT
location: http://localhost:9000/wongnok-dev/16r6iq1cr83g24mawphb39a7j0oi?response-content-disposition=inline%3B%20filename%3D%22cover.jpg%22%3B%20filename%2A%3DUTF-8%27%27cover.jpg&response-content-type=image%2Fjpeg&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20261110%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261110T032423Z&X-Amz-Expires=300&X-Amz-SignedHeaders=host&X-Amz-Signature=3da33dbc0a09fda5a8e0b0ea97bbca49233b31e3ca88d8a18fb854e1a91b3073
cache-control: max-age=300, private
…

ได้ 302 เหมือนเดิม แต่ X-Amz-Date เป็นเวลาใหม่ และลายเซ็นใหม่ · ทุกครั้งที่มีคนขอรูปผ่าน :3000 Rails เซ็นบัตรใบใหม่ให้ · สรุป: URL ของ MinIO หมดใน 5 นาที · URL ของ Rails ไม่หมด คนเปิดหน้าเว็บเมื่อไหร่ก็เห็นรูป

ทำไมไม่เปิด bucket เป็น public ไปเลย

ถ้าเปิด bucket ให้ทุกคนอ่านได้ ก็ไม่ต้องเซ็นอะไร URL สั้นกว่า · สไลด์หน้า 10 ให้เหตุผลที่ไม่ทำ 4 ข้อ เล่าเป็นภาษาคน:

1. URL หลุดแล้วเก็บคืนไม่ได้ — สไลด์ยกตัวอย่างว่า URL ไปโผล่ใน log · ใน referrer (หัวคำขอที่บอกเว็บปลายทางว่ามาจากหน้าไหน) · ในแชต · ของ public เปิดได้ตลอด · ของที่เซ็นแล้วหลุดไปก็ตายใน 5 นาที
2. ลบในแอปแล้วแต่ไฟล์ยังเปิดได้ — ลบข้อมูลใน DB แล้วลืมลบไฟล์ = คนที่จำ URL ไว้ยังเปิดได้ตลอดกาล (หัวข้อท้ายบทจะเห็นว่าเรื่องนี้เกิดกับเราได้แม้ bucket ไม่ public)
3. ของส่วนตัวกลายเป็นของสาธารณะเงียบ ๆ — วันหนึ่งมีคนอัปใบเสร็จ/บัตรประชาชนเข้า bucket เดียวกัน ไม่มีใครรู้ว่ามันเปิดให้โลกดู
4. เครื่องมือค้นหาเก็บไปได้ — Google อาจเก็บไฟล์ที่ไม่ควรถูกค้นเจอไปขึ้นผลค้นหา

เทียบร้าน: bucket public = เปิดประตูห้องในโกดังทิ้งไว้ ใครรู้เลขช่องก็หยิบของได้ ไม่ต้องมีบัตร และไม่มีวันหมดเวลา

bucket ของเราเป็น private (บท 138) · ลองเปิดไฟล์เดียวกันแบบไม่มีลายเซ็น:

$ curl -s http://localhost:9000/wongnok-dev/16r6iq1cr83g24mawphb39a7j0oi
<?xml version="1.0" encoding="UTF-8"?>
<Error><Code>AccessDenied</Code><Message>Access Denied.</Message><Key>16r6iq1cr83g24mawphb39a7j0oi</Key><BucketName>wongnok-dev</BucketName>…</Error>

ไม่มีบัตร = ไม่ได้เข้า · นี่คือสิ่งที่เราต้องการ

ขาเข้า — direct upload ดูของจริงใน Network

ทีนี้กลับทิศ: คนอัปรูป · บท 138 ใส่ direct_upload: true ไว้ในฟอร์ม · ผลของมันใน HTML ของหน้าแก้ไข:

$ curl -s localhost:3000/posts/1/edit | grep 'type="file"'
    <input class="file-input w-full mt-2" data-direct-upload-url="http://localhost:3000/rails/active_storage/direct_uploads" type="file" name="post[cover]" id="post_cover" />

data-direct-upload-url คือป้ายที่ ActiveStorage.start() (JavaScript ใน application.js บท 138) มองหา · ช่องไฟล์ที่มีป้ายนี้ ตอนกดบันทึก JavaScript จะดักฟอร์มไว้ก่อน → ไปขอใบอนุญาตที่ URL นี้ → ส่งไฟล์ขึ้น MinIO → แล้วค่อยปล่อยฟอร์มไป

ผมเปิด /posts/1/edit ใน Chrome · เปิด Network · เลือกรูป cover.jpg (1600×1000 ขนาด 618,479 ไบต์) · กดบันทึก · ได้คำขอตามลำดับนี้ (ตัดแถว mini-profiler-resources ออก — เป็นของ rack-mini-profiler เครื่องมือวัดความเร็วที่ติดมากับแอป บท 122 · URL ยาวตัดด้วย …):

• แถว ④ เป็น POST ที่มีช่อง _method=patch — ฟอร์ม HTML ส่งได้แค่ GET กับ POST · Rails เลยแนบช่องลับ _method บอกว่า "จริง ๆ คือ PATCH (แก้ข้อมูล)"
• 303 — ญาติของ 302 (บท 118): "บันทึกแล้ว ไปเปิดหน้า /posts/1 ต่อ" · เบราว์เซอร์จึงโหลดหน้าบทความในแถว ⑤

สไลด์หน้า 11 วาดไว้ 3 ขั้น (ขอใบอนุญาต · คืน URL · ส่งไฟล์ตรง) = แถว ① กับ ③ · ของจริงมี ② (CORS) แทรก และ ④ ส่งฟอร์มตามหลัง · ดูทีละขั้น:

ขั้น ① ขอใบอนุญาต — ส่งแค่ "ข้อมูลของไฟล์"

สิ่งที่เบราว์เซอร์ส่งไป (กดแถว ① → แท็บ Payload):

{"blob":{"filename":"cover.jpg","content_type":"image/jpeg","byte_size":618479,"checksum":"hEZP+bedIshBmJnIpYWJig=="}}

• filename · byte_size — ชื่อและขนาดไฟล์ (ไบต์)
• content_type — ชนิดไฟล์ที่เบราว์เซอร์บอกเอง (ดูจากนามสกุล .jpg) · Rails ไม่ได้เห็นไฟล์จึงตรวจไม่ได้ว่าจริงไหม — จำไว้ บท 140 จะจับเรื่องนี้
• checksum — ลายนิ้วมือของไฟล์ (ค่า MD5 ที่ JavaScript คำนวณจากเนื้อไฟล์ทั้งก้อน) · ไฟล์ต่างกันแค่ไบต์เดียว ลายนิ้วมือก็ต่าง

สิ่งที่ Rails ตอบกลับ (แท็บ Response · จัดบรรทัดให้อ่านง่าย · ตัดท่อน attachable_sgid ที่ยาวออก):

{
    "id": 4,
    "key": "16r6iq1cr83g24mawphb39a7j0oi",
    "filename": "cover.jpg",
    "content_type": "image/jpeg",
    "metadata": {},
    "service_name": "minio",
    "byte_size": 618479,
    "checksum": "hEZP+bedIshBmJnIpYWJig==",
    "created_at": "2026-11-10T10:18:40.613+07:00",
    "attachable_sgid": "…",
    "signed_id": "eyJfcmFpbHMiOnsiZGF0YSI6NCwicHVyIjoiYmxvYl9pZCJ9fQ==--e48eee28ac016f73b5f68e117da8de5324704ad9",
    "direct_upload": {
        "url": "http://localhost:9000/wongnok-dev/16r6iq1cr83g24mawphb39a7j0oi?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20261110%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261110T031840Z&X-Amz-Expires=300&X-Amz-SignedHeaders=content-length%3Bcontent-md5%3Bcontent-type%3Bhost&X-Amz-Signature=6d0a145959a4b155fcc93af4bac1034cec9fbdb6dff8bb2df7611afdf4838b19",
        "headers": {
            "Content-Type": "image/jpeg",
            "Content-MD5": "hEZP+bedIshBmJnIpYWJig==",
            "Content-Disposition": "inline; filename=\"cover.jpg\"; filename*=UTF-8''cover.jpg"
        }
    }
}

• "id": 4 · "key": "16r6iq…" — Rails เขียนใบรับฝาก (blob) ลงตารางแล้ว ตั้งแต่ขั้นนี้ ทั้งที่ไฟล์ยังไม่มาถึงโกดัง · ใน log เห็น ActiveStorage::Blob Create … INSERT INTO "active_storage_blobs" ของคำขอนี้
• "metadata": {} — ข้อมูลเสริมของไฟล์ (เช่นความกว้าง-สูงของรูป) · ตอนนี้ยังว่าง เพราะ Rails ยังไม่เห็นไฟล์ · จะถูกเติมทีหลัง (ดูย่อหน้า AnalyzeJob ด้านล่าง)
• "service_name": "minio" — เก็บที่ storage ชื่อ minio ใน config/storage.yml (บท 138) · attachable_sgid ที่ตัดออกเป็นรหัสอีกแบบไว้แปะรูปในเนื้อหา rich text ไม่ต้องสนใจ
• "signed_id" — ตัวเดียวกับที่เห็นใน src ของรูป · เดี๋ยวฟอร์มจะส่งตัวนี้
• "direct_upload" → "url" — ใบอนุญาต = URL ที่เซ็นแล้วแบบเดียวกับขาออก แต่ใช้สำหรับ PUT (ส่งของเข้า) · หมดใน 300 วินาทีเหมือนกัน
• X-Amz-SignedHeaders=content-length;content-md5;content-type;host — ต่างจากขาออกตรงนี้: ลายเซ็นครอบขนาดไฟล์ ลายนิ้วมือ และชนิดไฟล์ไว้ด้วย · เอาใบอนุญาตนี้ไปส่งไฟล์อื่นไม่ได้ · ผมลองส่งไฟล์ขนาดเท่ากันแต่เนื้อต่างกันด้วยใบอนุญาตแบบนี้ → MinIO ตอบ 400 ไม่รับ · ส่งไฟล์ที่ตรง → 200
• "headers" — หัวคำขอที่ JavaScript ต้องแนบตอน PUT ให้ตรงกับที่เซ็นไว้

ขั้น ② ③ ส่งไฟล์ตรงไป MinIO — และเรื่อง CORS

หน้าเว็บอยู่ที่ localhost:3000 แต่จะส่งของไป localhost:9000 (คนละพอร์ต = คนละ "ที่มา" ในสายตาเบราว์เซอร์) · เบราว์เซอร์จึงยิง OPTIONS ไปถามก่อน (CORS แบบที่บท 39 ทำให้ Gin ตอบ) · ผมยิงคำถามเดียวกันด้วย curl ให้เห็นคำตอบของ MinIO:

$ curl -s -i -X OPTIONS "http://localhost:9000/wongnok-dev/16r6iq1cr83g24mawphb39a7j0oi" \
    -H "Origin: http://localhost:3000" -H "Access-Control-Request-Method: PUT" \
    -H "Access-Control-Request-Headers: content-disposition,content-md5,content-type"
HTTP/1.1 204 No Content
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: content-disposition,content-md5,content-type
Access-Control-Allow-Methods: PUT
Access-Control-Allow-Origin: http://localhost:3000
Vary: Origin, Access-Control-Request-Method, Access-Control-Request-Headers
Date: Tue, 10 Nov 2026 03:23:11 GMT

• -X OPTIONS = ใช้ method OPTIONS · -H = แนบหัวคำขอ (สามบรรทัดนี้ลอกจากที่ Chrome ส่งจริง: "ผมมาจาก localhost:3000 · จะ PUT · พร้อมหัวพวกนี้") · \ ท้ายบรรทัด = คำสั่งยังไม่จบ ต่อบรรทัดถัดไป
• Access-Control-Allow-Origin: http://localhost:3000 + Allow-Methods: PUT — "ยอม · ส่งมาได้" → เบราว์เซอร์จึงยิง PUT ตัวจริงต่อ (แถว ③ ได้ 200) · บรรทัดที่เหลือ (Allow-Credentials · Vary · Date) ข้ามได้

ขั้น ④ ส่งฟอร์ม — Rails ได้แค่รหัส

เนื้อของฟอร์มที่ส่งไป Rails ในแถว ④ (ตัดช่องหัวข้อกับเนื้อหาให้สั้น):

------WebKitFormBoundaryiYgQeghA911I9ZZ4
Content-Disposition: form-data; name="_method"

patch
…
Content-Disposition: form-data; name="post[cover]"

eyJfcmFpbHMiOnsiZGF0YSI6NCwicHVyIjoiYmxvYl9pZCJ9fQ==--e48eee28ac016f73b5f68e117da8de5324704ad9
…

บรรทัด ------WebKitFormBoundary… คือเส้นคั่นระหว่างช่องของฟอร์ม · แต่ละช่องมีบรรทัด name="…" บอกชื่อช่อง เว้นบรรทัด แล้วตามด้วยค่า

ช่อง post[cover] ไม่มีรูป · มีแค่ signed_id ตัวที่ได้จากขั้น ① · ฝั่ง PostsController#update รับไปแปะป้ายให้โพสต์ (Attachment Create ใน log) จบ · เทียบให้เห็นชัด: ผมลองปิด ActiveStorage.start() ชั่วคราว (JavaScript ไม่ดักฟอร์ม · ไฟล์เลยถูกส่งไปกับฟอร์มแบบปกติ) แล้วอัปรูปเดิม · log ของคำขอส่งฟอร์มสองแบบต่างกันแบบนี้:

Parameters: {… "cover" => #<ActionDispatch::Http::UploadedFile:0x0000000133ea9168 @tempfile=#<Tempfile:/var/folders/…/RackMultipart20261110-94567-txj1vu.jpg>, @content_type="image/jpeg", @original_filename="cover.jpg", …
S3 Storage (13.7ms) Uploaded file to key: ivhoccqk8o86gm81qbgcggyldl8s (checksum: hEZP+bedIshBmJnIpYWJig==)

Parameters: {… "cover" => "eyJfcmFpbHMiOnsiZGF0YSI6NCwicHVyIjoiYmxvYl9pZCJ9fQ==--e48eee28ac016f73b5f68e117da8de5324704ad9", "category_id" => "1"}, …
ActiveStorage::Attachment Create (0.9ms)  INSERT INTO "active_storage_attachments" ("name", "record_type", "record_id", "blob_id", "created_at") VALUES ('cover', 'Post', 1, 4, …)

ข้อสังเกตเดียวที่ Rails แตะไฟล์: หลังบันทึกเสร็จ log มี [ActiveJob] [ActiveStorage::AnalyzeJob] … S3 Storage (12.9ms) Downloaded file from key: 16r6iq… · นี่คืองานหลังร้าน (background job — งานที่ Rails ทำทีหลังโดยผู้ใช้ไม่ต้องยืนรอ · เรื่องของบท 142) ที่โหลดรูปไปอ่านความกว้าง-สูงหนึ่งครั้ง · ไม่ได้เกิดระหว่างที่ผู้ใช้รอหน้าเว็บ

redirect vs proxy — บอกทางให้ไปรับเอง หรือเดินไปหยิบมาให้

ขาออกที่เราใช้อยู่เรียกว่า redirect mode (ค่าเริ่มต้น) · Active Storage มีอีกโหมดชื่อ proxy = Rails โหลดไฟล์จาก MinIO แล้วส่งต่อให้เบราว์เซอร์เอง · ฟังดูขัดกับประโยคของบท แต่มีที่ใช้ · ลองดูของจริงก่อน: แก้บรรทัดรูปใน app/views/posts/_post.html.erb ชั่วคราว

<%# ก่อน %>
<%= image_tag post.cover, alt: "", class: "…" if post.cover.attached? %>
<%# หลัง (ทดลอง) %>
<%= image_tag rails_storage_proxy_path(post.cover), alt: "", class: "…" if post.cover.attached? %>

rails_storage_proxy_path(…) = helper ที่ให้ URL แบบ proxy ของไฟล์นั้น · บันทึก แล้วดู <img> ใหม่:

$ curl -s localhost:3000/posts/1 | grep -o '<img[^>]*>'
<img alt="" class="w-full max-h-96 object-cover rounded-box" src="/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NCwicHVyIjoiYmxvYl9pZCJ9fQ==--e48eee28ac016f73b5f68e117da8de5324704ad9/cover.jpg" />

redirect ใน URL เปลี่ยนเป็น proxy · signed_id ตัวเดิม · ขอ URL นี้ (-o /dev/null = ทิ้งเนื้อไฟล์ · -D - = โชว์หัวคำตอบ · -w = พิมพ์ขนาดที่โหลดได้ตอนจบ):

$ curl -s -o /dev/null -D - http://localhost:3000/rails/active_storage/blobs/proxy/eyJfcmFp…/cover.jpg -w 'downloaded %{size_download}\n'
HTTP/1.1 200 OK
last-modified: Fri, 31 Dec 2010 17:00:00 GMT
accept-ranges: bytes
content-type: image/jpeg
content-disposition: inline; filename="cover.jpg"; filename*=UTF-8''cover.jpg
cache-control: no-store, must-revalidate, private, max-age=0
…
x-miniprofiler-original-cache-control: max-age=3155695200, public, immutable
…
transfer-encoding: chunked

downloaded 618479

• 200 OK + downloaded 618479 — ไม่มี 302 · Rails ส่งรูปให้เองครบทุกไบต์
• last-modified · accept-ranges · transfer-encoding — หัวมาตรฐานของการส่งไฟล์ ข้ามได้ · ที่ต้องดูคือสองบรรทัด cache ด้านล่าง
• x-miniprofiler-original-cache-control: max-age=3155695200, public, immutable — หัวที่ Rails ตั้งใจส่ง: เก็บไว้ได้ 3,155,695,200 วินาที (= 100 ปี) · public = ใครระหว่างทางก็เก็บสำเนาได้ · immutable = ไฟล์นี้ไม่มีวันเปลี่ยน
• cache-control: no-store, … — ใน development rack-mini-profiler (บท 122) เขียนทับเป็น "ห้ามเก็บ" แล้วย้ายค่าเดิมไปไว้ในหัว x-miniprofiler-original-… · production ไม่มี mini-profiler หัวจริงคือบรรทัดข้างบน

log ของคำขอนี้:

Started GET "/rails/active_storage/blobs/proxy/eyJfcmFp…/cover.jpg" for ::1 at …
Processing by ActiveStorage::Blobs::ProxyController#show as JPEG
  …
  S3 Storage (5.3ms) Downloaded file from key: 16r6iq1cr83g24mawphb39a7j0oi
Completed 200 OK in 8ms (ActiveRecord: 0.6ms (1 query, 0 cached) | GC: 0.0ms)

Downloaded file from key — ไฟล์วิ่งผ่าน Rails (MinIO → Rails → เบราว์เซอร์) · ในเครื่องเรา log บอกว่าใช้ 5.3 ms เพราะ MinIO อยู่เครื่องเดียวกัน · ของจริงที่ storage อยู่อีกที่และไฟล์ใหญ่ เวลานี้คือเวลาที่คนรับคำขอหนึ่งคนของ Rails ติดอยู่

แล้ว proxy มีไว้ทำไม? คำตอบอยู่ที่ public + 100 ปี · ถ้ามี CDN (บริการที่มีเครื่องเก็บสำเนาไฟล์กระจายอยู่ใกล้ผู้ใช้ทั่วโลก คั่นอยู่หน้าเว็บของเรา) · URL proxy คงที่ทุกครั้ง CDN เก็บสำเนาไว้แล้วตอบแทนเราได้นานตามที่ Rails บอก — คำขอมาถึง Rails เฉพาะตอนที่ CDN ยังไม่มีสำเนา · ส่วน URL ปลายทางของ redirect เปลี่ยนทุก 5 นาที (เห็นแล้วว่า X-Amz-Date ใหม่ทุกรอบ) และ 302 ของ Rails บอกว่า private · CDN ช่วยได้น้อย

วิธีเลือกของสไลด์หน้า 11 สรุปได้ประโยคเดียว: เริ่มด้วย redirect · เปลี่ยนเป็น proxy เมื่อวัดได้แล้วว่ารูปเล็กยอดนิยมเป็นคอขวด และมี CDN · proxy ที่ไม่มี CDN = ให้ Rails แบกไฟล์ทุกครั้งเปล่า ๆ

คืนไฟล์ก่อนไปต่อ: git restore app/views/posts/_post.html.erb แล้ว git status --short ต้องว่าง

ลูกค้าขอให้ลบรูป — ต้องเช็คอะไรก่อนบอกว่า "ลบแล้ว"

สไลด์หน้า 13 (case 4): ลูกค้าโทรมาว่า "ช่วยลบรูปนี้ให้หน่อย ผมอัปผิด" · ข้อมูลรูปหนึ่งรูปอยู่หลายที่: แถว attachment · แถว blob · ไฟล์ใน MinIO · URL ที่เคยแจกออกไป · ลองลบของจริงด้วย purge (= ลบทั้งป้าย ใบรับฝาก และของในโกดัง) ใน bin/rails console · ก่อนลบ ผมเก็บ URL :9000 ที่เพิ่งเซ็น (ยังไม่หมด 5 นาที) ไว้ลองเปิดหลังลบ:

Loading development environment (Rails 8.1.4)
wongnok-blog-all-in-one(dev):001> post = Post.find(1)
  Post Load (0.6ms)  SELECT "posts".* FROM "posts" WHERE "posts"."id" = 1 LIMIT 1
=> 
#<Post:0x00000001271518c8
...
wongnok-blog-all-in-one(dev):002> post.cover.purge
  ActiveStorage::Attachment Load (0.5ms)  SELECT "active_storage_attachments".* FROM "active_storage_attachments" WHERE "active_storage_attachments"."record_id" = 1 AND "active_storage_attachments"."record_type" = 'Post' AND "active_storage_attachments"."name" = 'cover' LIMIT 1
  TRANSACTION (0.3ms)  BEGIN
  ActiveStorage::Attachment Destroy (0.7ms)  DELETE FROM "active_storage_attachments" WHERE "active_storage_attachments"."id" = 4
  Post Update (0.3ms)  UPDATE "posts" SET "updated_at" = '2026-11-10 03:24:32.275796' WHERE "posts"."id" = 1
  TRANSACTION (0.4ms)  COMMIT
  ActiveStorage::Blob Load (0.5ms)  SELECT "active_storage_blobs".* FROM "active_storage_blobs" WHERE "active_storage_blobs"."id" = 4 LIMIT 1
  TRANSACTION (0.3ms)  BEGIN
  ActiveStorage::Blob Destroy (0.5ms)  DELETE FROM "active_storage_blobs" WHERE "active_storage_blobs"."id" = 4
  TRANSACTION (0.5ms)  COMMIT
  S3 Storage (6.6ms) Deleted file from key: 16r6iq1cr83g24mawphb39a7j0oi
  S3 Storage (2.5ms) Deleted files by key prefix: variants/16r6iq1cr83g24mawphb39a7j0oi/
=> nil
wongnok-blog-all-in-one(dev):003> post.cover.attached?
=> false
wongnok-blog-all-in-one(dev):004> exit

• ... ใต้ #<Post:0x… — console ย่อรายละเอียดของโพสต์ไว้ ข้ามได้ · ที่ต้องดูคือคำสั่งที่สอง · (ผมตัดคอมเมนต์ /*application='WongnokBlogAllInOne'*/ ที่ต่อท้าย SQL ทุกบรรทัดออกให้สั้นลง ของคุณจะเห็นอยู่)
• Attachment Destroy — ลบป้าย (แถวใน active_storage_attachments) · ถัดมา Post Update … "updated_at" = Rails แตะเวลาแก้ล่าสุดของโพสต์ให้ด้วย
• Blob Destroy — ลบใบรับฝาก (แถวใน active_storage_blobs) · ผมตัดบรรทัด SELECT ที่ Rails เช็คของเกี่ยวข้องก่อนลบออกไป 3 บรรทัด
• S3 Storage … Deleted file from key — ลบของในโกดัง · ทำหลัง COMMIT (ลบในตารางสำเร็จแล้วค่อยลบไฟล์)
• Deleted files by key prefix: variants/16r6iq…/ — ลบรูปย่อทุกขนาดที่เคยทำจากรูปนี้ด้วย (ตอนนี้ยังไม่มี · บท 140 จะเริ่มทำ)
• post.cover.attached? → false — โพสต์ไม่มีรูปปกแล้ว

แล้ว URL ที่เคยแจกไป:

$ curl -s "http://localhost:9000/wongnok-dev/16r6iq1cr83g24mawphb39a7j0oi?…&X-Amz-Date=20261110T032423Z&X-Amz-Expires=300&…" -w '\n[%{http_code}]\n'
<?xml version="1.0" encoding="UTF-8"?>
<Error><Code>NoSuchKey</Code><Message>The specified key does not exist.</Message><Key>16r6iq1cr83g24mawphb39a7j0oi</Key><BucketName>wongnok-dev</BucketName>…</Error>
[404]
$ curl -I http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsiZGF0YSI6NCwicHVyIjoiYmxvYl9pZCJ9fQ==--e48eee28ac016f73b5f68e117da8de5324704ad9/cover.jpg
HTTP/1.1 404 Not Found
…
$ curl -s -o /dev/null -w 'proxy %{http_code}\n' http://localhost:3000/rails/active_storage/blobs/proxy/eyJfcmFp…/cover.jpg
proxy 404

• URL :9000 ที่ยังไม่หมดอายุ → NoSuchKey 404 — ลายเซ็นยังถูก แต่ช่องเก็บว่างแล้ว · บัตรผ่านใช้ได้ แต่ไม่มีของให้รับ
• URL :3000 ทั้ง redirect และ proxy → 404 — Rails หาใบรับฝากเลขนั้นไม่เจอแล้ว

เช็คลิสต์ก่อนตอบลูกค้า (คำตอบของ case 4):

1. ใช้ purge (หรือ purge_later = ให้งานหลังร้านลบทีหลัง ผู้ใช้ไม่ต้องรอ) ไม่ใช่ detach — ดู log ให้เห็น Deleted file from key
2. URL ที่เคยแจก — แบบ redirect ตายทันทีที่ไฟล์หาย (404) · ต่อให้ลืมลบไฟล์ URL :9000 ก็หมดเองใน 5 นาที แต่ URL :3000 ไม่หมด
3. รูปย่อ (variant) — รูปขนาดเล็กที่ทำจากรูปเดิม (บท 140) เก็บไว้ใต้ variants/<key>/ · purge ลบให้ด้วย (บรรทัด Deleted files by key prefix)
4. สำเนานอกโกดัง — ถ้าใช้ proxy + CDN สำเนาที่ CDN เก็บไว้ (Rails บอกให้เก็บ 100 ปี) ไม่หายตาม ต้องสั่งลบที่ CDN เอง · แท็บเบราว์เซอร์ที่เปิดค้างไว้ก็ยังเห็นรูปบนจอจนกว่าจะ refresh

ทดสอบความเข้าใจ

ถ้าเปิดสไลด์ดูประกอบ

อ้างอิง

• Rails Guides — Active Storage Overview § Redirect Mode — อ่านหัวข้อนี้ต่อด้วย Proxy Mode และ Putting a CDN in Front of Active Storage (สั้นทั้งสาม) · ที่มาของ rails_storage_proxy_path และเหตุผลว่าทำไม CDN ต้องใช้ proxy
• Rails Guides — Active Storage Overview § Direct Uploads — อ่านหัวข้อย่อย Usage — บรรทัด pin "@rails/activestorage" กับ direct_upload: true คือของที่บท 138 ใส่ไว้ · ถัดไปคือหัวข้อ CORS ที่บอกว่า S3 ต้องยอมหัวอะไรบ้าง
• Rails Guides — Active Storage Overview § Removing Files — ย่อหน้าเดียว · purge กับ purge_later · หน้านี้ไม่พูดถึง detach เลย → ดูข้อถัดไป
• Rails API — ActiveStorage::Attached::One#detach — อ่านคำอธิบายของ detach เทียบกับ purge ที่อยู่ถัดลงมา · สองบรรทัดที่บอกว่าอันไหนลบไฟล์จริง
• Rails Guides — Configuring Rails § config.active_storage.service_urls_expire_in — ค่าเริ่มต้น 5 นาที · ดูข้อถัดไปด้วย (urls_expire_in) ที่อธิบายว่าทำไม URL ของ Rails ไม่หมด
• rails/rails v8.1.4 — redirect_controller.rb — ไฟล์สั้นราว 30 บรรทัด · อ่านคอมเมนต์ด้านบน: URL ถาวรโดยตั้งใจ และคำเตือนว่า controller ของ Active Storage เปิดให้ทุกคนเข้า
• MDN — Cross-Origin Resource Sharing (CORS) — อ่านหัวข้อ Preflighted requests · คือแถว OPTIONS ที่เห็นก่อน PUT
• MDN Glossary — CDN — นิยามสั้นสามบรรทัด

ติดตรงไหน หรือผลของคุณต่างจากในบท — ก็อปผลจริงทั้งก้อน (ตัดลายเซ็นยาว ๆ ออกได้) ไปถาม AI หรือเพื่อนได้เลย โดยบอกว่ามาจากบท 139 ขั้นไหน