8 libreng serbisyo sa pagho-host ng React app12 min read

Kaya gumawa ka ng React app, ngunit hindi ka sigurado kung paano o saan ito iho-host. Sa artikulong ito, gagabayan ka namin sa 8 libreng serbisyo sa pagho-host ng React, ipakita sa iyo kung paano kami nag-deploy ang React app na ito gamit ang bawat isa, at sabihin sa iyo kung ano ang natutunan namin sa proseso.

Binuo namin ang aming app sa Figma gamit ang Anima plugin, na nagpapahintulot sa amin na magdagdag ng functionality, tumutugon na gawi, at rich media, kung gayon i-export ang dev-ready na React code para sa buong UI. Kinailangan kami ng isang araw upang magdisenyo at mag-deploy.

Kung saan iho-host ang iyong React app nang libre

Mayroong dumaraming bilang ng walang server na mga solusyon sa pagho-host doon salamat sa pagtaas ng mga framework na nakabatay sa bahagi tulad ng React. Ang Amazon AWS, Microsoft Azure, at Google Cloud ay kasalukuyang nangingibabaw na mga platform. Gayunpaman, mayroong isang lumalagong pagbabago patungo sa nakalaang mga serbisyo sa pagho-host ng frontend na nangangailangan ng mas kaunting pagsisikap, at maaaring makapagpatakbo sa iyo nang walang oras—at karamihan ay may kasamang CI/CD. Narito ang 8 libreng serbisyo sa pagho-host ng React app na sinubukan namin:

1. Netlify

2. Vercel

3. AWS Amplify

4. Firebase

5. Mga Pahina ng GitHub

6. Mga Pahina ng GitLab

7. I-render

8. Surge

Tingnan natin ang mga libreng serbisyo ng pagho-host ng React app na ito nang mas detalyado, at ipakita kung paano kami nag-deploy ng React app gamit ang bawat isa. 

Netlify

Background

Itinatag ang Netlify noong 2014 at ito ay nakatuon mula sa simula sa pagho-host ng mga static na website. Nakaakit ito ng maraming developer dahil sa napakagandang libreng tier nito. Sa loob ng ilang taon, lumago ang Netlify bilang isa sa pinakasikat na JAMstack at static na mga host ng website sa paligid.

Paano gamitin

1. Sa isip, magrerehistro ka o magsa-sign in gamit ang GitHub. Tinitiyak nito na maa-access mo ang mga repositoryo sa iyong profile at mabilis na mai-deploy ang mga ito.
2. Sa sandaling naka-log in, i-click ang “Magdagdag ng bagong site” at piliin ang “Mag-import ng isang umiiral na proyekto.”
3. Pagkatapos ay i-click ang GitHub bilang iyong provider.
4. Piliin ang “bank-website” o anuman ang pangalan ng iyong proyekto.
5. I-fine-tune ang mga setting ng deployment (sa kaso ng aming website, gumagana nang perpekto ang mga default), pagkatapos ay i-click ang “I-deploy ang site.”
6. Kapag na-deploy na, maaari mo itong tingnan sa isang pampublikong URL na maaari mong ibahagi sa mundo. Yay!

narito ang live na app na naka-deploy sa Netlify.

Mga kalamangan at kahinaan

Madaling i-set up at i-deploy ang Netlify, hindi banggitin na isa ito sa pinakamabilis na serbisyong sinubukan namin dito. Ang isang downside ay kung kailangan mo ng mga collaborator at/o isang team, dapat kang mag-upgrade sa isang bayad na plano.

Vercel

Background

Ang Vercel (orihinal na kilala bilang Zeit) ay itinatag noong 2015 at mabilis na sumikat. Sila ang mga nagpapanatili ng Next.js, isang sikat na React na framework para sa pagbuo ng mga website. Nag-aalok sila ng libreng tier sa mga hindi pangkomersyal na website, pati na rin ang mga paraan para magamit ang kanilang Edge network para sa mga walang server na function.

Paano gamitin

1. Mag-sign in o magparehistro sa GitHub.
2. Mag-click sa dropdown na “Magdagdag ng Bago…” at piliin ang “Proyekto.”                                                             
3. Piliin ang “bank-website” o ang iyong paboritong proyektong React.
4. Pumunta kami sa mga default para sa mga setting ng deployment at pagkatapos ay nag-click sa “Deploy.”
5. Pagkaraan ng ilang oras, nai-deploy namin ang website.

narito ang live na URL.

Mga kalamangan at kahinaan

