Seni Bina Hadapan: Cara Menghoskan Apl Web Anda Secara Percuma

Saya sedang mengusahakan projek peribadi yang direka untuk membantu pengguna mencari konsert muzik Chicago. Satu aspek yang ketara dalam projek ini dari perspektif seni bina ialah keseluruhan aplikasi web dihoskan sepenuhnya secara percuma.

Imej di bawah menggambarkan komponen seni bina:

Penafian: Saya tidak ditaja oleh mana-mana perkhidmatan yang saya nyatakan di sini; Saya menyerlahkannya semata-mata kerana saya mendapati ia berguna.

Repositori Pangkalan Kod Projek

GitHub ialah platform paling popular untuk mengehos pangkalan kod anda secara percuma. Saya juga telah mencuba alternatif seperti Bitbucket dan GitLab, dan ia juga berfungsi dengan baik. Sejujurnya, mana-mana pilihan ini akan berjaya—pilih satu sahaja dan teruskan ke hadapan tanpa terlalu memikirkannya.

Orkestrasi Aliran Kerja Bahagian Hadapan

Dalam tetapan profesional, anda biasanya akan bekerja secara langsung dengan AWS atau pembekal perkhidmatan awan yang lain, memberikan anda kawalan penuh ke atas penempatan, pemberitahuan dan pemantauan. Walau bagaimanapun, pendekatan ini memerlukan lebih banyak masa dan usaha. Nasib baik, perkhidmatan seperti Netlify dan Vercel memudahkan proses ini dengan menghilangkan banyak geseran. Mereka membenarkan penggunaan pantas tetapi datang dengan pergantungan pada ekosistem mereka. Sebaik sahaja tapak anda mula menerima trafik yang ketara (ribuan lawatan), adalah idea yang baik untuk menyemak had peringkat percuma untuk mengelakkan kos yang tidak dijangka. Untuk projek peribadi, saya telah menggunakan perkhidmatan ini beberapa kali tanpa sebarang masalah setakat ini.

Memang, Netlify menawarkan beberapa ciri di luar kotak. Dalam imej seni bina, tiga daripada komponen disediakan secara automatik oleh Netlify:

• Penyatuan GUI:

GUI Netlify membolehkan anda menyepadukan repositori pangkalan kod anda—GitHub, dalam kes saya. Netlify memahami tetapan lalai untuk aplikasi Next.js dan menggunakannya untuk menggunakan kod dengan lancar.

• Penghosan Tapak Statik:

chicagomusiccompass.com ialah aplikasi web statik, bermakna tiada pelayan yang terlibat. Apabila penempatan dicetuskan, apl menjana aset statik (HTML, JS dan CSS) yang disimpan dalam baldi S3. Netlify kemudiannya mengendalikan konfigurasi dengan CloudFront, memberikan anda URL sedia untuk digunakan.

• Fungsi Lambda:

Tapak statik selalunya perlu mengambil data daripada domain lain. Ini biasanya memerlukan proksi, yang dikenali sebagai "Back End for Front End" (BFF). Aplikasi pelanggan, secara lalai, tidak mempunyai akses kepada domain lain melainkan pelayan secara eksplisit membenarkannya melalui CORS, yang tidak selalu menjadi amalan biasa. Untuk projek ini, saya menggunakan proksi untuk menarik fail JSON daripada domain lain.

Netlify mengurus semua orkestrasi penggunaan dan menyediakan URL (subdomain) yang boleh anda pautkan ke domain anda untuk URL mesra pengguna.

Sebagai contoh, ini ialah URL Netlify untuk projek saya:

https://clinquant-chebakia-f64a5b.netlify.app/

Saya kemudian mengkonfigurasi domain saya dengan rekod CNAME untuk menghalakan www ke URL Netlify:

Apabila pengguna melawat https://www.chicagomusiccompass.com/, DNS menyelesaikan domain ke destinasi terakhirnya—URL Netlify ?.

Walaupun banyak perkara yang berlaku di sini, kebanyakannya dikonfigurasikan melalui papan pemuka (GUI). Kuncinya adalah untuk memahami bagaimana segala-galanya disambungkan; selebihnya hanya menavigasi UI.

Tugasan Berjadual Automatik (Cron Jobs)

cron-job.org ialah perkhidmatan yang membolehkan anda menjalankan kerja cron secara percuma. Begini cara ia berfungsi dalam persediaan ini:

a) Netlify Deploy Hook:
Netlify menyediakan webhook boleh dikonfigurasikan (titik akhir URL) yang, apabila dicetuskan, mengatur semula tapak. Ini memastikan chicagomusiccompass.com boleh dikemas kini secara automatik apabila diperlukan.

b) Integrasi cron-job.org:
Dengan cron-job.org, anda boleh menjadualkan kerja cron—dalam kes ini, ditetapkan untuk dijalankan setiap hari. Tugas itu hanya mencetuskan cangkuk penggunaan Netlify, mendorong Netlify untuk mengatur semula (mengemas kini) tapak setiap hari.

Nota: Walaupun chicagomusiccompass.com juga mempunyai komponen bahagian belakang, siaran ini memfokuskan pada seni bina bahagian hadapan sahaja.

Ringkasan

chicagomusiccompass.com ialah aplikasi Next.js yang, apabila dibina, menjana tapak statik (tiada pelayan) bersama-sama dengan beberapa fungsi Lambda. Repositori GitHub disepadukan dengan Netlify, jadi setiap tolakan ke repositori mencetuskan penggunaan baharu. Proses ini menjana versi baharu tapak statik dan mengemas kini fungsi Lambda. Netlify mengendalikan penggunaan fail ini dan secara automatik menyediakan infrastruktur rangkaian yang diperlukan, membenarkan akses kepada aplikasi web melalui subdomain. Selain itu, saya telah mengkonfigurasi domain tersuai, chicagomusiccompass.com, untuk menunjuk ke Netlify. Tapak ini sentiasa dikemas kini oleh tugas cron harian yang mencetuskan cangkuk penggunaan Netlify.

Tapak ini telah berjalan selama beberapa bulan dan pada masa ini tidak menerima banyak trafik, tetapi dari segi kos infrastruktur, saya tidak membayar satu sen pun.

Dalam suasana profesional, bergantung pada keperluan projek, saya mungkin memilih penyelesaian yang serupa, terutamanya pada peringkat awal. Kemudian, saya boleh memindahkan komponen tertentu apabila perniagaan berkembang dan keperluan berkembang.

Seni bina bahagian hadapan menjadi agak mengujakan hari ini, terutamanya apabila anda boleh memanfaatkan perkhidmatan percuma. Walau bagaimanapun, ingat bahawa jika perkhidmatan adalah percuma, anda mungkin produknya.

Atas ialah kandungan terperinci Seni Bina Hadapan: Cara Menghoskan Apl Web Anda Secara Percuma. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!