React Academy · Pelajaran

Menerapkan ke Vercel: Tanpa Konfigurasi & URL Pratinjau

Hubungkan repo GitHub ke Vercel, konfigurasikan variabel lingkungan, dan gunakan penerapan pratinjau.

Menerapkan ke Vercel: Tanpa Konfigurasi & URL Pratinjau adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.

Mengapa Vercel?

Vercel adalah platform yang dibuat oleh tim Next.js. Vercel menawarkan penerapan tanpa konfigurasi: hubungkan repositori GitHub, lalu Vercel secara otomatis mendeteksi kerangka kerja, membangun, dan menerapkannya setiap kali ada perubahan yang dikirim.

Menghubungkan Repositori

Impor repositori GitHub/GitLab/Bitbucket dari dasbor Vercel. Vercel mendeteksi kerangka kerja (Next.js, Vite, CRA) dan mengonfigurasi setelan pembangunan secara otomatis.

Setelan Proyek

Vercel mendeteksi secara otomatis: kerangka kerja, perintah pembangunan (npm run build), direktori keluaran (.next, dist), dan perintah pemasangan (npm install). Timpa nilai-nilai ini di setelan proyek jika diperlukan.

Variabel Lingkungan

Tambahkan variabel lingkungan di dasbor Vercel melalui Setelan Proyek → Variabel Lingkungan. Tetapkan nilai yang berbeda untuk lingkungan Produksi, Pratinjau, dan Pengembangan.

# In Vercel dashboard:
# NEXT_PUBLIC_API_URL = https://api.example.com  (Production)
# NEXT_PUBLIC_API_URL = https://api-staging.example.com  (Preview)

# In code:
const apiUrl = process.env.NEXT_PUBLIC_API_URL;

Penerapan Pratinjau

Setiap pengiriman ke cabang git dan permintaan tarik mendapatkan URL pratinjau yang unik (misalnya, myapp-git-feature-xyz.vercel.app). Bagikan URL tersebut untuk peninjauan sebelum penggabungan—Anda tidak memerlukan lingkungan praproduksi manual.

Domain Kustom

Tambahkan domain kustom di dasbor Vercel. Arahkan DNS Anda (rekaman A atau CNAME) ke alamat IP Vercel, lalu Vercel akan menangani penyediaan sertifikat SSL secara otomatis.

Konfigurasi vercel.json

Sesuaikan perilaku penerapan secara mendetail: pengalihan, tajuk, penulisan ulang, dan pemilihan wilayah.

// vercel.json
{
  "redirects": [
    { "source": "/old-blog/:path*", "destination": "/blog/:path*", "permanent": true }
  ],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [{ "key": "Cache-Control", "value": "no-store" }]
    }
  ],
  "regions": ["iad1"] // deploy edge functions to US East
}

CLI Vercel

Gunakan CLI Vercel untuk menerapkan dari terminal, mengambil variabel lingkungan secara lokal, dan mengelola proyek.

# Install:
npm install -g vercel

# Link project and deploy:
vercel

# Pull env variables for local dev:
vercel env pull .env.local

# Deploy to production:
vercel --prod

Fungsi Tanpa Server

Berkas dalam api/ (Pages Router) atau app/api/*/route.ts (App Router) secara otomatis diterapkan sebagai fungsi tanpa server pada lingkungan eksekusi tepi atau Node.js milik Vercel.

Hook Penerapan

Buat hook penerapan (URL webhook) untuk memicu penerapan dari layanan eksternal—berguna untuk perubahan konten CMS yang seharusnya menerapkan ulang situs.

# Trigger a deploy from a CMS webhook:
curl -X POST https://api.vercel.com/v1/integrations/deploy/prj_xxx/yyy

# In Sanity Studio:
// Call this URL on document publish

Penerapan Monorepo

Dalam monorepo Nx atau Turborepo, tetapkan direktori akar Vercel ke folder aplikasi tertentu dan konfigurasikan perintah pembangunan agar menggunakan pelari tugas monorepo.

# Vercel project settings:
# Root Directory: apps/web
# Build Command: npx nx build web --prod
# Output Directory: apps/web/.next

Pemeriksaan Singkat

Apa yang dimaksud dengan Penerapan Pratinjau Vercel?

Ringkasan

Hubungkan repositori Git ke Vercel untuk penerapan tanpa konfigurasi. Setiap cabang mendapatkan URL pratinjau. Kelola variabel lingkungan untuk setiap lingkungan di dasbor, gunakan vercel.json untuk pengalihan/tajuk, dan gunakan CLI Vercel untuk penerapan melalui terminal serta pengambilan variabel lingkungan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menerapkan ke Vercel: Tanpa Konfigurasi & URL Pratinjau” gratis?

Ya — teks lengkap “Menerapkan ke Vercel: Tanpa Konfigurasi & URL Pratinjau” 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 “Menerapkan ke Vercel: Tanpa Konfigurasi & URL Pratinjau”?

Hubungkan repo GitHub ke Vercel, konfigurasikan variabel lingkungan, dan gunakan penerapan pratinjau. 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 1 dari 4.

Berapa lama pelajaran “Menerapkan ke Vercel: Tanpa Konfigurasi & URL Pratinjau” 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

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

← Kembali ke React Academy