Ang Vercel ay nangangailangan ng ilang oras upang i-cache ang bahagi ng pag-install ng proseso ng pag-deploy, ngunit pagkatapos nito, isa ito sa pinakamabilis na serbisyo. Nagpapakita ito ng mga pag-deploy ng preview para sa bawat sangay na itinutulak mo at mabilis itong ginagawa dahil sa pag-cache.

AWS Amplify

Background

Ang AWS ay isang napakalaking koleksyon ng mga produkto ng cloud, at ang Amplify ay ina-advertise bilang isang madaling paraan upang makuha ang ilan sa mga ito. Sa AWS Amplify, mabilis kang makakagawa, makakapagpadala, at makakapag-host ng mga full-stack na application sa AWS, na may kakayahang umangkop upang magamit ang lawak ng mga serbisyo ng AWS habang umuusbong ang mga kaso ng paggamit.

Paano gamitin

1. Mag-sign up o mag-log in sa AWS, pagkatapos ay hanapin ang AWS Amplify at i-click ang “Magsimula.”
2. Piliin ang GitHub at pahintulutan ito (pinapayagan ko lang ito para sa repo na “bank-website”).
3. Piliin ang repo sa seksyong “Mga kamakailang na-update na repositoryo”.
   1. Sa setting ng build, kailangan nating baguhin ang baseDirectory para maging ang aming app dist tulad nito: Pagkatapos, ang mga setting ng build ay dapat magmukhang ganito:
4. Sa susunod na hakbang, i-click ang “I-save at i-deploy.”
5. Pagkaraan ng ilang oras, ang website ay ide-deploy at handa nang gamitin.

At live na tayo! narito ang URL.

Mga kalamangan at kahinaan

Kailangan mong i-edit ang baseDirectory sa detalye ng deployment—hindi ito nakikilala sa labas ng kahon. Medyo clunky ang pakiramdam ng UI, ngunit ito ay isang personal na kagustuhan. Malaki ang potensyal para sa AWS Amplify dahil marami pang ibang serbisyo sa web ng AWS ang abot ng kamay.

Firebase

Background

Ang Firebase ay isang serbisyo ng Google na pinakamahusay na kilala bilang isang real-time na platform ng storage. Ngunit mayroon din itong opsyon sa pagho-host para sa mga static na website at Express.js microservice o APIs, at sumusuporta sa preview na URLs para sa mga sangay na pinagtatrabahuhan ng iyong team. Tulad ng sa Netlify, Vercel, at iba pa, inihahatid nito ang naka-deploy na nilalaman sa isang network ng CDN.

Paano gamitin

1. I-install firebase-tools kasama npm install -g firebase-tools.
2. Mag-log in sa Firebase gamit ang pag-login sa firebase. Sa sandaling mag-log in ka, dapat mong makita ang isang mensahe tulad nito:
3. Lumipat sa direktoryo ng proyekto at tumakbo firebase init, dapat kang makakita ng ganito: Piliin ang opsyong i-configure ang mga file para sa Firebase Hosting na may opsyonal na GitHub Action na pag-deploy. Pagkatapos, maaari kang gumawa ng proyekto nang direkta mula sa CLI o gumamit ng Firebase UI upang gawin ito at ikonekta ito sa ibang pagkakataon. Ginawa namin ang proyekto mula sa command line, at ganito namin sinagot ang mga nagresultang tanong:                                                                                                                                      Pagkatapos nito, gagawin ang mga simple na son“ at rc file.j.
4. Pagkatapos, tumakbo pag-deploy ng firebase upang aktwal na i-deploy ang mga file mula sa distdirektoryo. Kung nawawala ang direktoryo, siguraduhing tumakbo npm run build unang gumawa ng mga file. Ang pag-deploy ng firebase Ang command ay dapat bumuo ng output na katulad ng halimbawa sa ibaba:

Kaya mo na ngayon tingnan ang website sa ibinigay na URL. Yay! 

Mga kalamangan at kahinaan

Ang Firebase ay medyo simple, ngunit kapag na-set up mo ito sa loob ng iyong proyekto, ang mga tanong na kailangan mong sagutin ay medyo nakakalito. Sa kabutihang palad, sinagot namin sila para sa iyo sa seksyon sa itaas, ngunit nangangailangan sila ng pag-unawa sa mga aktwal na feature ng Firebase bago magpatuloy. Maliban doon, mabilis mag-deploy ang Firebase at makakabuo ng URL kung saan maaari mong i-preview ang mga na-deploy na file. Madali mo rin itong ma-automate gamit ang GitHub Action deployment gamit ang CLI, na maayos.

