0Pricing
React Academy · Pelajaran

Meng-host SPA React di AWS S3 & CloudFront

Bangun aplikasi React, unggah ke S3, lalu konfigurasikan distribusi CloudFront dan pembatalan validitas tembolok.

Meng-host SPA React di AWS S3 & CloudFront adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Ringkasan Hosting Statis S3

AWS S3 dapat menyajikan berkas statis (HTML, JS, CSS, gambar) sebagai situs web. Jika dipadukan dengan CloudFront (CDN), Anda mendapatkan distribusi global, HTTPS, dan latensi rendah untuk SPA React.

Membangun SPA

Bangun aplikasi React Anda ke dalam direktori keluaran statis.

# 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/

Membuat dan Mengonfigurasi Bucket S3

Buat bucket S3, aktifkan hosting situs web statis, lalu tetapkan dokumen indeks dan dokumen error.

# 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)

Mengunggah Berkas Pembangunan

Sinkronkan keluaran pembangunan ke S3. Tetapkan header tembolok yang agresif untuk aset ber-hash dan tanpa tembolok untuk 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"

Membuat Distribusi CloudFront

Buat distribusi CloudFront yang mengarah ke bucket S3. Gunakan titik akhir situs web S3 (bukan titik akhir REST) untuk mendukung perutean 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

Perbaikan Perutean SPA

CloudFront mengembalikan 403 untuk jalur yang tidak dikenal (S3 tidak mengetahui rute React). Konfigurasikan respons error kustom: 403 → /index.html dengan status 200.

Domain Kustom & SSL

Minta sertifikat ACM untuk domain Anda di us-east-1 (diperlukan untuk CloudFront). Pasangkan sertifikat tersebut ke distribusi, lalu tambahkan rekaman DNS CNAME yang mengarah ke domain CloudFront.

Invalidasi Tembolok saat Penerapan

Setelah menerapkan berkas baru, batalkan tembolok CloudFront untuk index.html (karena berkas tersebut tidak disimpan dalam tembolok di S3, tetapi mungkin disimpan dalam tembolok oleh CloudFront).

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

Penerapan GitHub Actions

Otomatiskan alur kerja penerapan di CI: bangun → sinkronkan ke S3 → batalkan tembolok 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 "/*"

Kebijakan Bucket S3

Blokir akses publik pada bucket dan gunakan kebijakan Kontrol Akses Asal (OAC) agar hanya CloudFront yang dapat membaca bucket—lebih aman daripada hosting bucket publik.

Perkiraan Biaya

Hosting statis S3 sangat murah: sekitar $0.023/GB untuk penyimpanan dan sekitar $0.0004/1000 permintaan. Biaya CloudFront bervariasi berdasarkan wilayah dan transfer data, tetapi gratis untuk 1 TB pertama per bulan dalam tingkat gratis.

Pemeriksaan Singkat

Mengapa Anda harus menetapkan dokumen error S3 ke index.html saat menghosting SPA React?

Ringkasan

Bangun SPA, sinkronkan ke S3 dengan penembolokan terpisah (durasi tembolok panjang untuk aset ber-hash, tanpa tembolok untuk index.html), lalu sajikan melalui CloudFront. Perbaiki perutean SPA dengan memetakan error 403 ke /index.html. Otomatiskan penerapan dengan GitHub Actions dan batalkan tembolok CloudFront pada setiap penerapan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Meng-host SPA React di AWS S3 & CloudFront” gratis?

Ya — teks lengkap “Meng-host SPA React di AWS S3 & CloudFront” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Meng-host SPA React di AWS S3 & CloudFront”?

Bangun aplikasi React, unggah ke S3, lalu konfigurasikan distribusi CloudFront dan pembatalan validitas tembolok. Kamu berlatih React Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai React Academy?

Tidak diperlukan pengalaman sebelumnya. React Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Meng-host SPA React di AWS S3 & CloudFront” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran React Academy ini?

Ya. Setiap pelajaran React Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Menerapkan ke Vercel: Tanpa Konfigurasi & URL Pratinjau
  2. Meng-host SPA React di AWS S3 & CloudFront
  3. Membuat Aplikasi React/Next.js dalam Docker
  4. CI/CD GitHub Actions untuk React
← Kembali ke React Academy