Merilis, dan Bekerja Sebagai Developer · 1/8

Dari build sampai ter-deploy

Apa yang dihasilkan `next build`, apa yang dilakukan server dengannya, dan bagaimana deploy sebenarnya terjadi.

Baca 28 menit

Setelah pelajaran ini kamu bisa

Menyebutkan apa yang dihasilkan sebuah build dan apa yang sebenarnya disajikan
Menjelaskan bedanya perilaku dev dan production
Menjelaskan apa yang terjadi selama proses deploy
Melakukan rollback dengan aman saat deploy bermasalah

bun run dev dan bun run build menghasilkan hal yang sangat berbeda. Dev mengoptimalkan siklus umpan balikmu; build mengoptimalkan penggunamu. Mencampuradukkan keduanya adalah sebab "di dev jalan kok" jadi kalimat yang begitu umum.

	Development	Build production
Meng-compile	Sesuai kebutuhan, per file	Semuanya, sekali, di awal
Kode	Bisa dibaca, nama masih utuh	Terminifikasi dan dikaburkan
Error	Pesan lengkap dan stack trace	Disembunyikan, diganti sebuah digest
React	Pemeriksaan tambahan, effect dipanggil dua kali	Tidak ada keduanya
Caching	Sebagian besar dimatikan	Sepenuhnya aktif
Halaman statis	Di-render per request	Di-render sekali saat build
Kecepatan	Cepat mulai, lebih lambat per halaman	Lambat di-build, cepat disajikan

Ini yang benar-benar dihasilkan build proyek ini, terukur. bun run build meng-compile dalam 5,4 detik, type-check dalam 3,1 detik, dan mem-prerender 231 route jadi 226 file HTML. Direktori .next totalnya 117 MB — dan .next/static, satu-satunya bagian yang diunduh browser, cuma 1,1 MB dalam 18 chunk.

Coba sendiri

Membaca tabel route. Setiap simbol menyiratkan biaya yang berbeda saat request.

// The route table from this project's build, as data.
const routes = [
  { path: "/[lang]", kind: "SSG", instances: 2 },
  { path: "/[lang]/modules/[module]", kind: "SSG", instances: 24 },
  { path: "/[lang]/modules/[module]/[lesson]", kind: "SSG", instances: 196 },
  { path: "/[lang]/dashboard", kind: "dynamic", instances: 1 },
  { path: "/[lang]/sign-in", kind: "dynamic", instances: 1 },
  { path: "/[lang]/sign-up", kind: "dynamic", instances: 1 },
  { path: "/_not-found", kind: "static", instances: 1 },
];

const COST_MS = { static: 1, SSG: 1, dynamic: 45 };   // per request, roughly

const prerendered = routes.filter((r) => r.kind !== "dynamic");
const dynamic = routes.filter((r) => r.kind === "dynamic");

console.log("kind      routes  pages  per-request work");
for (const kind of ["static", "SSG", "dynamic"]) {
  const group = routes.filter((r) => r.kind === kind);
  if (group.length === 0) continue;
  const pages = group.reduce((n, r) => n + r.instances, 0);
  console.log(
    kind.padEnd(10) + String(group.length).padStart(6) + String(pages).padStart(7) +
    "  " + COST_MS[kind] + "ms"
  );
}

const prerenderedPages = prerendered.reduce((n, r) => n + r.instances, 0);
console.log("");
console.log("prerendered pages: " + prerenderedPages);
console.log("dynamic routes:    " + dynamic.length + " (" + dynamic.map((r) => r.path).join(", ") + ")");
console.log("");

// What 10,000 lesson views cost, prerendered versus dynamic.
const views = 10000;
console.log("10,000 lesson page views:");
console.log("   prerendered: " + (views * COST_MS.SSG / 1000).toFixed(1) + "s of server time");
console.log("   if dynamic:  " + (views * COST_MS.dynamic / 1000).toFixed(1) + "s of server time");
console.log("");
console.log("Those 196 lesson pages are prerendered only because the page itself");
console.log("never reads a cookie. One design decision, measured in server hours.");

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Apa yang dilakukan sebuah deploy

Install dependency dari lockfile, tepat.
Jalankan pemeriksaannya — lint, type, test. Kegagalan di sini menghentikan deploy-nya, dan itu memang tujuannya.
Build output production-nya.
Jalankan migration, kalau skemanya berubah. Sebelum kode barunya, dan harus kompatibel ke belakang.
Jalankan versi baru berdampingan dengan yang lama.
Periksa kesehatannya, lalu alihkan lalu lintasnya.
Hentikan versi lama begitu tidak ada yang memakainya.

Melakukan rollback

Sesuatu pasti akan bermasalah di production. Ukuran penyiapan deploy yang baik bukan bahwa ia tidak pernah gagal — tapi seberapa cepat kamu bisa membatalkannya.

Ketahui perintah rollback-nya sebelum kamu membutuhkannya. Bukan jam 2 pagi, saat pengguna sedang mengeluh.
Kode bisa di-rollback; data tidak. Migration yang membuang sebuah kolom tidak bisa dibatalkan dengan deploy ulang. Itu sebabnya kamu membuang kolom di rilis yang *lebih belakangan* dari kode yang berhenti memakainya.
Utamakan perbaikan maju untuk hal kecil, dan rollback untuk apa pun yang belum kamu pahami. Pemahaman bisa menunggu; gangguan layanannya tidak.
Deploy kecil dan sering. Deploy yang memuat satu perubahan sangat mudah didiagnosis. Yang memuat tiga minggu pekerjaan jadi sebuah investigasi.

Tugas praktik

Jalankan bun run build di proyek ini dan baca tabel route-nya. Hitung simbol ● dan ƒ-nya. Lalu jalankan du -sh .next dan du -sh .next/static lalu bandingkan kedua angkanya. Terakhir jalankan bun run start dan buka sebuah halaman — sekarang kamu menyajikan build production, dengan kode terminifikasi dan pesan error yang disembunyikan.

Hasil yang diharapkan

Total sekitar 117M, static sekitar 1,1M, dan server production yang berfungsi.