Mga Pahina ng GitHub

Background

Ang GitHub Pages ay matagal nang umiiral at ito ay isang madaling paraan para mag-publish ng mga doc o personal na website nang direkta mula sa GitHub. Ito ay maganda para sa static na nilalaman at maraming mga tao ang gumagamit nito upang mag-deploy ng mga simpleng site na may kaunting pamumuhunan. Libre itong gamitin kung pampubliko ang iyong proyekto at isang mabilis at murang paraan upang mag-host ng website.

Paano gamitin

Pakitandaan na kailangan mong i-edit ang App.jsx kung saan kami tumatawag Router at idagdag basename dito upang tumugma sa pangalan ng repo. Kaya ganito App.jsx dapat tumingin:                                                                                        Kailangan nating baguhin ang basename dahil ang mga pahina ng GitHub ay magde-deploy ng website sa isang URL ng form na ito `https://GITHUB_USERNAME.gitlab.io/REPO_NAME`. Hindi gagana nang maayos ang website nang walang nakatakdang basename para sa react-router-dom.

1. Pagkatapos ng pagbabago ng code, kailangan naming i-install gh-pahina pakete na may:
2. At, magdagdag ng isang predeploy at a i-deploy script sa package.json:
3. Tapos, tumakbo lang kami npm run deploy. Magti-trigger ito npm run build at ito ay gagamitin gh-pahina upang mailathala ang mga nilalaman ng dist sa isang hiwalay na sangay sa GitHub na tinatawag gh-pahina.
4. Panghuli, suriin kung ang gh-pahina ay ginagamit para sa GitHub Pages tulad ng nasa ibaba:

narito ang live na URL.

Mga kalamangan at kahinaan

Kung nagde-deploy ka ng proyekto na naiiba sa iyong username, ide-deploy ito sa loob ng isang subdirectory sa aming libreng domain sa GitHub. Pagkatapos, kailangan mong magsulat ng karagdagang code upang suportahan ang lohika ng pagiging nasa loob ng isang subdirectory.

Hindi nito sinusuportahan ang tuluy-tuloy na pag-deploy out-of-the-box sa aming use case, ngunit maaari mo itong i-set up. Kapag na-set up na, mabilis itong mag-deploy ng mga pagbabago.

Mga Pahina ng GitLab

Background

Tulad ng GitHub, ang GitLab ay may sariling solusyon sa pagho-host, at tinatawag nila itong Mga Pahina ng GitLab. Kailangan kong ibigay ito sa kanila, mas madaling mag-set up ng tuluy-tuloy na pag-deploy sa Mga Pahina ng GitLab kaysa sa Mga Pahina ng GitHub.

Paano gamitin

1. Mag-sign up o mag-log in sa GitLab
2. Magdagdag ng repo sa GitLab kung wala ka pa doon. kaya mo tinidor yung dinagdag ko dun 
   Katulad ng GitHub Pages, kailangan mong i-edit ang App.jsx kung saan kami tumatawag Router at idagdag  basename dito upang tumugma sa pangalan ng repo. Kaya ito ang huling pagbabago:                                                               Kailangan nating baguhin ang basename dahil ang mga pahina ng GitLab ay magde-deploy ng website sa isang URL ng form na ito: https://GITLAB_USERNAME.gitlab.io/REPOSITORY_NAME. Hindi gagana nang maayos ang website nang walang nakatakdang basename para sa react-router-dom.
3. Kapag na-edit at nai-push mo na ang proyekto sa GitLab, pumunta sa Mga Setting > Mga Pahina at sasalubungin ka ng isang apat na hakbang na wizard upang i-deploy ang repo sa Mga Pahina ng GitLab. 
4. Ang unang hakbang sa wizard ay ang pagpasok ng build image. Gagamitin namin ang Node.js LTS.
5. Susunod, ilalagay namin ang pre-build na command. Ang npm ci ay sapat na dito.
6. Ngayon para sa hakbang ng pagbuo. Kailangan nating makapasa — –dist-dir public dahil inaasahan ng Mga Pahina ng GitLab na maitayo ang website sa pampubliko direktoryo. Hindi ka makakawala sa anumang ibang direktoryo, paumanhin.
7. Italaga ang bagong nabuo .gitlab-ci.yml file na nagsasabi sa GitLab kung paano i-deploy ang iyong website.
8. Ngayon, pumunta sa CI/CD -> Pipelines section ng repo at obserbahan ang bagong idinagdag na pipeline na gumaganap.
9. Pagkaraan ng ilang oras, matatapos ang pipeline job at ang website ay ide-deploy sa GitLab Pages.

