8 perkhidmatan pengehosan aplikasi React percuma10 min read

Jadi anda membina apl React, tetapi anda tidak pasti cara atau tempat untuk mengehoskannya. Dalam artikel ini, kami akan membimbing anda melalui 8 perkhidmatan pengehosan React percuma, menunjukkan kepada anda cara kami menggunakan apl React ini menggunakan setiap satu, dan memberitahu anda apa yang kami pelajari dalam proses itu.

Kami membina aplikasi kami dalam Figma menggunakan Anima pemalam, yang membolehkan kami menambah fungsi, tingkah laku responsif dan media kaya, kemudian eksport kod React sedia dev untuk keseluruhan UI. Kami mengambil masa sehari untuk mereka bentuk dan menggunakan.

Tempat untuk mengehoskan apl React anda secara percuma

Terdapat semakin banyak penyelesaian pengehosan tanpa pelayan di luar sana berkat peningkatan rangka kerja berasaskan komponen seperti React. Amazon AWS, Microsoft Azure, dan Google Cloud kini merupakan platform yang dominan. Walau bagaimanapun, terdapat peralihan yang semakin meningkat ke arah perkhidmatan pengehosan bahagian hadapan khusus yang memerlukan sedikit usaha, dan boleh membantu anda beroperasi dalam masa yang singkat—dan kebanyakannya termasuk CI/CD. Berikut ialah 8 perkhidmatan pengehosan aplikasi React percuma yang kami uji:

1. Netlify

2. Vercel

3. AWS Amplify

4. Firebase

5. Halaman GitHub

6. Halaman GitLab

7. Render

8. Lonjakan

Mari kita mendalami perkhidmatan pengehosan apl React percuma ini dengan lebih terperinci, dan tunjukkan cara kami menggunakan apl React menggunakan setiap satu. 

Netlify

Latar belakang

Netlify telah diasaskan pada tahun 2014 dan ia memfokuskan sejak awal untuk mengehos laman web statik. Ia menarik ramai pembangun kerana peringkat percumanya yang murah hati. Beberapa tahun kemudian, Netlify berkembang menjadi salah satu hos JAMstack dan tapak web statik yang paling popular.

Cara menggunakan

1. Sebaik-baiknya, anda akan mendaftar atau log masuk dengan GitHub. Ini memastikan anda boleh mengakses repositori pada profil anda dan mengaturnya dengan cepat.
2. Setelah log masuk, klik “Tambah tapak baharu” dan pilih “Import projek sedia ada.”
3. Kemudian klik GitHub sebagai pembekal anda.
4. Pilih “laman web bank” atau apa sahaja nama projek anda.
5. Perhalusi tetapan penempatan (dalam kes tapak web kami, lalai berfungsi dengan sempurna), kemudian klik “Kerahkan tapak.”
6. Setelah digunakan, anda boleh melihatnya pada URL awam yang boleh anda kongsi dengan dunia. Yay!

Inilah apl langsung yang digunakan pada Netlify.

Kebaikan dan keburukan

Netlify mudah disediakan dan digunakan, apatah lagi ia adalah salah satu perkhidmatan terpantas yang kami uji di sini. Satu kelemahan ialah jika anda memerlukan kolaborator dan/atau pasukan, anda mesti meningkatkan kepada pelan berbayar.

Vercel

Latar belakang

Vercel (asalnya dikenali sebagai Zeit) diasaskan pada 2015 dan dengan cepat menjadi terkenal. Mereka ialah penyelenggara Next.js, rangka kerja React yang popular untuk membina tapak web. Mereka menawarkan peringkat percuma kepada tapak web bukan komersial, serta cara untuk menggunakan rangkaian Edge mereka untuk fungsi tanpa pelayan.

Cara menggunakan

1. Log masuk atau daftar dengan GitHub.
2. Klik pada menu lungsur “Tambah Baharu…” dan pilih “Projek.”                                                             
3. Pilih “laman web bank” atau projek React kegemaran anda.
4. Kami menggunakan tetapan lalai untuk penggunaan dan kemudian mengklik “Kerahkan.”
5. Selepas beberapa lama, kami telah memasang tapak web.

Inilah URL secara langsung.

Kebaikan dan keburukan

