Frontend Academy · Pelajaran

Deployment ke Vercel Netlify dan Cloudflare Pages

Hubungkan repo Anda ke setiap platform, konfigurasikan perintah build dan direktori output, serta pahami deployment pratinjau untuk branch.

Pelajaran 2 dari 416 langkah

Deployment ke Vercel Netlify dan Cloudflare Pages adalah pelajaran Frontend 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 Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Trio Penyediaan Aplikasi Sisi Depan Modern

Vercel, Netlify, dan Cloudflare Pages adalah platform terkemuka untuk menerapkan aplikasi sisi depan. Semuanya menawarkan: penerapan berbasis Git, cabang pratinjau, domain kustom, CDN tepi, dan fungsi tanpa server. Pilih satu dan gunakan secara konsisten.

Vercel — Dibuat untuk Next.js

Dibuat oleh tim Next.js. Integrasi Next.js terbaik di kelasnya: Optimasi Gambar tanpa konfigurasi, ISR, Fungsi Edge, dan Speed Insights. Vercel juga mendukung Vite, Nuxt, Astro, serta sebagian besar kerangka kerja statis.

Menerapkan ke Vercel

Hubungkan repositori GitHub/GitLab/Bitbucket. Vercel otomatis mendeteksi kerangka kerja, menjalankan build, lalu menerapkannya.

# Manual deploy (any project):
npm install -g vercel
vercel login
vercel       # preview deploy
vercel --prod  # production deploy

# Or push to main — auto-deploys via Git integration.

Konfigurasi vercel.json

Ganti nilai bawaan (perintah pembangunan, pengalihan, header, dan penulisan ulang).

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": "vite",
  "headers": [{
    "source": "/(.*)",
    "headers": [{ "key": "X-Frame-Options", "value": "DENY" }]
  }],
  "redirects": [{ "source": "/old", "destination": "/new", "permanent": true }]
}

Netlify — Pelopor Awal

Netlify memelopori penerapan statis modern. Penanganan formulir, identitas, dan analitiknya kuat. Netlify Functions dan Edge Functions menyediakan fungsi tanpa server. Dukungan untuk Vite/Hugo/Eleventy sangat baik.

Menerapkan ke Netlify

Hubungkan repositori atau seret dan letakkan folder hasil pembangunan. Konfigurasikan melalui dasbor atau netlify.toml.

# netlify.toml
[build]
  command = "npm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "20"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200   # SPA fallback

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"

Netlify CLI

Pengembangan lokal dengan fungsi tanpa server.

npm install -g netlify-cli
netlify login
netlify init
netlify dev       # local server with functions
netlify deploy    # preview
netlify deploy --prod

Cloudflare Pages

Menerapkan aplikasi ke jaringan tepi global Cloudflare. Pages Functions menyediakan fungsi tanpa server pada waktu eksekusi Workers. Tingkat gratisnya cukup besar. Sangat baik untuk Astro, Hono, dan Remix.

Menerapkan ke Cloudflare Pages

Hubungkan repositori melalui dasbor Cloudflare. Atau gunakan CLI wrangler.

# Direct upload via wrangler:
npm install -g wrangler
wrangler login
wrangler pages deploy ./dist --project-name=my-site

# Or push to GitHub — auto-deploys.

wrangler.toml untuk Pages

Cloudflare Pages menggunakan wrangler.toml untuk konfigurasi Workers/Functions.

# wrangler.toml
name = "my-site"
compatibility_date = "2024-01-01"
pages_build_output_dir = "dist"

[vars]
API_URL = "https://api.example.com"

[[d1_databases]]
binding = "DB"
database_name = "my-db"
database_id = "..."

Penerapan Pratinjau

Ketiga platform membuat URL unik untuk setiap cabang PR. Peninjau dapat mengeklik URL tersebut dan menguji perubahan secara terpisah. Kini, inilah alur kerja standar tim.

Variabel Lingkungan

Ketiganya menawarkan variabel per lingkungan (produksi, pratinjau, dan pengembangan) melalui dasbor atau CLI. Variabel aplikasi sisi depan harus memiliki awalan (Vite: VITE_, Next: NEXT_PUBLIC_) agar dikirim ke browser.

# Vercel:
vercel env add API_URL production

# Netlify:
netlify env:set API_URL https://api.example.com

# Cloudflare Pages:
wrangler pages secret put API_URL

Domain Kustom dan SSL

Ketiganya menangani sertifikat SSL secara otomatis (Let's Encrypt). Arahkan catatan DNS A/CNAME Anda ke target mereka—mereka akan menerbitkan dan memperbarui sertifikat. Domain kustom gratis pada semua tingkat berbayar.

Memilih di Antara Ketiganya

Vercel: terbaik untuk Next.js, DX yang lebih baik, tetapi sedikit lebih mahal. Netlify: terbaik untuk formulir dan identitas, dengan ekosistem pengaya yang matang. Cloudflare Pages: kinerja tepi terbaik, biaya terendah dalam skala besar, serta integrasi Workers yang sangat baik. Ketiganya sangat unggul.

Pemeriksaan Singkat

Apa cara standar untuk membuat URL pratinjau yang dapat diterapkan bagi sebuah PR di Vercel/Netlify/Cloudflare Pages?

Jawab di pelajaran interaktif

Ringkasan: Penyediaan Aplikasi Sisi Depan

Vercel: integrasi Next.js terbaik. Netlify: formulir, identitas, dan pengaya. Cloudflare Pages: kinerja tepi dan biaya terendah. Ketiganya: penerapan otomatis berbasis Git, URL pratinjau untuk setiap PR, variabel lingkungan untuk setiap lingkungan, SSL otomatis, dan domain kustom. Konfigurasikan melalui dasbor atau berkas konfigurasi khusus platform (vercel.json, netlify.toml, wrangler.toml).

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 41
Pelajaran: 163

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Deployment ke Vercel Netlify dan Cloudflare Pages” gratis?

Ya — teks lengkap “Deployment ke Vercel Netlify dan Cloudflare Pages” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Deployment ke Vercel Netlify dan Cloudflare Pages”?

Hubungkan repo Anda ke setiap platform, konfigurasikan perintah build dan direktori output, serta pahami deployment pratinjau untuk branch. Kamu berlatih Frontend 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 Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend 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 “Deployment ke Vercel Netlify dan Cloudflare Pages” 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 Frontend Academy ini?

Ya. Setiap pelajaran Frontend 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

GitHub Actions untuk Frontend: lint test build
Deployment ke Vercel Netlify dan Cloudflare Pages
Variabel Lingkungan dalam CI
Pemeriksaan Lighthouse Otomatis

← Kembali ke Frontend Academy