8 ilmaista React-sovelluksen isännöintipalvelua10 min read

Joten loit React-sovelluksen, mutta et ole varma, kuinka tai missä isännöidä sitä. Tässä artikkelissa opastamme sinut 8 ilmaisen React-isännöintipalvelun läpi ja näytämme, kuinka otimme käyttöön tämä React-sovellus käyttämällä jokaista ja kertoa sinulle, mitä opimme prosessin aikana.

Rakensimme sovelluksemme Figma:ään käyttämällä Anima laajennuksen, jonka avulla pystyimme lisäämään toimintoja, reagoivaa toimintaa ja multimediaa vie dev-ready React-koodi koko käyttöliittymälle. Suunnittelu ja käyttöönotto kesti yhden päivän.

Missä voit isännöidä React-sovellustasi ilmaiseksi

Tarjolla on yhä enemmän palvelimettomia isännöintiratkaisuja komponenttipohjaisten kehysten, kuten React, nousun ansiosta. Amazon AWS, Microsoft Azure ja Google Cloud ovat tällä hetkellä hallitsevia alustoja. Kasvava siirtymä on kuitenkin kohti omistettuja frontend-isännöintipalveluita, jotka vaativat vähemmän vaivaa ja voivat saada sinut käyntiin hetkessä – ja useimmat sisältävät CI/CD:n. Tässä on 8 testaamaamme ilmaista React-sovelluksen isännöintipalvelua:

1. Netlify

2. Vercel

3. AWS Amplify

4. Firebase

5. GitHub sivut

6. GitLab-sivut

7. Renderöi

8. Surge

Sukellaanpa näihin ilmaisiin React-sovelluksen isännöintipalveluihin tarkemmin ja esittelemme, kuinka otimme React-sovelluksen käyttöön kutakin niistä käyttämällä. 

Netlify

Tausta

Netlify perustettiin vuonna 2014 ja se keskittyi alusta alkaen staattisten verkkosivustojen ylläpitoon. Se houkutteli paljon kehittäjiä runsaan ilmaisen tasonsa ansiosta. Muutaman vuoden kuluttua Netlifysta kasvoi yksi suosituimmista JAMstack- ja staattisista verkkosivustoista.

Kuinka käyttää

1. Ihannetapauksessa rekisteröidyt tai kirjaudut sisään GitHub:llä. Tämä varmistaa, että pääset käyttämään profiilisi tietovarastoja ja otat ne käyttöön nopeasti.
2. Kun olet kirjautunut sisään, napsauta ”Lisää uusi sivusto” ja valitse ”Tuo olemassa oleva projekti”.
3. Napsauta sitten GitHub palveluntarjoajaksesi.
4. Valitse ”pankin verkkosivusto” tai mikä tahansa projektisi nimi.
5. Hienosäädä käyttöönottoasetukset (verkkosivustomme tapauksessa oletusasetukset toimivat täydellisesti) ja napsauta sitten ”Ota käyttöön sivusto”.
6. Kun se on otettu käyttöön, voit tarkastella sitä julkisessa URL:ssä, jonka voit jakaa maailman kanssa. Jep!

Tässä Netlifyssa käyttöön otettu live-sovellus.

Plussat ja miinukset

Netlify on helppo asentaa ja ottaa käyttöön, puhumattakaan siitä, että se on yksi nopeimmista palveluista, joita täällä testasimme. Yksi haittapuoli on, että jos tarvitset yhteistyökumppaneita ja/tai tiimiä, sinun on päivitettävä maksulliseen suunnitelmaan.

Vercel

Tausta

Vercel (alunperin nimellä Zeit) perustettiin vuonna 2015 ja se nousi nopeasti kuuluisuuteen. He ovat Next.js:n ylläpitäjiä, suosittu React-kehys verkkosivustojen rakentamiseen. Ne tarjoavat ilmaisen tason ei-kaupallisille verkkosivustoille sekä tapoja käyttää Edge-verkkoaan palvelimettomiin toimintoihin.

Kuinka käyttää

1. Kirjaudu sisään tai rekisteröidy GitHub:llä.
2. Napsauta avattavaa ”Lisää uusi…” -valikkoa ja valitse ”Projekti”.                                                             
3. Valitse ”pankkisivusto” tai suosikki React-projektisi.
4. Käytimme käyttöönottoasetusten oletusasetuksissa ja napsautettiin sitten ”Ota käyttöön”.
5. Jonkin ajan kuluttua saimme sivuston käyttöön.

