Vue Academy · Pelajaran

Menerapkan ke Platform Hosting

Terapkan aplikasi Vue ke host statis dan berbagai platform.

Pelajaran 2 dari 313 langkah

Menerapkan ke Platform Hosting adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 3. 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 Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 3 pelajaran total.

Merilis Aplikasi Anda

SPA Vue menghasilkan berkas statis, sehingga Anda dapat meng-host-nya di server berkas statis mana pun. Platform seperti Netlify, Vercel, dan GitHub Pages membuat penerapan berkas ini cepat dan sering kali gratis.

Hal yang Diterapkan

Anda menerapkan isi folder dist yang dihasilkan oleh npm run build. Server hosting menyajikan berkas ini melalui CDN kepada pengguna di seluruh dunia.

npm run build
# upload the dist/ folder to your host

Menerapkan ke Netlify

Netlify dapat membuat versi aplikasi dari repositori Git Anda. Anda cukup memberi tahu perintah pembuatan dan folder yang akan diterbitkan.

# Netlify settings
# Build command: npm run build
# Publish directory: dist

Menerapkan ke Vercel

Vercel otomatis mendeteksi proyek Vite. Hubungkan repositori Anda, lalu Vercel akan menjalankan proses pembuatan dan menyajikan hasilnya, serta menerapkan ulang setiap kali ada kiriman baru.

# Vercel auto-detects:
# Build command: npm run build
# Output directory: dist

Menerapkan ke GitHub Pages

GitHub Pages menyajikan berkas statis dari sebuah repositori. Anda dapat membuatnya secara lokal atau di CI, lalu mengirim hasil dist ke cabang Pages atau menggunakan sebuah aksi.

Masalah Mode Riwayat

Vue Router dalam mode riwayat membuat URL yang bersih seperti /about. Namun, server statis tidak memiliki berkas /about yang sebenarnya, sehingga kunjungan langsung atau pemuatan ulang menghasilkan 404.

Perbaikan Pengalihan SPA

Solusinya adalah memberi tahu server agar menyajikan index.html untuk semua rute, sehingga Vue Router dapat menangani perutean di sisi klien.

Aturan Pengalihan Netlify

Di Netlify, tambahkan berkas _redirects (atau aturan netlify.toml) yang menulis ulang semua jalur ke index.html.

# public/_redirects
/*    /index.html   200

Aturan Penulisan Ulang Vercel

Di Vercel, penulisan ulang melalui vercel.json menghasilkan pengalihan cadangan yang sama ke index.html.

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

Konfigurasi Jalur Dasar

Jika aplikasi Anda disajikan dari subjalur (umum di GitHub Pages, seperti /my-repo/), atur opsi base dalam konfigurasi Vite agar URL aset terselesaikan dengan benar.

// vite.config.js
export default {
  base: "/my-repo/"
}

Penerapan melalui CI

Otomatiskan penerapan dengan integrasi berkelanjutan. Sebuah alur kerja memasang dependensi, menjalankan pengujian, membuat versi, dan menerbitkannya setiap kali ada kiriman ke cabang utama, sehingga proses rilis tidak memerlukan banyak campur tangan.

# CI steps
# 1. npm install
# 2. npm run test
# 3. npm run build
# 4. deploy dist/

Uji Cepat

Uji pemahaman Anda tentang penerapan aplikasi.

Jawab di pelajaran interaktif

Ringkasan

Terapkan folder dist ke server berkas statis seperti Netlify, Vercel, atau GitHub Pages. Tambahkan pengalihan cadangan SPA (pengalihan/penulisan ulang ke index.html) agar rute mode riwayat tetap berfungsi saat dimuat ulang, atur base Vite untuk hosting dari subjalur, dan otomatisasi semuanya dengan CI. Selanjutnya Anda akan memantau dan memelihara aplikasi di produksi.

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: 42
Pelajaran: 156

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menerapkan ke Platform Hosting” gratis?

Ya — teks lengkap “Menerapkan ke Platform Hosting” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Menerapkan ke Platform Hosting”?

Terapkan aplikasi Vue ke host statis dan berbagai platform. Kamu berlatih Vue 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 Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue 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 3.

Berapa lama pelajaran “Menerapkan ke Platform Hosting” 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 Vue Academy ini?

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

← Kembali ke Vue Academy