Vercel memerlukan sedikit masa untuk cache bahagian pemasangan proses penempatan, tetapi selepas itu, ia adalah salah satu perkhidmatan terpantas. Ia menunjukkan penggunaan pratonton untuk setiap cawangan yang anda tolak dan ia melakukannya dengan cepat kerana caching.

AWS Amplify

Latar belakang

AWS ialah koleksi besar produk awan, dan Amplify diiklankan sebagai cara mudah untuk mendapatkan sebahagian daripadanya. Dengan AWS Amplify, anda boleh membina, menghantar dan mengehoskan aplikasi tindanan penuh dengan cepat pada AWS, dengan fleksibiliti untuk memanfaatkan keluasan perkhidmatan AWS apabila kes penggunaan berkembang.

Cara menggunakan

1. Daftar atau log masuk ke AWS, kemudian cari AWS Amplify dan klik “Bermula.”
2. Pilih GitHub dan benarkan (saya hanya membenarkannya untuk repo “laman web bank”).
3. Pilih repo dalam bahagian “Repositori yang dikemas kini baru-baru ini”.
   1. Dalam tetapan binaan, kita perlu menukar baseDirectory untuk menjadi apl kami dist seperti itu: Kemudian, tetapan binaan sepatutnya kelihatan seperti ini:
4. Dalam langkah seterusnya, klik “Simpan dan gunakan.”
5. Selepas beberapa lama, tapak web akan digunakan dan sedia untuk digunakan.

Dan kami bersiaran langsung! Inilah iaitu URL.

Kebaikan dan keburukan

Anda perlu mengedit baseDirectory dalam spesifikasi penempatan—ia tidak dikenali di luar kotak. UI berasa agak kikuk, tetapi ini adalah pilihan peribadi. Terdapat potensi besar untuk AWS Amplify kerana banyak perkhidmatan web AWS lain berada dalam jangkauan tangan.

Firebase

Latar belakang

Firebase ialah perkhidmatan Google yang paling dikenali sebagai platform storan masa nyata. Tetapi ia juga mempunyai pilihan pengehosan untuk tapak web statik dan perkhidmatan mikro Express.js atau APIs, dan menyokong pratonton URLs untuk cawangan yang sedang diusahakan oleh pasukan anda. Seperti Netlify, Vercel dan lain-lain, ia menyediakan kandungan yang digunakan melalui rangkaian CDN.

Cara menggunakan

1. Pasang firebase-tools dengan npm install -g firebase-tools.
2. Log masuk ke Firebase dengan log masuk firebase. Sebaik sahaja anda log masuk, anda akan melihat mesej seperti ini:
3. Beralih ke direktori projek dan jalankan firebase init, anda sepatutnya melihat sesuatu seperti ini: Pilih pilihan untuk mengkonfigurasi fail untuk Firebase Hosting dengan penggunaan GitHub Action pilihan. Kemudian, anda boleh membuat projek terus daripada CLI atau menggunakan UI Firebase untuk melakukannya dan kemudian menyambungkannya. Kami mencipta projek daripada baris arahan, dan beginilah cara kami menjawab soalan yang terhasil:                                                                                                                                    Selepas itu, fail son“ dan rc base.j akan dibuat.
4. Kemudian, lari penyebaran firebase untuk benar-benar menggunakan fail daripada distdirektori. Jika direktori tiada, pastikan untuk dijalankan npm run build pertama untuk menjana fail. The penyebaran firebase arahan harus menghasilkan output yang serupa dengan contoh di bawah:

Sekarang anda boleh melihat laman web pada URL yang disediakan. Yay! 

Kebaikan dan keburukan

Firebase agak mudah, tetapi apabila anda menyediakannya di dalam projek anda, soalan yang perlu anda jawab agak mengelirukan. Nasib baik, kami menjawabnya untuk anda dalam bahagian di atas, tetapi mereka memerlukan pemahaman tentang ciri Firebase sebenar sebelum meneruskan. Selain itu, Firebase pantas untuk digunakan dan boleh menjana URL di mana anda boleh pratonton fail yang digunakan. Anda juga boleh mengautomasikannya dengan mudah dengan penggunaan GitHub Action dengan CLI, yang kemas.

