Bagaimana Cara Menyebarkan Aplikasi Frontend ke Halaman Cloudflare?

Menyebarkan aplikasi frontend adalah salah satu masalah besar beberapa waktu lalu. Tapi hari ini, itu sepotong kue. Bahkan yang lebih baru dapat menyebarkan aplikasi dengan bantuan layanan hosting super.

Banyak platform hosting memungkinkan kami untuk menerapkan aplikasi frontend dalam hitungan menit. Situs kami akan siap untuk umum dalam beberapa menit.

Bukankah itu hebat?

Ya itu dia.

Mari pelajari cara men-deploy aplikasi frontend di Halaman Cloudflare.

Aplikasi Frontend

Sebelum masuk ke bagian penerapan aplikasi, kita perlu membuat satu aplikasi frontend.

Bagaimana cara melakukannya?

Bahkan Anda mengetahuinya. Jadi, kita tidak akan membahasnya di sini sekarang.

Kami tahu bahwa ada banyak perpustakaan, kerangka kerja di luar sana bagi kami untuk membuat aplikasi frontend. Namun, bagian inti dari library atau framework tersebut adalah JavaScript. Anda tahu semua itu, karena Anda sudah mencari cara untuk menerapkan aplikasi frontend Anda. Anda dapat melewati bagian ini dan melompat ke penerapan jika Anda hanya mencari bagian penerapan.

Ada React, Vue, Angular, JavaScript, dan masih banyak lagi. Seseorang dapat membuat aplikasi berdasarkan kebutuhan mereka.

Seperti yang bisa kita lihat, ada banyak opsi untuk membuat aplikasi frontend. Bagaimana dengan penyebarannya? Apakah ini proses yang sama untuk semua aplikasi frontend?

Ya, proses penerapannya sama untuk semua aplikasi frontend. Namun, proses yang membuat aplikasi frontend siap untuk diterapkan dapat bervariasi berdasarkan pustaka dan kerangka kerja.

Akan ada perintah untuk membangun untuk sebagian besar aplikasi front-end yang dibangun dengan perpustakaan dan kerangka kerja. Anda mungkin sudah mengetahuinya. Jika Anda tidak tahu apa itu, Anda mungkin harus melihatnya berdasarkan pustaka atau kerangka kerja frontend Anda.

Kami membutuhkan aplikasi untuk di-deploy. Mari kita siapkan aplikasi sederhana. Anda dapat melewati bagian ini jika Anda sudah memiliki aplikasi frontend untuk diterapkan.

Mempersiapkan

Sebelum setup, kita perlu menyadari satu hal. Titik masuk harus index.html untuk aplikasi frontend kami untuk menyebarkannya ke halaman Cloudflare. Anda mungkin menemukan file index.html (lokasi dapat bervariasi berdasarkan pustaka dan kerangka kerja) setelah proses pembuatan.

Kita akan membuat aplikasi React and Plain JavaScript sederhana untuk demo. Anda dapat memilih perpustakaan atau kerangka kerja lain yang Anda kenal. Mari kita atur aplikasi React terlebih dahulu.

Jalankan perintah berikut untuk membuat aplikasi React.

 npx create-react-app demo

Perbarui aplikasi dengan kreativitas Anda, atau biarkan apa adanya. Saya hanya akan mengubah sesuatu untuk memastikan itu digunakan dengan benar di akhir.

Sekarang, mari kita buat aplikasi JavaScript biasa.

Memiliki index.html adalah wajib bagi kami. Jadi, mari kita buat file dengan nama index.html . Sekarang, Anda dapat menambahkan lebih banyak file seperti styles.css, script.js, gambar, dll., agar terlihat mewah. Tapi itu tidak wajib :).

Penyiapan sederhana kami untuk penerapan sekarang telah selesai. Apa selanjutnya? Saatnya penyebaran. Menyelam ke dalamnya.

Penyebaran

Halaman Cloudflare memungkinkan kami untuk menerapkan aplikasi frontend kami dari GitHub. Jadi, ada dua bagian dalam proses penyebaran.

• Pertama, kita perlu memiliki kode aplikasi di GitHub.
• Kedua, menyebarkan aplikasi ke halaman Cloudflare.

Sebagian besar waktu, Anda tidak perlu khawatir tentang bagian pertama karena kami mempertahankan kode kami di platform hosting sejak hari pertama proyek. Anda dapat melewati bagian pertama dan menuju ke bagian penerapan.

Jika Anda belum memasukkan kode Anda ke GitHub atau di platform hosting kode lain, Anda mungkin harus memindahkannya ke GitHub untuk disebarkan ke halaman Cloudflare. Anda dapat mengikuti langkah-langkah di bawah ini untuk memasukkan kode Anda ke GitHub atau melakukannya sendiri.

1. Mendorong Kode ke GitHub

Apakah Anda memiliki akun GitHub? Ya, saya kira dalam banyak kasus. Jika Anda tidak memilikinya, buatlah di sini.

• Buka GitHub dan masuk ke akun Anda.
• Buat repositori dengan nama proyek Anda. Di sini, kami menamakannya seperti demo .

• Repositori yang baru dibuat akan terlihat sebagai berikut. Ini menunjukkan beberapa perintah git untuk mengisi repositori Anda dengan kode.

Mari kita push kode kita ke repositori yang baru saja kita buat. Anda dapat mengikuti langkah-langkah di bawah ini atau melakukannya sendiri jika Anda sudah terbiasa. Mari kita mulai dengan membuka proyek kita di terminal atau cmd.

