8 layanan hosting aplikasi React gratis10 min read

Jadi Anda membuat aplikasi React, tetapi Anda tidak yakin bagaimana atau di mana menghostingnya. Pada artikel ini, kami akan memandu Anda melalui 8 layanan hosting React gratis, menunjukkan cara kami menerapkannya aplikasi React ini menggunakan masing-masingnya, dan memberi tahu Anda apa yang kami pelajari dalam prosesnya.

Kami membangun aplikasi kami di Figma menggunakan Anima plugin, yang memungkinkan kami menambahkan fungsionalitas, perilaku responsif, dan multimedia ekspor kode React yang siap dikembangkan untuk seluruh UI. Kami membutuhkan waktu satu hari untuk merancang dan menerapkannya.

Tempat menghosting aplikasi React Anda secara gratis

Ada semakin banyak solusi hosting tanpa server di luar sana berkat munculnya kerangka kerja berbasis komponen seperti React. Amazon AWS, Microsoft Azure, dan Google Cloud saat ini merupakan platform yang dominan. Namun, terdapat pergeseran yang semakin besar ke arah layanan hosting frontend khusus yang memerlukan lebih sedikit usaha, dan dapat membantu Anda aktif dalam waktu singkat—dan sebagian besar mencakup CI/CD. Berikut adalah 8 layanan hosting aplikasi React gratis yang kami uji:

1. Netlifikasi

2. Vercel

3. AWS Memperkuat

4. basis api

5. Halaman GitHub

6. Halaman GitLab

7. Render

8. Lonjakan

Mari selami layanan hosting aplikasi React gratis ini secara lebih detail, dan tunjukkan bagaimana kami menerapkan aplikasi React menggunakan masing-masing layanan tersebut. 

Netlifikasi

Latar Belakang

Netlify didirikan pada tahun 2014 dan sejak awal berfokus pada hosting situs web statis. Ini menarik banyak pengembang karena tingkat gratisnya yang melimpah. Beberapa tahun kemudian, Netlify tumbuh menjadi salah satu JAMstack dan host situs web statis paling populer.

Cara menggunakan

1. Idealnya, Anda mendaftar atau masuk dengan GitHub. Hal ini memastikan Anda dapat mengakses repositori di profil Anda dan menyebarkannya dengan cepat.
2. Setelah masuk, klik “Tambahkan situs baru” dan pilih “Impor proyek yang sudah ada”.
3. Kemudian klik GitHub sebagai penyedia Anda.
4. Pilih “situs web bank” atau apa pun nama proyek Anda.
5. Sempurnakan pengaturan penerapan (untuk situs web kami, pengaturan default berfungsi dengan baik), lalu klik “Terapkan situs”.
6. Setelah diterapkan, Anda dapat melihatnya di URL publik yang dapat Anda bagikan kepada dunia. Hore!

Ini dia aplikasi langsung yang diterapkan di Netlify.

Pro dan kontra

Netlify mudah diatur dan diterapkan, belum lagi ini adalah salah satu layanan tercepat yang kami uji di sini. Satu kelemahannya adalah jika Anda membutuhkan kolaborator dan/atau tim, Anda harus meningkatkan ke paket berbayar.

Vercel

Latar Belakang

Vercel (awalnya dikenal sebagai Zeit) didirikan pada tahun 2015 dan dengan cepat menjadi terkenal. Mereka adalah pengelola Next.js, kerangka kerja React yang populer untuk membangun situs web. Mereka menawarkan tingkat gratis untuk situs web non-komersial, serta cara menggunakan jaringan Edge mereka untuk fungsi tanpa server.

Cara menggunakan

1. Masuk atau daftar dengan GitHub.
2. Klik pada tarik-turun “Tambah Baru…” dan pilih “Proyek.”                                                             
3. Pilih “situs web bank” atau proyek React favorit Anda.
4. Kami menggunakan pengaturan penerapan default dan kemudian mengklik “Terapkan.”
5. Setelah beberapa waktu, kami menerapkan situs web tersebut.

Ini dia URL langsung.

Pro dan kontra