Halaman GitHub

Latar belakang

Halaman GitHub telah wujud sejak sekian lama dan ia merupakan cara mudah untuk menerbitkan dokumen atau tapak web peribadi terus daripada GitHub. Ia bagus untuk kandungan statik dan ramai orang menggunakannya untuk menggunakan tapak mudah dengan pelaburan yang minimum. Ia percuma untuk digunakan jika projek anda terbuka dan merupakan cara yang pantas dan murah untuk mengehoskan tapak web.

Cara menggunakan

Sila ambil perhatian bahawa anda perlu mengedit App.jsx tempat kita panggil Penghala dan tambah nama asas kepadanya untuk memadankan nama repo. Jadi begini caranya App.jsx sepatutnya melihat:                                                                                        Kita perlu mengubah nama asas kerana halaman GitHub akan menggunakan tapak web ke URL dalam bentuk ini `https://GITHUB_USERNAME.gitlab.io/REPO_NAME`. Tapak web tidak akan berfungsi dengan betul tanpa nama asas yang ditetapkan untuk react-router-dom.

1. Selepas kod berubah, kita perlu memasang gh-halaman pakej dengan:
2. Dan, tambahkan a prapengerahan dan a mengerahkan skrip ke package.json:
3. Kemudian, kita hanya berlari npm run deploy. Ia akan mencetuskan npm run build dan ia akan menggunakan gh-halaman untuk menerbitkan kandungan dist ke cawangan berasingan pada GitHub dipanggil gh-halaman.
4. Akhir sekali, semak sama ada gh-halaman digunakan untuk Halaman GitHub seperti di bawah:

Inilah URL secara langsung.

Kebaikan dan keburukan

Jika anda menggunakan projek yang berbeza daripada nama pengguna anda, ia akan digunakan dalam subdirektori pada domain percuma kami dengan GitHub. Kemudian, anda perlu menulis kod tambahan untuk menyokong logik berada di dalam subdirektori.

Ia tidak menyokong penggunaan berterusan di luar kotak dalam kes penggunaan kami, tetapi anda boleh menyediakannya. Setelah disediakan, ia cepat untuk menggunakan perubahan.

Halaman GitLab

Latar belakang

Seperti GitHub, GitLab mempunyai penyelesaian pengehosannya sendiri, dan mereka memanggilnya GitLab Pages. Saya perlu memberikannya kepada mereka, lebih mudah untuk menyediakan penggunaan berterusan ke Halaman GitLab berbanding Halaman GitHub.

Cara menggunakan

1. Daftar atau log masuk ke GitLab
2. Tambahkan repo ke GitLab jika anda belum memilikinya di sana. awak boleh garpu yang saya tambah di sana 
   Sama seperti Halaman GitHub, anda perlu mengedit App.jsx tempat kita panggil Penghala dan tambah  nama asas kepadanya untuk memadankan nama repo. Jadi ini adalah perubahan terakhir:                                                               Kita perlu mengubah nama asas kerana halaman GitLab akan menggunakan tapak web ke URL dalam bentuk ini: https://GITLAB_USERNAME.gitlab.io/REPOSITORY_NAME. Tapak web tidak akan berfungsi dengan betul tanpa nama asas yang ditetapkan untuk react-router-dom.
3. Setelah anda mengedit dan menolak projek ke GitLab, pergi ke Tetapan > Halaman dan anda akan disambut dengan wizard empat langkah untuk menggunakan repo ke Halaman GitLab. 
4. Langkah pertama dalam wizard ialah memasukkan imej binaan. Kami akan menggunakan Node.js LTS.
5. Seterusnya, kami akan memasukkan arahan pra-bina. The npm ci akan cukup di sini.
6. Sekarang untuk langkah membina. Kita perlu lulus —-dist-dir awam kerana Halaman GitLab mengharapkan tapak web dibina dalam awam direktori. Anda tidak boleh lari dengan mana-mana direktori lain, maaf.
7. Komit yang baru dijana .gitlab-ci.yml fail yang memberitahu GitLab cara menggunakan tapak web anda.
8. Sekarang, pergi ke CI/CD -> bahagian Pipelines pada repo dan perhatikan prestasi saluran paip yang baru ditambah.
9. Selepas beberapa lama, kerja saluran paip akan selesai dan tapak web akan digunakan pada Halaman GitLab.