• Inisialisasi git dengan perintah git init .
• Tambahkan semua perubahan Anda ke git lokal menggunakan perintah git add . .
• Komit perubahan dengan perintah git commit -m "message" . Ganti pesan dengan pesan yang sesuai untuk komit.
• Sekarang, kita harus menghubungkan repositori jarak jauh kita ke proyek lokal.
• Perintah untuk menghubungkannya adalah git remote add origin 'your_repo_path' . Ganti your_repo_path dengan repositori jarak jauh Anda. Jalur repositori akan menjadi sebagai berikut [email protected]:username/repo_name . Jalur repositori saya untuk demo adalah [email protected]:hafeezulkareem/demo .
• Langkah terakhir adalah memasukkan kode ke repositori jarak jauh kami. Kita dapat melakukannya dengan menggunakan perintah git push -u origin main .

Mari kita lihat cuplikan kode di repositori GitHub.

Kami selesai dengan mendorong kode kami ke Github. Tugas kita selanjutnya adalah menyebarkannya ke Halaman Cloudflare . Tanpa basa-basi lagi, mari kita mulai menyebarkan.

2. Menyebarkan ke Halaman Cloudflare

Mari kita menyebarkan situs ke halaman Cloudflare. Sebelum melangkah lebih jauh, kita harus membuat akun Cloudflare. Jika Anda belum memiliki akun di Cloudflare, buat akun di sini. Setelah selesai membuat akun Cloudflare, Anda siap untuk menyebarkan situs Anda.

• Buka situs Halaman Cloudflare.
• Masuk ke akun Anda. Anda akan melihat dashboard sebagai berikut.

• Jika Anda telah masuk ke situs web Cloudflare , Anda mungkin tidak melihat dasbor halaman Anda.
• Arahkan ke dasbor halaman dengan mengklik tombol Halaman di sisi kanan dasbor Cloudflare Anda. Lihat gambar di bawah ini.

• Klik tombol Buat proyek dari dasbor halaman.

• Anda akan menavigasi ke halaman berikut.

• Klik pada akun Connect GitHub untuk mendapatkan repositori aplikasi kami dari GitHub .
• Anda akan diarahkan ke halaman aplikasi GitHub untuk mengotorisasi Halaman Cloudflare.

• Kami dapat memberikan akses ke semua repositori atau yang dipilih. Lebih baik memberikan akses ke repositori yang kami gunakan ke Halaman Cloudflare. Anda dapat memberikan akses ke semua repositori jika Anda mau.
• Pilih salah satu dari dua opsi.
• Jika Anda telah memilih All repositories , tidak perlu memilih repositori tertentu. Klik tombol Instal & Otorisasi .
• Jika Anda telah memilih Only select repositories , maka Anda harus memilih repositori dari dropdown. Klik pada dropdown Pilih repositori yang muncul setelah memilih opsi Hanya pilih repositori .

• Masukkan nama repositori Anda sebagai berikut.

• Repositori Anda akan ditampilkan setelah Anda memasukkan nama. Pilih repositori. Anda dapat melihat repositori yang dipilih di bagian atas daftar sebagai berikut.

• Klik tombol Instal & Otorisasi . Anda akan diarahkan ke halaman penyebaran Halaman Cloudflare.
• Anda akan melihat semua repositori resmi di halaman.

• Pilih repositori yang ingin Anda terapkan.

• Setelah memilih repositori yang akan digunakan, klik tombol Begin setup .

• Ini akan membawa Anda ke langkah selanjutnya dalam proses penerapan, yaitu, Menyiapkan build dan penerapan .

• Saat Anda menggulir ke bawah, Anda akan menemukan bagian bernama Build settings . Kita harus memilih proses pembuatan yang sesuai untuk aplikasi frontend kita.
• Kita harus memilih proses build berdasarkan framework atau library yang kita gunakan.
• Klik preset Kerangka untuk melihat semua opsi.

• Di sini, kami menggunakan aplikasi React dan Plain JavaScript .
• Jika Anda men-deploy aplikasi React , pilih Create React App dari dropdown.
• Untuk aplikasi JavaScript Biasa tanpa paket apa pun, lalu pilih Tidak Ada .

• Jika Anda menerapkan beberapa aplikasi frontend lainnya, maka pilih opsi build preset Framework yang sesuai.
• Kita dapat memilih None dan memasukkan perintah custom build juga. Berdasarkan aplikasi Anda, pilih itu.
• Setelah pengaturan konfigurasi build, klik tombol Save and Deploy untuk menyelesaikan proses penerapan kami.
• Setelah Anda mengklik tombol Save and Deploy , proses penerapan akan dimulai sebagai berikut.

• Prosesnya akan memakan waktu beberapa menit untuk menyebarkan situs kami. Tunggu dan nikmati.
• Setelah proses penerapan selesai, ini menunjukkan kepada Anda URL situs dengan pesan sukses.

• Kunjungi situs dengan URL yang diberikan.

• Kami dapat memperbarui pengaturan situs dari halaman proyek.

• Halaman Cloudflare akan secara otomatis menyebarkan pembaruan setiap kali kami memasukkan kode baru ke repositori.

Itu dia. Kami selesai dengan menyebarkan aplikasi frontend kami ke halaman Cloudflare.

Kesimpulan

Hore! kami telah menyebarkan aplikasi frontend kami ke Halaman Cloudflare. Setelah menerapkan aplikasi frontend, Anda mungkin harus mengubah pengaturan, memperbarui berbagai hal, dll.; lihat dokumentasi Cloudflare di sini. Jika Anda ingin melihat langkah-langkah untuk menerapkan panduan kerangka kerja tertentu, Anda dapat menuju ke bagian panduan kerangka kerja di dokumentasi.

Selanjutnya, bagaimana dengan men-deploy frontend ke Netlify?

Catatan: Situs demo yang ditampilkan dalam artikel mungkin tidak tersedia untuk umum setelah beberapa waktu.

Selamat Menyebarkan