Vercel memerlukan waktu untuk menyimpan bagian instalasi dari proses penerapan dalam cache, tetapi setelah itu, ini adalah salah satu layanan tercepat. Ini menunjukkan penerapan pratinjau untuk setiap cabang yang Anda dorong dan melakukannya dengan cepat karena cache.

AWS Memperkuat

Latar Belakang

AWS adalah kumpulan produk cloud yang sangat banyak, dan Amplify diiklankan sebagai cara mudah untuk mendapatkan beberapa di antaranya. Dengan AWS Amplify, Anda dapat dengan cepat membangun, mengirimkan, dan menghosting aplikasi full-stack di AWS, dengan fleksibilitas untuk memanfaatkan luasnya layanan AWS seiring berkembangnya kasus penggunaan.

Cara menggunakan

1. Daftar atau masuk ke AWS, lalu cari AWS Amplify dan klik “Memulai.”
2. Pilih GitHub dan otorisasi (saya hanya mengizinkannya untuk repo “situs web bank”).
3. Pilih repo di bagian “Repositori yang baru diperbarui”.
   1. Dalam pengaturan build, kita harus mengubah Direktori dasar untuk aplikasi kita dist seperti ini: Kemudian, pengaturan build akan terlihat seperti ini:
4. Pada langkah selanjutnya, klik “Simpan dan terapkan”.
5. Setelah beberapa waktu, situs web akan disebarkan dan siap digunakan.

Dan kami sedang siaran langsung! Ini dia URL.

Pro dan kontra

Anda harus mengedit Direktori dasar dalam spesifikasi penerapan—itu tidak langsung dikenali. UI-nya terasa agak kikuk, tapi ini adalah pilihan pribadi. Ada potensi besar untuk AWS Amplify karena banyak layanan web AWS lainnya berada dalam jangkauan.

basis api

Latar Belakang

Firebase adalah layanan Google yang paling dikenal sebagai platform penyimpanan real-time. Namun ia juga memiliki opsi hosting untuk situs web statis dan layanan mikro Express.js atau API, dan mendukung pratinjau URL untuk cabang yang sedang dikerjakan tim Anda. Seperti Netlify, Vercel, dan lainnya, ia menyajikan konten yang diterapkan melalui jaringan CDN.

Cara menggunakan

1. Instal alat firebase dengan npm install -g firebase-tools.
2. Masuk ke Firebase dengan masuk firebase. Setelah Anda masuk, Anda akan melihat pesan seperti ini:
3. Pindah ke direktori proyek dan jalankan firebase init, Anda akan melihat sesuatu seperti ini: Pilih opsi untuk mengonfigurasi file untuk Firebase Hosting dengan penerapan Tindakan GitHub opsional. Kemudian, Anda dapat membuat proyek langsung dari CLI atau menggunakan Firebase UI untuk melakukannya dan kemudian menghubungkannya. Kami membuat proyek dari baris perintah, dan inilah cara kami menjawab pertanyaan yang dihasilkan:                                                                    Setelah itu, file `firebase.json` dan `.firebaserc` sederhana akan dibuat.
4. Lalu, lari penerapan firebase untuk benar-benar menyebarkan file dari distdirektori. Jika direktori tidak ada, pastikan untuk menjalankannya npm jalankan pembangunan pertama yang menghasilkan file. Itu penerapan firebase perintah harus menghasilkan output yang mirip dengan contoh di bawah ini:

Sekarang kamu bisa melihat situs web pada URL yang disediakan. Hore! 

Pro dan kontra

Firebase cukup sederhana, tetapi ketika Anda menyiapkannya di dalam proyek Anda, pertanyaan yang perlu Anda jawab agak membingungkan. Untungnya, kami telah menjawabnya untuk Anda di bagian di atas, namun hal tersebut memerlukan pemahaman tentang fitur Firebase sebenarnya sebelum melanjutkan. Selain itu, Firebase cepat diterapkan dan dapat menghasilkan URL tempat Anda dapat melihat pratinjau file yang diterapkan. Anda juga dapat dengan mudah mengotomatiskannya dengan penerapan Aksi GitHub dengan CLI, yang rapi.

Halaman GitHub

Latar Belakang