Tässä live-URL.

Plussat ja miinukset

Vercel tarvitsee jonkin aikaa käyttöönottoprosessin asennusosan välimuistiin, mutta sen jälkeen se on yksi nopeimmista palveluista. Se näyttää esikatselun käyttöönotot jokaiselle työntämällesi haaralle ja tekee sen nopeasti välimuistin ansiosta.

AWS Amplify

Tausta

AWS on valtava kokoelma pilvituotteita, ja Amplifyta mainostetaan helpoksi tapaksi saada osa niistä. AWS Amplifyn avulla voit nopeasti rakentaa, lähettää ja isännöidä täyden pinon sovelluksia AWS:ssä, jolloin voit hyödyntää AWS-palveluiden monipuolisuutta käyttötapausten kehittyessä.

Kuinka käyttää

1. Rekisteröidy tai kirjaudu sisään AWS:ään, etsi sitten AWS Amplify ja napsauta ”Aloita”.
2. Valitse GitHub ja valtuuta se (sallin sen vain ”pankkisivuston” repossa).
3. Valitse repo ”Äskettäin päivitetyt tietovarastot” -osiossa.
   1. Rakennusasetuksissa meidän on muutettava baseDirectory jotta sovelluksemme olisi dist näin: Sitten koontiasetusten pitäisi näyttää tältä:
4. Napsauta seuraavassa vaiheessa ”Tallenna ja ota käyttöön”.
5. Jonkin ajan kuluttua verkkosivusto otetaan käyttöön ja on valmis käytettäväksi.

Ja ollaan livenä! Tässä URL.

Plussat ja miinukset

Sinun täytyy muokata baseDirectory käyttöönottospesifikaatioissa – sitä ei tunnisteta heti valmiina. Käyttöliittymä tuntuu hieman kömpelöltä, mutta tämä on henkilökohtainen mieltymys. AWS Amplifyssa on valtava potentiaali, koska monet muut AWS-verkkopalvelut ovat käden ulottuvilla.

Firebase

Tausta

Firebase on Googlen palvelu, joka tunnetaan parhaiten reaaliaikaisena tallennusalustana. Mutta siinä on myös isännöintimahdollisuus staattisille verkkosivustoille ja Express.js-mikropalveluille tai API:ille, ja se tukee esikatselua URL:ille sivukonttoreille, joissa tiimisi työskentelee. Kuten Netlify, Vercel ja muut, se palvelee käyttöön otettua sisältöä CDN-verkon kautta.

Kuinka käyttää

1. Asenna firebase-työkalut kanssa npm install -g firebase-tools.
2. Kirjaudu Firebaseen sovelluksella firebase-kirjautuminen. Kun kirjaudut sisään, sinun pitäisi nähdä seuraavanlainen viesti:
3. Siirry projektihakemistoon ja suorita firebase init, sinun pitäisi nähdä jotain tällaista: Valitse vaihtoehto Firebase Hostingin tiedostojen määrittämiseksi valinnaisten GitHub Action -käyttöönottolaitteiden kanssa. Sitten voit luoda projektin suoraan CLI:stä tai tehdä sen Firebase-käyttöliittymän avulla ja yhdistää sen myöhemmin. Teimme projektin komentoriviltä, ​​ja näin vastasimme tuloksena oleviin kysymyksiin:                                                                        Sen jälkeen luodaan yksinkertaisia ​​j `fier ja c.
4. Sitten juokse firebase käyttöönotto ottaaksesi tiedostot käyttöön disthakemistosta. Jos hakemisto puuttuu, muista suorittaa se npm run build ensimmäisenä luomaan tiedostoja. The firebase käyttöönotto komennon pitäisi tuottaa seuraavan esimerkin kaltainen tulos:

Nyt voit katso verkkosivua mukana toimitetussa URL:ssä. Jep! 

Plussat ja miinukset

Firebase on melko yksinkertainen, mutta kun otat sen käyttöön projektissasi, kysymykset, joihin sinun on vastattava, ovat hieman hämmentäviä. Onneksi vastasimme sinulle yllä olevassa osiossa, mutta ne edellyttävät Firebasen todellisten ominaisuuksien ymmärtämistä ennen kuin jatkat. Muuten Firebase on nopea ottaa käyttöön ja voi luoda URL:n, jossa voit esikatsella käyttöön otettuja tiedostoja. Voit myös helposti automatisoida sen GitHub Action -käyttöönotoilla CLI:llä, mikä on siistiä.

GitHub sivut

Tausta

GitHub Pages on ollut olemassa jo jonkin aikaa, ja se on helppo tapa julkaista asiakirjoja tai henkilökohtainen verkkosivusto suoraan GitHub:stä. Se on ihana staattiseen sisältöön, ja monet ihmiset käyttävät sitä yksinkertaisten sivustojen käyttöönottamiseksi minimaalisilla investoinneilla. Sen käyttö on ilmaista, jos projektisi on julkinen, ja se on nopea ja halpa tapa isännöidä verkkosivustoa.

Kuinka käyttää

Huomaa, että sinun on muokattava App.jsx minne soitamme Reititin ja lisää perusnimi siihen vastaamaan repon nimeä. Joten näin App.jsx pitäisi katsoa:                                                                                        Meidän on muutettava perusnimi koska GitHub-sivut ottavat sivuston käyttöön URL:ssä, jonka muoto on `https://GITHUB_USERNAME.gitlab.io/REPO_NAME`. Sivusto ei toimi kunnolla ilman perusnimeä, joka on asetettu react-router-dom.

