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-171.
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-122.
| Skrip | Perintah | Peran dalam deployment |
|---|---|---|
build | vite build | menghasilkan artefak yang dibaca adapter |
preview | npm run build && wrangler pages dev | menjalankan artefak build secara lokal |
deploy | npm run build && wrangler pages deploy | mengunggah 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:13, lalu memasangnya tanpa opsi tambahan sebagai adapter: adapter() svelte.config.js:104. Tanpa opsi, adapter memakai direktori keluaran bawaannya. Versi paket yang dipakai adalah ^4.7.0 untuk adapter package.json:155 dan ^3.68.0 untuk wrangler package.json:276, 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-47.
| Kunci | Nilai | Arti |
|---|---|---|
name | githubroast | nama proyek di Cloudflare |
compatibility_date | 2024-07-29 | tanggal kompatibilitas runtime Workers |
pages_build_output_dir | .svelte-kit/cloudflare | direktori 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-318. Binding inilah yang muncul sebagai platform.env.DB di dalam Function. Cara mengisi nilainya di dashboard dibahas di Konfigurasi Environment dan Binding.
⚠️
database_iddiwrangler.tomladalah id database produksi. Bind ke database lain dan Function akan menulis ke tabelroastsyang 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.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-171. 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:19. Variabel yang belum tersedia pada build pertama tidak bisa masuk ke artefak.
Langkah pemulihannya:
- Biarkan deployment pertama selesai dengan status gagal.
- Isi variabel produksi di dashboard Pages sebagai nilai terenkripsi, bukan plaintext.
- 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.