eto ang resulta.

Mga kalamangan at kahinaan

Mabagal ang pag-install ng mga package at kailangan mong magdagdag ng karagdagang code para gumana ito, ngunit ang wizard ay sobrang intuitive na may apat na hakbang lang para i-deploy.

I-render

Background

Ang render ay isang bagong bata sa block na inilulunsad noong 2019. Sinusubukan nitong guluhin ang paraan ng pag-deploy ng mga tao sa kanilang mga serbisyo (kabilang ang mga static na website). Sa ngayon, maayos ang kanilang ginagawa at lumalaki ang bilang.

Paano gamitin

1. Mag-sign up o mag-log in sa Render.
2. Gumawa ng bagong static na website sa pamamagitan ng pagpindot sa “Bago” na button at pagpili sa “Static Site.”
3. Piliin ang repo na gusto mong i-deploy.
4. Panatilihin ang sinulid; pagtatayo ng sinulid build command sa setting ng build. Sa kasamaang palad, hindi ito gumagana sa npm ci; npm run build tulad ng ginagawa ng ibang mga serbisyo. Palitan ang “I-publish na direktoryo” sa dist at i-click ang “Gumawa ng Static Site.”
5. Pagkaraan ng ilang oras, ipapatupad ng Render ang code.

narito ang live na URL mula sa Render.

Mga kalamangan at kahinaan

Ito ay talagang mabilis, ngunit hindi ito gumagana nang maayos para sa aming proyekto na may mga command na `npm ci` at `npm run build`. ‘Yarn’ lang daw ang gumagana.

Surge

Background

Ang surge ay matagal na. Sa kanan ng paniki, ang kanilang serbisyo ay madaling gamitin at kailangan lang ng isa o dalawang utos para i-deploy ang iyong static na website. Ito ay libre, ngunit nag-aalok ng bayad na plano na 30$/buwan. Ang stoicism ng tool ay kung bakit ito lumiwanag. Walang kumplikadong setup ang kailangan, i-install lang ang `surge` at patakbuhin ito gamit ang `surge`.

Paano gamitin

1. Upang maghanda, tumakbo npm run build upang makabuo ng mga static na file sa loob dist direktoryo. Ang surge gagamitin ang mga iyon para sa pag-deploy.
2. Takbo npm install –global surge
3. Pagkatapos, tumakbo surge.

Ilang bagay na dapat tandaan:
Kung ito ang iyong unang pagkakataon na patakbuhin ito, kakailanganin mong lumikha ng isang account sa Surge. Huwag mag-alala, madali lang. Ipasok lamang ang iyong email at nais na password.

Pagkatapos, hihilingin sa iyo na mag-input ng “proyekto”, na dapat ay ang landas patungo sa dist direktoryo. Maaari mo lamang idagdag dist sa landas na ibinigay sa iyo kung nagpatakbo ka ng surge sa loob ng repo na iyong ini-deploy.

Pagkatapos, ilagay ang hinaharap na URL ng iyong website. Try something unique kasi ano surge hindi gumana sa akin ang inaalok.

Pagkatapos ng URL input, ang surge ay magpapakalat ng mga nilalaman mula sa dist sa tinukoy na URL. Narito ang nakuha ko:

Mga kalamangan at kahinaan

Ito ay mabilis at simple at hindi mo kailangan na gumamit ng hiwalay na interface—ngunit nabigo itong magmungkahi ng available na URL para sa iyong app.

Oras na para mag-deploy para sa bawat serbisyo sa pagho-host

Ang aming nangungunang 3 libreng serbisyo sa pagho-host ng React

1. Netlify
2. Vercel
3. Surge

Mga pangunahing takeaway

Pagkatapos subukan ang bawat isa sa mga libreng serbisyo ng pagho-host ng React app na ito, sa tingin namin ay ang Netlify ang pinakamahusay sa grupo. Nagbibigay ito ng mabilis na pag-deploy na may maraming feature na maaaring kailanganin mo. Pagkatapos noon ay ang Vercel na mayroong maraming feature at medyo mabilis pagkatapos ng paunang deployment. Pagkatapos, mayroon kaming Surge na isang minimal na tool sa pag-deploy na maaaring medyo mura kung magpasya kang mag-upgrade.

I-automate ang iyong frontend build at ipadala ang iyong app nang 10x nang mas mabilis. Matuto pa.