1. Kun koodi muuttuu, meidän on asennettava gh-sivuja paketti jossa:
2. Ja lisää a esiasettaa ja a ottaa käyttöön käsikirjoittaa package.json:
3. Sitten vain juostaan npm run käyttöönotto. Se laukaisee npm run build ja se tulee käyttämään gh-sivuja sisällön julkaisemiseen dist erilliseen GitHub:n haaraan nimeltä gh-sivuja.
4. Tarkista lopuksi, onko gh-sivuja käytetään GitHub-sivuille, kuten alla:

Tässä live-URL.

Plussat ja miinukset

Jos otat käyttöön projektia, joka poikkeaa käyttäjänimestäsi, se otetaan käyttöön GitHub:n ilmaisen verkkotunnuksen alihakemistossa. Sitten sinun on kirjoitettava ylimääräistä koodia, joka tukee alihakemiston sisällä olemisen logiikkaa.

Se ei tue jatkuvaa käyttöönottoa heti valmiina käyttötapauksessamme, mutta voit määrittää sen. Kun se on määritetty, muutokset on nopea ottaa käyttöön.

GitLab-sivut

Tausta

Kuten GitHub, GitLabilla on oma isännöintiratkaisunsa, ja he kutsuvat sitä GitLab-sivuiksi. Minun on annettava se heille, GitLab-sivuille on helpompi ottaa käyttöön jatkuva käyttöönotto kuin GitHub-sivuilla.

Kuinka käyttää

1. Rekisteröidy tai kirjaudu sisään GitLabiin
2. Lisää repo GitLabiin, jos sinulla ei vielä ole sitä siellä. Voit haarukka, jonka lisäsin sinne 
   Kuten GitHub Pages, sinun on muokattava App.jsx minne soitamme Reititin ja lisää  perusnimi siihen vastaamaan repon nimeä. Tämä on siis viimeinen muutos:                                                               Meidän on muutettava perusnimi koska GitLab-sivut ottavat sivuston käyttöön tämän lomakkeen URL:lle: https://GITLAB_USERNAME.gitlab.io/REPOSITORY_NAME. Sivusto ei toimi kunnolla ilman perusnimeä, joka on asetettu react-router-dom.
3. Kun olet muokannut ja työntänyt projektin GitLabille, siirry kohtaan Asetukset > Sivut ja sinua tervehtii nelivaiheinen ohjattu toiminto, jonka avulla voit ottaa repon käyttöön GitLab-sivuilla. 
4. Ohjatun toiminnon ensimmäinen vaihe on koontikuvan syöttäminen. Käytämme Node.js LTS:ää.
5. Seuraavaksi kirjoitamme pre-build-komennon. The npm ci riittää tähän.
6. Nyt rakennusvaiheeseen. Meidän on läpäistävä — –dist-dir julkinen koska GitLab-sivut odottavat verkkosivuston sisäänrakennettuna julkinen hakemistosta. Et pääse eroon millään muulla hakemistolla, anteeksi.
7. Sitouta vasta luotu .gitlab-ci.yml tiedosto, joka kertoo GitLabille, kuinka verkkosivustosi otetaan käyttöön.
8. Siirry nyt repon CI/CD -> Pipelines-osioon ja tarkkaile äskettäin lisätyn liukuhihnan toimintaa.
9. Jonkin ajan kuluttua putkityö valmistuu ja verkkosivusto otetaan käyttöön GitLab-sivuilla.