Ini hasilnya.

Kebaikan dan keburukan

Pakej lambat dipasang dan anda perlu menambah kod tambahan untuk membolehkannya berfungsi, tetapi wizard sangat intuitif dengan hanya empat langkah untuk digunakan.

Render

Latar belakang

Render ialah anak baharu di blok yang dilancarkan pada 2019. Ia cuba mengganggu cara orang menggunakan perkhidmatan mereka (termasuk tapak web statik). Setakat ini, mereka berjalan lancar dan semakin bertambah bilangannya.

Cara menggunakan

1. Daftar atau log masuk ke Render.
2. Buat tapak web statik baharu dengan menekan butang “Baharu” dan memilih “Tapak Statik.”
3. Pilih repo yang anda mahu gunakan.
4. Simpan benang; binaan benang arahan bina dalam tetapan binaan. Malangnya, ia tidak berfungsi dengan npm ci; npm run build seperti perkhidmatan lain lakukan. Tukar “Terbitkan direktori” kepada dist dan klik “Buat Tapak Statik.”
5. Selepas beberapa lama, Render akan menggunakan kod.

Inilah URL langsung daripada Render.

Kebaikan dan keburukan

Ia benar-benar pantas, tetapi ia tidak berfungsi dengan baik untuk projek kami dengan arahan `npm ci` dan `npm run build`. Hanya `benang` nampaknya berfungsi.

Lonjakan

Latar belakang

Surge telah wujud sejak sekian lama. Di sebelah kanan kelawar, perkhidmatan mereka mudah digunakan dan hanya memerlukan satu atau dua arahan untuk menggunakan tapak web statik anda. Ia adalah percuma, tetapi menawarkan pelan berbayar sebanyak 30$/bulan. Ketabahan alat itulah yang menjadikannya bersinar. Tiada persediaan yang rumit diperlukan, cuma pasang `surge` dan jalankannya dengan `surge`.

Cara menggunakan

1. Untuk menyediakan, lari npm run build untuk menjana fail statik di dalam dist direktori. The lonjakan akan menggunakannya untuk penempatan.
2. Lari npm install –lonjakan global
3. Kemudian, lari lonjakan.

Beberapa perkara yang perlu diperhatikan:
Jika ini kali pertama anda menjalankannya, anda perlu membuat akaun dengan Surge. Jangan risau, ianya mudah. Hanya masukkan e-mel anda dan kata laluan yang dikehendaki.

Kemudian, anda akan diminta untuk memasukkan “projek”, yang sepatutnya menjadi laluan ke dist direktori. Anda boleh tambahkan sahaja dist ke laluan yang anda berikan jika anda menjalankan lonjakan di dalam repo yang anda gunakan.

Kemudian, masukkan URL masa depan tapak web anda. Cuba sesuatu yang unik kerana apa lonjakan yang ditawarkan tidak berkesan untuk saya.

Selepas input URL, lonjakan akan menggunakan kandungan daripada dist ke URL yang ditentukan. Inilah yang saya dapat:

Kebaikan dan keburukan

Ia pantas dan mudah serta tidak memerlukan anda menggunakan antara muka yang berasingan—tetapi ia gagal mencadangkan URL yang tersedia untuk apl anda.

Masa untuk digunakan untuk setiap perkhidmatan pengehosan

3 perkhidmatan pengehosan React terbaik kami

1. Netlify
2. Vercel
3. Lonjakan

Pengambilan utama

Selepas menguji setiap perkhidmatan pengehosan aplikasi React percuma ini, kami berpendapat Netlify adalah yang terbaik daripada kumpulan tersebut. Ia menyediakan penggunaan pantas dengan banyak ciri yang mungkin anda perlukan. Sejurus selepas itu ialah Vercel yang mempunyai banyak ciri dan agak pantas selepas penggunaan awal. Kemudian, kami mempunyai Surge yang merupakan alat penggunaan minimum yang boleh menjadi agak murah jika anda memutuskan untuk meningkatkan.

Automatikkan binaan bahagian hadapan anda & hantar apl anda 10x lebih pantas. Ketahui lebih lanjut.