bikin cloudflare

# Panduan Lengkap: Bikin & Deploy Cloudflare Worker dari Nol Rangkuman langkah-langkah untuk bikin website statis (HTML, gambar, PDF, dll) dan publish ke Cloudflare Workers, lengkap dengan Git untuk backup & riwayat perubahan. --- ## 1. Persiapan Awal (Sekali Saja per Komputer) ### Install tools yang dibutuhkan - **Git** — dari [git-scm.com](https://git-scm.com) - **Node.js (LTS)** — dari [nodejs.org](https://nodejs.org) Cek berhasil terinstall dengan buka CMD/Terminal: ``` git --version node --version ``` ### Install Wrangler (CLI resmi Cloudflare) ``` npm install -g wrangler ``` - `npm` = tool bawaan Node.js untuk install package - `-g` = install secara global (bisa dipanggil dari folder mana saja) - `wrangler` = nama tool-nya Cek berhasil: ``` wrangler --version ``` ### Login ke akun Cloudflare ``` wrangler login ``` Ini akan buka browser, minta izin akses (klik **Allow**). Biasanya cuma perlu sekali per komputer. --- ## 2. Buat Project Baru Semua langkah ini dijalankan **di komputer lokal kamu** (CMD/Terminal), bukan di dashboard Cloudflare. ### a. Buat folder project ``` cd Documents mkdir nama-project-kamu cd nama-project-kamu ``` ### b. Buat folder `public` Semua file yang mau ditampilkan (HTML, gambar, PDF, dll) ditaruh di sini. ``` mkdir public ``` Struktur akhirnya: ``` nama-project-kamu/ ├── public/ │ └── (isi file di sini) └── wrangler.jsonc ``` ### c. Buat file `wrangler.jsonc` Di folder utama project (sejajar dengan `public`, bukan di dalamnya). Bikin pakai Notepad atau VS Code, isinya: ```json { "name": "nama-worker-kamu", "compatibility_date": "2026-01-01", "assets": { "directory": "./public" } } ``` > **Penting:** `"name"` di sini yang menentukan URL worker kamu (`https://nama-worker-kamu.SUBDOMAIN.workers.dev`), boleh beda dari nama folder di komputer — tidak masalah. ### d. (Opsional) Buat `index.html` Kalau mau ada "halaman utama" saat orang akses domain langsung, taruh `index.html` di dalam folder `public`. Tanpa file ini, akses ke alamat root akan 404 — tapi file lain tetap bisa diakses lewat path-nya masing-masing (misal `.../foto.jpg`). ### e. (Opsional, untuk worker "private"/tidak mau ke-index Google) Buat file `public/robots.txt`: ``` User-agent: * Disallow: / ``` --- ## 3. Tes di Lokal Sebelum Deploy ``` wrangler dev ``` Buka `http://localhost:8787` (atau `http://127.0.0.1:8787`) di browser untuk cek tampilannya. Tekan `Ctrl + C` di terminal untuk menghentikan server lokal. --- ## 4. Setup Git & Backup ke GitHub (Opsional, tapi disarankan) ``` git init git add . git commit -m "Initial commit" ``` Buat repository baru di [github.com](https://github.com) (tombol **New repository**). Kalau isinya sensitif, pilih **Private**. Setelah repo dibuat, GitHub akan kasih perintah seperti ini — jalankan di terminal: ``` git remote add origin https://github.com/USERNAME/NAMA-REPO.git git branch -M main git push -u origin main ``` --- ## 5. Deploy ke Cloudflare ``` wrangler deploy ``` Ini yang **beneran** mempublish file ke internet. Setelah selesai, terminal menampilkan URL worker-nya. --- ## 6. Alur Kerja Selanjutnya (Setiap Ada Perubahan) ``` [edit / tambah / hapus file di folder public] ↓ wrangler deploy → ini yang bikin perubahan muncul online ↓ (opsional, buat backup & riwayat) git add . git commit -m "deskripsi perubahan" git push ``` **Poin penting:** - `wrangler deploy` = yang mempublish perubahan ke internet — **wajib** dijalankan tiap ada perubahan yang mau tampil online. - `git add/commit/push` = cuma backup & catatan riwayat di GitHub — **opsional**, tidak berpengaruh ke tampilan website. - `git push` (ke GitHub) dan `wrangler deploy` (ke Cloudflare) itu **dua sistem terpisah** yang tidak otomatis terhubung, kecuali kamu setup fitur Git Integration resmi Cloudflare secara khusus. --- ## 7. Cara Melihat File yang Sudah Ter-upload Dashboard Cloudflare **tidak** menampilkan daftar file worker berbasis static assets secara visual. Cara ceknya: - Buka link file-nya langsung di browser (`https://nama-worker.workers.dev/namafile.ext`) - Lihat daftar file di output terminal saat `wrangler deploy` (ada baris `Found X new or modified static assets`) - Cek langsung folder `public` di komputer — isinya selalu identik dengan yang ada di Cloudflare setelah deploy --- ## 8. Batas Paket Free Cloudflare Workers (yang relevan) | Batas | Free | |---|---| | Jumlah file statis per worker | 20.000 file | | Ukuran per file | maks 25 MB | | Request per hari | 100.000 | | Jumlah worker per akun | 100 | > Untuk kebutuhan simpan banyak/besar file (ratusan/ribuan file atau di atas 25 MB), pertimbangkan **Cloudflare R2** (object storage terpisah, gratis 10 GB/bulan, tanpa biaya akses/egress). --- ## 9. Soal Privasi Worker Secara default, worker bisa diakses **siapa saja** yang tahu link-nya. Ada 2 level: - **"Rahasia" (obscurity)** — pakai nama worker yang susah ditebak + `robots.txt` untuk blokir indexing Google. Tetap bisa diakses siapa pun yang punya linknya. - **Beneran private (butuh login)** — pakai fitur **Cloudflare Access**, baru ada verifikasi identitas (email/OTP) sebelum bisa akses.

No comments:

Post a Comment