Halaman GitHub telah ada selama beberapa waktu dan merupakan cara mudah untuk mempublikasikan dokumen atau situs web pribadi langsung dari GitHub. Ini bagus untuk konten statis dan banyak orang menggunakannya untuk menyebarkan situs sederhana dengan investasi minimal. Ini gratis untuk digunakan jika proyek Anda bersifat publik dan merupakan cara cepat dan murah untuk menghosting situs web.

Cara menggunakan

Harap dicatat Anda harus mengedit Aplikasi.jsx tempat kami menelepon Perute dan tambahkan nama dasar untuk itu agar cocok dengan nama repo. Jadi begini caranya Aplikasi.jsx akan terlihat:                                                                                        Kita harus mengubah nama dasar karena halaman GitHub akan menyebarkan situs web ke URL dalam bentuk `https://GITHUB_USERNAME.gitlab.io/REPO_NAME`. Situs web tidak akan berfungsi dengan baik tanpa nama dasar yang ditetapkan untuknya reaksi-router-dom.

1. Setelah kode berubah, kita perlu menginstal gh-halaman paket dengan:
2. Dan, tambahkan a penerapan awal dan sebuah menyebarkan skrip ke paket.json:
3. Lalu, kita lari saja npm jalankan penerapan. Ini akan memicu npm jalankan pembangunan dan itu akan digunakan gh-halaman untuk mempublikasikan isinya dist ke cabang terpisah di GitHub disebut gh-halaman.
4. Terakhir, periksa apakah gh-halaman digunakan untuk Halaman GitHub seperti di bawah ini:

Ini dia URL langsung.

Pro dan kontra

Jika Anda menerapkan proyek yang berbeda dari nama pengguna Anda, proyek tersebut akan diterapkan di dalam subdirektori di domain gratis kami di GitHub. Kemudian, Anda perlu menulis kode tambahan untuk mendukung logika berada di dalam subdirektori.

Ini tidak mendukung penerapan berkelanjutan secara langsung dalam kasus penggunaan kami, tetapi Anda dapat mengaturnya. Setelah diatur, perubahan dapat diterapkan dengan cepat.

Halaman GitLab

Latar Belakang

Seperti GitHub, GitLab memiliki solusi hostingnya sendiri, dan mereka menyebutnya Halaman GitLab. Saya harus memberikannya kepada mereka, lebih mudah untuk mengatur penerapan berkelanjutan ke Halaman GitLab daripada untuk Halaman GitHub.

Cara menggunakan

1. Daftar atau masuk ke GitLab
2. Tambahkan repo ke GitLab jika Anda belum memilikinya. Anda bisa garpu yang saya tambahkan di sana 
   Mirip dengan Halaman GitHub, Anda harus mengedit Aplikasi.jsx tempat kami menelepon Perute dan tambahkan  nama dasar untuk itu agar cocok dengan nama repo. Jadi ini adalah perubahan terakhir:                                                               Kita harus mengubah nama dasar karena halaman GitLab akan menyebarkan situs web ke URL dengan bentuk ini: https://GITLAB_USERNAME.gitlab.io/REPOSITORY_NAME. Situs web tidak akan berfungsi dengan baik tanpa nama dasar yang ditetapkan untuknya reaksi-router-dom.
3. Setelah Anda mengedit dan memasukkan proyek ke GitLab, buka Pengaturan > Halaman dan Anda akan disambut dengan panduan empat langkah untuk menyebarkan repo ke Halaman GitLab. 
4. Langkah pertama dalam wizard adalah memasukkan image build. Kami akan menggunakan Node.js LTS.
5. Selanjutnya, kita akan memasukkan perintah pra-bangun. Itu npm ci akan cukup di sini.
6. Sekarang untuk langkah pembuatannya. Kita harus lulus — –dist-dir publik karena GitLab Pages berharap situs webnya dibangun di dalamnya publik direktori. Anda tidak dapat lolos dari direktori lain mana pun, maaf.
7. Komit yang baru dihasilkan .gitlab-ci.yml file yang memberi tahu GitLab cara menyebarkan situs web Anda.
8. Sekarang, buka bagian CI/CD -> Pipelines dari repo dan amati kinerja pipeline yang baru ditambahkan.
9. Setelah beberapa waktu, pekerjaan pipeline akan selesai dan situs web akan diterapkan di Halaman GitLab.

