Membina aplikasi tanpa pelayan penuh dengan pekerja Cloudflare

Pengkomputeran tanpa pelayan telah merevolusikan pembangunan perisian, memudahkan penggunaan dan devOps. Tutorial ini menunjukkan membina aplikasi tanpa pelayan yang menggunakan pekerja Cloudflare, platform yang menstabilkan penskalaan dan infrastruktur. Projek ini, "Repo Hunt," adalah papan pendahulu harian untuk projek sumber terbuka, yang diilhamkan oleh Produk Hunt dan Reddit. Tapak siap boleh didapati di sini .

Pekerja Cloudflare, memanfaatkan rangkaian global Cloudflare, menyampaikan prestasi latensi yang sangat rendah tanpa mengira lokasi pengguna. Alat Wrangler CLI memudahkan bangunan, memuat naik, dan penerbitan. Tutorial ini menggunakan templat "penghala", yang membolehkan penghalaan berasaskan URL. Kod sumber boleh didapati di GitHub [Link-to-Github-Repo].

Menyiapkan Persekitaran Anda

Pasang Wrangler:

 NPM Install -g @Cloudflare/Wrangler

Buat projek baru menggunakan templat penghala:

 Wrangler menjana repo-hunt https://github.com/cloudflare/worker-template-router
CD Repo-Hunt

Templat penghala menggunakan webpack, yang membolehkan kemasukan modul NPM. Kelas Router mengendalikan penghalaan URL. Contoh asas:

 // index.js
const router = memerlukan ('./ router');

addEventListener ('ambil', event => {
  event.respondenwith (handlerequest (event.request));
});

Async Function HandlereQuest (Permintaan) {
  Cuba {
    const r = router baru ();
    r.get ('/', () => Respons baru ("Hello, World!"));
    const resp = menunggu R.Route (permintaan);
    kembali resp;
  } menangkap (err) {
    mengembalikan respons baru (ERR);
  }
}

Pekerja bertindak balas terhadap peristiwa fetch , mengembalikan Response . Tutorial ini menggunakan laluan untuk laman utama ( / ), borang penyerahan ( /post ), dan pengendalian penyerahan ( /repo ).

Penghalaan dan templat

Laluan laman utama ( / ) membuat senarai repositori yang dikemukakan. Kami akan mulakan dengan respons HTML yang mudah:

 // index.js
const router = memerlukan ('./ router');
indeks const = memerlukan ('./ pengendali/indeks');

// ... (sisa indeks.js)

// pengendali/index.js
const headers = {'content-type': 'text/html'};
const handler = () => {
  kembali respons baru ("Hello, World!", {headers});
};
modul.exports = pengendali;

Gunakan wrangler preview untuk menguji. Seterusnya, kami akan membuat templat yang lebih canggih:

 // pengendali/index.js
const headers = {'content-type': 'text/html'};
template const = memerlukan ('../ templat/indeks');

// ... (selebihnya pengendali/index.js)

// templat/index.js
susun atur const = memerlukan ('./ susun atur');
const template = () => susun atur (`<h1 id="Helo-dunia"> Helo, dunia!</h1> `);
modul.exports = templat;

// templat/susun atur.js
susun atur const = body => ` $ {body} `;
modul.exports = susun atur;

Ini menggunakan templat susun atur untuk gaya yang konsisten (Bulma CSS dimasukkan).

Kegigihan data dengan pekerja kv

Pekerja KV menyediakan kedai nilai utama untuk kegigihan data. Kami akan menyimpan repositori (kunci: repos:${id} ) dan senarai harian (kunci: $date ). Nota: Pekerja KV memerlukan pelan berbayar.

Operasi KV Asas:

 Repo_hunt.put ("mystring", "hello, dunia!"); // Menetapkan nilai
const string = menunggu repo_hunt.get ("mystring"); // Mendapatkan nilai

Kami akan membuat kelas untuk menguruskan data repo dan hari:

 // store/repo.js
const uuid = memerlukan ('uuid/v4');

kelas repo {
  // ... (pelaksanaan kelas repo)
}
modul.exports = repo;

// store/day.js
const hari ini = () => tarikh baru (). Tolocaledatestring ();

modul.exports = {
  tambah: fungsi async (id) {// ...},
  getRepos: fungsi async () {// ...}
};

Kelas Repo mengendalikan pengesahan dan kegigihan. Day menguruskan senarai repositori harian.

Mengendalikan penyerahan pengguna

Borang (get /post ) membolehkan pengguna menghantar repositori. Post /repo pengendali memproses penyerahan:

 // pengendali/create.js
const qs = memerlukan ('qs');
const repo = memerlukan ('../ store/repo');
const day = memerlukan ('../ store/day');

// ... (buat pelaksanaan pengendali)

Ini menggunakan perpustakaan qs untuk menghuraikan data borang, mewujudkan objek Repo , menyelamatkannya ke KV, dan menambah IDnya ke senarai harian.

Memberi data di halaman utama

Laman web kini mengambil semula dan membuat data repositori:

 // pengendali/index.js
// ... (Pengendali Indeks Dikemaskini)

// templat/index.js
// ... (fungsi templat yang dikemas kini untuk membuat repos)

Fungsi getRepos Modul Day mengambil dan meneliti objek Repo . Templat membuat setiap repositori.

Penggunaan

Tuntut pekerja.dev subdomain:

 Wrangler subdomain my-subdomain

Menggunakan permohonan:

 Wrangler menerbitkan

Buat ruang nama KV di papan pemuka Cloudflare dan kemas kini wrangler.toml dengan id ruang nama:

 [[KV-Namespaces]]]
mengikat = "repo_hunt"
id = "$ yournamespaceId"

Menerbitkan semula selepas menambah ruang nama KV ke wrangler.toml . Permohonan kini hidup!

Pembangunan selanjutnya

Tutorial ini menyediakan asas untuk aplikasi tanpa pelayan. Peningkatan masa depan boleh termasuk upvoting, komen, dan ciri -ciri yang lebih canggih. Terokai dokumentasi pekerja dan galeri templat untuk idea pembangunan selanjutnya.

Atas ialah kandungan terperinci Membina aplikasi tanpa pelayan penuh dengan pekerja Cloudflare. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!