Lompat ke konten
dokumentasi.id
Commit d59d965
v3
Star763

7

Deployment ke Cloudflare Pages

Proyek ini dikirim ke Cloudflare Pages sebagai aplikasi SvelteKit dengan adapter-cloudflare, sehingga hasil vite build berubah menjadi Pages Function yang membaca binding D1 produksi. README menuliskan empat langkah deployment: membuat app baru di Cloudflare Pages, memilih Framework Preset SvelteKit, memakai Connect Git alih-alih upload manual, lalu memperbarui production ENV karena deployment pertama selalu gagal README.md:12-17.

Skrip build dan deploy

Dua skrip di package.json adalah pintu masuk proses ini. Keduanya menghasilkan build terlebih dahulu, lalu menyerahkannya ke wrangler dengan subperintah berbeda: wrangler pages dev untuk mencoba di lokal dan wrangler pages deploy untuk mengunggah ke Cloudflare Pages package.json:5-12.

SkripPerintahPeran dalam deployment
buildvite buildmenghasilkan artefak yang dibaca adapter
previewnpm run build && wrangler pages devmenjalankan artefak build secara lokal
deploynpm run build && wrangler pages deploymengunggah build ke Cloudflare Pages

Skrip dev, lint, dan format tidak dipakai saat deploy; rinciannya ada di Perintah dan Tooling.

Adapter dan direktori keluaran

svelte.config.js mengimpor adapter Cloudflare dari @sveltejs/adapter-cloudflare svelte.config.js:1, lalu memasangnya tanpa opsi tambahan sebagai adapter: adapter() svelte.config.js:10. Tanpa opsi, adapter memakai direktori keluaran bawaannya. Versi paket yang dipakai adalah ^4.7.0 untuk adapter package.json:15 dan ^3.68.0 untuk wrangler package.json:27, jadi perintah wrangler pages deploy dijalankan oleh wrangler versi 3.

Direktori hasil build itu harus cocok dengan konfigurasi Pages. Berkas wrangler.toml menetapkan name = "githubroast", compatibility_date = "2024-07-29", dan pages_build_output_dir = ".svelte-kit/cloudflare" wrangler.toml:2-4.

KunciNilaiArti
namegithubroastnama proyek di Cloudflare
compatibility_date2024-07-29tanggal kompatibilitas runtime Workers
pages_build_output_dir.svelte-kit/cloudflaredirektori yang diunggah sebagai artefak Pages

Binding D1 produksi

Satu-satunya binding aktif di wrangler.toml adalah database D1. Blok [[d1_databases]] mengikat binding = "DB" ke database_name = "githubroast" dengan database_id = "e43f5850-f45d-4d01-a3fb-1c1f0b3da4bb" wrangler.toml:28-31. Binding inilah yang muncul sebagai platform.env.DB di dalam Function. Cara mengisi nilainya di dashboard dibahas di Konfigurasi Environment dan Binding.

⚠️ database_id di wrangler.toml adalah id database produksi. Bind ke database lain dan Function akan menulis ke tabel roasts yang salah.

Alur deploy

Ada dua jalur menuju Cloudflare Pages: jalur manual lewat wrangler pages deploy, dan jalur Connect Git yang dipilih di README. Keduanya bertemu di build yang sama dan berakhir pada binding D1.

graph TD
  deploy["npm run deploy"] --> build["vite build"]
  build --> out["adapter-cloudflare menulis .svelte-kit/cloudflare"]
  out --> upload["wrangler pages deploy"]
  git["Connect Git di Cloudflare Pages"] --> pagesbuild["Cloudflare Pages build"]
  build --> pagesbuild
  pagesbuild --> firstfail["deployment pertama gagal"]
  firstfail --> setenv["production ENV diisi nilai terenkripsi"]
  setenv --> pagesbuild
  pagesbuild --> fn["Pages Function POST /llama"]
  fn --> d1[("D1 binding DB")]
  style out fill:#f59e0b,color:#000
  style upload fill:#8b5cf6,color:#fff
  style git fill:#f59e0b,color:#000
  style setenv fill:#f59e0b,color:#000
  style firstfail fill:#dc2626,color:#fff
  style pagesbuild fill:#2d7d46,color:#fff
  style fn fill:#2d7d46,color:#fff
  style d1 fill:#336791,color:#fff
%% fig: Dua jalur deploy menuju binding D1
%% desc: Build SvelteKit diunggah lewat wrangler atau Connect Git, dan deployment pertama berhenti sampai production ENV diperbarui.
Fig. 1: Dua jalur deploy menuju binding D1Build SvelteKit diunggah lewat wrangler atau Connect Git, dan deployment pertama berhenti sampai production ENV diperbarui.

Deployment pertama yang gagal

README menyatakan deployment pertama akan gagal dan production ENV harus diisi nilai terenkripsi; README menyebutnya bug Cloudflare Pages README.md:12-17. Kegagalan ini masuk akal karena kunci API di endpoint dibaca dari $env/static/private, yang nilainya di-inline saat vite build berjalan di lingkungan build Pages src/routes/llama/+server.js:1. Variabel yang belum tersedia pada build pertama tidak bisa masuk ke artefak.

Langkah pemulihannya:

  1. Biarkan deployment pertama selesai dengan status gagal.
  2. Isi variabel produksi di dashboard Pages sebagai nilai terenkripsi, bukan plaintext.
  3. Jalankan ulang deployment tanpa mengubah kode.

⚠️ Karena nilainya di-inline saat build, mengubah variabel di dashboard tidak mengubah deployment yang sudah ada. Perubahan baru berlaku setelah build ulang.

Catatan versi Node saat install

Berkas .npmrc menyalakan engine-strict=true .npmrc:1-1, sehingga npm di lingkungan build Cloudflare Pages menegakkan batas engines yang dideklarasikan dan menggagalkan instalasi bila versi Node tidak memenuhi syarat tersebut.