Ini dia hasilnya.

Pro dan kontra

Paket lambat untuk diinstal dan Anda perlu menambahkan kode tambahan agar dapat berfungsi, tetapi wizardnya sangat intuitif dengan hanya empat langkah untuk diterapkan.

Render

Latar Belakang

Render adalah anak baru yang diluncurkan pada tahun 2019. Render mencoba mengganggu cara orang menerapkan layanan mereka (termasuk situs web statis). Sejauh ini, mereka baik-baik saja dan jumlahnya terus bertambah.

Cara menggunakan

1. Daftar atau masuk ke Render.
2. Buat situs web statis baru dengan menekan tombol “Baru” dan memilih “Situs Statis”.
3. Pilih repo yang ingin Anda terapkan.
4. Pertahankan benang; pembuatan benang perintah build dalam pengaturan build. Sayangnya, ini tidak berhasil npm ci; npm jalankan pembangunan seperti yang dilakukan layanan lainnya. Ubah “Publikasikan direktori” menjadi dist dan klik “Buat Situs Statis”.
5. Setelah beberapa waktu, Render akan menyebarkan kode tersebut.

Ini dia URL langsung dari Render.

Pro dan kontra

Ini sangat cepat, tetapi tidak berfungsi dengan baik untuk proyek kami dengan perintah `npm ci` dan `npm run build`. Hanya `benang` yang tampaknya berfungsi.

Lonjakan

Latar Belakang

Surge telah ada selama beberapa waktu sekarang. Benar saja, layanan mereka mudah digunakan dan hanya memerlukan satu atau dua perintah untuk menerapkan situs web statis Anda. Ini gratis, tetapi menawarkan paket berbayar sebesar $30/bulan. Ketabahan alat inilah yang membuatnya bersinar. Tidak diperlukan pengaturan yang rumit, cukup instal `surge` dan jalankan dengan `surge`.

Cara menggunakan

1. Untuk bersiap, jalankan npm jalankan pembangunan untuk menghasilkan file statis di dalamnya dist direktori. Itu lonjakan akan menggunakannya untuk penerapan.
2. Jalankan npm install –gelombang global
3. Lalu, lari lonjakan.

Beberapa hal yang perlu diperhatikan:
Jika ini pertama kalinya Anda menjalankannya, Anda harus membuat akun dengan Surge. Jangan khawatir, ini mudah. Cukup masukkan email Anda dan kata sandi yang diinginkan.

Kemudian, Anda akan diminta memasukkan “proyek”, yang seharusnya menjadi jalur menuju dist direktori. Anda bisa menambahkan saja dist ke jalur yang diberikan jika Anda menjalankan surge di dalam repo yang Anda terapkan.

Kemudian, masukkan URL masa depan situs web Anda. Cobalah sesuatu yang unik karena apa lonjakan ditawarkan tidak berhasil untuk saya.

Setelah masukan URL, lonjakan akan menyebarkan konten dari dist ke URL yang ditentukan. Inilah yang saya dapatkan:

Pro dan kontra

Ini cepat dan sederhana dan tidak mengharuskan Anda untuk mengadopsi antarmuka terpisah—tetapi gagal menyarankan URL yang tersedia untuk aplikasi Anda.

Saatnya menerapkan untuk setiap layanan hosting

3 layanan hosting React gratis teratas kami

1. Netlifikasi
2. Vercel
3. Lonjakan

Poin-poin penting

Setelah menguji masing-masing layanan hosting aplikasi React gratis ini, menurut kami Netlify adalah yang terbaik di antara yang lainnya. Ini menyediakan penerapan cepat dengan banyak fitur yang mungkin Anda perlukan. Tepat setelahnya adalah Vercel yang memiliki banyak fitur dan cukup cepat setelah penerapan awal. Lalu, kami memiliki Surge yang merupakan alat penerapan minimal yang harganya cukup murah jika Anda memutuskan untuk melakukan upgrade.

Otomatiskan pembuatan frontend & kirimkan aplikasi Anda 10x lebih cepat. Pelajari lebih lanjut.