0Pricing
React Academy · บทเรียน

การโฮสต์ React SPA บน AWS S3 และ CloudFront

บิลด์แอป React อัปโหลดไปยัง S3 กำหนดค่า CloudFront distribution และทำให้แคชเป็นโมฆะ

การโฮสต์ React SPA บน AWS S3 และ CloudFront เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน

ภาพรวมการโฮสต์แบบคงที่ด้วย S3

AWS S3 สามารถให้บริการไฟล์แบบคงที่ (HTML, JS, CSS และรูปภาพ) ในรูปแบบเว็บไซต์ได้ เมื่อใช้ร่วมกับ CloudFront (CDN) คุณจะได้การกระจายทั่วโลก HTTPS และความหน่วงต่ำสำหรับ React SPA

การสร้าง SPA

สร้างแอป React ให้อยู่ในไดเรกทอรีผลลัพธ์แบบคงที่

# Vite:
npm run build  # outputs to dist/

# Create React App:
npm run build  # outputs to build/

# Next.js static export:
next build && next export  # outputs to out/

การสร้างและตั้งค่า S3 Bucket

สร้าง S3 bucket เปิดใช้การโฮสต์เว็บไซต์แบบคงที่ และกำหนดเอกสารดัชนีและเอกสารข้อผิดพลาด

# Create bucket (replace with your domain name):
aws s3 mb s3://my-react-app.com

# Enable static hosting:
aws s3 website s3://my-react-app.com --index-document index.html --error-document index.html
# Error doc = index.html handles client-side routing (React Router)

การอัปโหลดไฟล์จากการสร้าง

ซิงค์ผลลัพธ์จากการสร้างไปยัง S3 ตั้งค่าส่วนหัวแคชแบบเข้มงวดสำหรับสินทรัพย์ที่มีแฮช และไม่ใช้แคชกับ index.html

# Upload hashed assets with long cache:
aws s3 sync dist/ s3://my-react-app.com/ \
  --exclude index.html \
  --cache-control "max-age=31536000,immutable"

# Upload index.html with no cache (always fresh):
aws s3 cp dist/index.html s3://my-react-app.com/index.html \
  --cache-control "no-cache,no-store"

การสร้างการกระจาย CloudFront

สร้างการกระจาย CloudFront ที่ชี้ไปยัง S3 bucket ใช้ปลายทางเว็บไซต์ของ S3 (ไม่ใช่ปลายทาง REST) เพื่อรองรับการกำหนดเส้นทางของ SPA

# In AWS console or CDK:
# Origin: my-react-app.com.s3-website-us-east-1.amazonaws.com
# Default root object: index.html
# Viewer protocol: Redirect HTTP to HTTPS
# Error pages: 403 → /index.html (200) for SPA routing

การแก้ไขการกำหนดเส้นทางของ SPA

CloudFront จะส่งคืน 403 สำหรับเส้นทางที่ไม่รู้จัก (S3 ไม่รู้จักเส้นทางของ React) ให้ตั้งค่าการตอบกลับข้อผิดพลาดแบบกำหนดเอง: 403 → /index.html พร้อมสถานะ 200

โดเมนแบบกำหนดเองและ SSL

ขอใบรับรอง ACM สำหรับโดเมนของคุณใน us-east-1 (จำเป็นสำหรับ CloudFront) แนบใบรับรองเข้ากับการกระจาย แล้วเพิ่มระเบียน DNS แบบ CNAME ที่ชี้ไปยังโดเมนของ CloudFront

การล้างแคชเมื่อเผยแพร่

หลังจากนำไฟล์ใหม่ขึ้นใช้งาน ให้ล้างแคชของ CloudFront สำหรับ index.html (เนื่องจากไฟล์นี้ไม่ใช้แคชบน S3 แต่อาจถูกแคชโดย CloudFront)

aws cloudfront create-invalidation \
  --distribution-id EXXXXXXXXXXXXX \
  --paths "/*"

การนำขึ้นใช้งานด้วย GitHub Actions

ทำเวิร์กโฟลว์การนำขึ้นใช้งานใน CI ให้เป็นอัตโนมัติ: สร้าง → ซิงค์ไปยัง S3 → ล้างแคช CloudFront

- name: Deploy to S3
  run: aws s3 sync dist/ s3://my-react-app.com/ --delete
  env:
    AWS_ACCESS_KEY_ID: ${{ secrets.AWS_KEY_ID }}
    AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET }}

- name: Invalidate CloudFront
  run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CF_ID }} --paths "/*"

นโยบายของ S3 Bucket

บล็อกการเข้าถึงแบบสาธารณะของ bucket และใช้นโยบาย Origin Access Control (OAC) เพื่อให้มีเพียง CloudFront เท่านั้นที่อ่าน bucket ได้ ซึ่งปลอดภัยกว่าการโฮสต์ bucket แบบสาธารณะ

ประมาณการค่าใช้จ่าย

การโฮสต์แบบคงที่ของ S3 มีราคาถูกมาก: พื้นที่จัดเก็บประมาณ ~$0.023/GB และคำขอประมาณ ~$0.0004/1000 รายการ ค่าใช้จ่ายของ CloudFront แตกต่างกันตามภูมิภาคและการถ่ายโอนข้อมูล แต่ระดับใช้งานฟรีให้บริการฟรี 1TB แรกต่อเดือน

ตรวจสอบความเข้าใจ

เหตุใดจึงควรกำหนดเอกสารข้อผิดพลาดของ S3 เป็น index.html เมื่อโฮสต์ React SPA

ทบทวน

สร้าง SPA ซิงค์ไปยัง S3 โดยแยกการแคช (แคชนานสำหรับสินทรัพย์ที่มีแฮช และไม่ใช้แคชกับ index.html) แล้วให้บริการผ่าน CloudFront แก้ไขการกำหนดเส้นทางของ SPA ด้วยการแมปข้อผิดพลาด 403 ไปยัง /index.html ทำให้การนำขึ้นใช้งานเป็นอัตโนมัติด้วย GitHub Actions และล้างแคช CloudFront ทุกครั้งที่นำแอปขึ้นใช้งาน

คำถามที่พบบ่อย

บทเรียน “การโฮสต์ React SPA บน AWS S3 และ CloudFront” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การโฮสต์ React SPA บน AWS S3 และ CloudFront” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การโฮสต์ React SPA บน AWS S3 และ CloudFront”

บิลด์แอป React อัปโหลดไปยัง S3 กำหนดค่า CloudFront distribution และทำให้แคชเป็นโมฆะ คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “การโฮสต์ React SPA บน AWS S3 และ CloudFront” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม

ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การนำไปใช้งานบน Vercel: ไม่ต้องกำหนดค่าและ URL สำหรับพรีวิว
  2. การโฮสต์ React SPA บน AWS S3 และ CloudFront
  3. การใส่ React/Next.js App ลงใน Docker
  4. CI/CD ด้วย GitHub Actions สำหรับ React
← กลับไปที่ React Academy