Tässä on tulos.

Plussat ja miinukset

Pakettien asennus on hidasta, ja sinun on lisättävä ylimääräistä koodia, jotta ne toimivat, mutta ohjattu toiminto on erittäin intuitiivinen, ja sen käyttöönotto on vain neljä vaihetta.

Renderöi

Tausta

Render on uusi lapsi lohkossa, joka julkaistaan ​​vuonna 2019. Se yrittää häiritä tapaa, jolla ihmiset käyttävät palveluitaan (mukaan lukien staattiset verkkosivustot). Toistaiseksi heillä menee hyvin ja määrä kasvaa.

Kuinka käyttää

1. Rekisteröidy tai kirjaudu sisään Renderiin.
2. Luo uusi staattinen verkkosivusto painamalla ”Uusi”-painiketta ja valitsemalla ”Staattinen sivusto”.
3. Valitse repo, jonka haluat ottaa käyttöön.
4. Pidä lanka; lanka rakentaa build-komento rakennusasetuksissa. Valitettavasti se ei toimi npm ci; npm run build kuten muutkin palvelut. Muuta ”Julkaise hakemisto” muotoon dist ja napsauta ”Luo staattinen sivusto”.
5. Jonkin ajan kuluttua Render ottaa koodin käyttöön.

Tässä Live URL Renderiltä.

Plussat ja miinukset

Se on todella nopea, mutta se ei toimi hyvin projektissamme npm ci- ja npm run build -komentojen kanssa. Vain ”lanka” näyttää toimivan.

Surge

Tausta

Surge on ollut olemassa jo jonkin aikaa. Heidän palvelunsa on suorastaan ​​helppokäyttöinen, ja staattisen verkkosivustosi käyttöönotto vaatii vain yhden tai kaksi komentoa. Se on ilmainen, mutta tarjoaa maksullisen suunnitelman 30 $/kk. Työkalun stoaisuus saa sen loistamaan. Mitään monimutkaista asennusta ei tarvita, asenna vain ”surge” ja suorita se ”surge”-komennolla.

Kuinka käyttää

1. Valmistaudu juoksemalla npm run build luoda staattisia tiedostoja sisällä dist hakemistosta. The aalto käyttää niitä käyttöönotossa.
2. Juokse npm install –global surrge
3. Sitten juokse aalto.

Muutama huomioitavaa:
Jos käytät sitä ensimmäistä kertaa, sinun on luotava tili Surgessa. Älä huoli, se on helppoa. Syötä vain sähköpostiosoitteesi ja haluamasi salasana.

Sitten sinua pyydetään syöttämään ”projekti”, jonka pitäisi olla polku dist hakemistosta. Voit vain liittää dist sinulle annettuun polkuun, jos suoritit ylikuormituksen käyttöönottamassasi repossa.

Syötä sitten verkkosivustosi tuleva URL. Kokeile jotain ainutlaatuista, koska mitä aalto tarjottu ei toiminut minulle.

URL-tulon jälkeen aalto ottaa sisällön käyttöön osoitteesta dist määritellylle URL:lle. Tässä mitä sain:

Plussat ja miinukset

Se on nopea ja yksinkertainen, eikä sinun tarvitse ottaa käyttöön erillistä käyttöliittymää, mutta se ei ehdota saatavilla olevaa URL:ää sovelluksellesi.

Aika ottaa käyttöön jokaisessa isännöintipalvelussa

Kolme parasta ilmaista React-isännöintipalveluamme

1. Netlify
2. Vercel
3. Surge

Keskeiset takeawayt

Testattuamme jokaista näistä ilmaisista React-sovellusisännöintipalveluista uskomme, että Netlify on joukon paras. Se tarjoaa nopeat käyttöönotot ja paljon ominaisuuksia, joita saatat tarvita. Heti sen jälkeen on Vercel, jossa on paljon ominaisuuksia ja joka on melko nopea ensimmäisen käyttöönoton jälkeen. Sitten meillä on Surge, joka on minimaalinen käyttöönottotyökalu, joka voi olla melko halpa, jos päätät päivittää.

Automatisoi käyttöliittymäsi rakentaminen ja lähetä sovelluksesi 10 kertaa nopeammin. Lue lisää.