8 servizi di hosting di app React gratuiti10 min read

Quindi hai creato un’app React, ma non sei sicuro di come o dove ospitarla. In questo articolo ti guideremo attraverso 8 servizi di hosting React gratuiti e ti mostreremo come li abbiamo implementati questa app React utilizzando ciascuno di essi e raccontarti cosa abbiamo imparato durante il processo.

Abbiamo creato la nostra app in Figma utilizzando il Anima plugin, che ci ha permesso di aggiungere funzionalità, comportamento reattivo e contenuti multimediali esportare il codice React pronto per lo sviluppo per l’intera interfaccia utente. Ci è voluto un giorno per progettare e implementare.

Dove ospitare gratuitamente la tua app React

Esiste un numero crescente di soluzioni di hosting serverless grazie alla crescita di framework basati su componenti come React. Amazon AWS, Microsoft Azure e Google Cloud sono attualmente le piattaforme dominanti. Tuttavia, si sta verificando uno spostamento crescente verso servizi di hosting frontend dedicati che richiedono meno sforzi e possono renderti operativo in pochissimo tempo e la maggior parte include CI/CD. Ecco gli 8 servizi di hosting di app React gratuiti che abbiamo testato:

1. Netlify

2. Vercel

3. AWS amplifica

4. Base di fuoco

5. GitHub Pagine

6. Pagine GitLab

7. Render

8. Aumento

Entriamo in questi servizi di hosting di app React gratuiti in modo più dettagliato e dimostriamo come abbiamo distribuito un’app React utilizzando ciascuno di essi. 

Netlify

Sfondo

Netlify è stata fondata nel 2014 e si è concentrata fin dall’inizio sull’hosting di siti Web statici. Ha attirato molti sviluppatori grazie al suo generoso livello gratuito. Un paio d’anni dopo, Netlify è cresciuto fino a diventare uno dei JAMstack e host di siti Web statici più popolari in circolazione.

Come usare

1. Idealmente, ti registrerai o accederai con GitHub. Ciò ti assicura di poter accedere ai repository sul tuo profilo e distribuirli rapidamente.
2. Una volta effettuato l’accesso, fai clic su “Aggiungi nuovo sito” e seleziona “Importa un progetto esistente”.
3. Quindi fare clic su GitHub come provider.
4. Scegli il “sito web della banca” o qualunque sia il nome del tuo progetto.
5. Perfeziona le impostazioni di distribuzione (nel caso del nostro sito Web, le impostazioni predefinite funzionano perfettamente), quindi fai clic su “Distribuisci sito”.
6. Una volta distribuito, puoi visualizzarlo su uno URL pubblico che puoi condividere con il mondo. Sìì!

Ecco l’app live distribuita su Netlify.

Pro e contro

Netlify è facile da configurare e implementare, per non parlare del fatto che è uno dei servizi più veloci che abbiamo testato qui. Uno svantaggio è che se hai bisogno di collaboratori e/o di un team, devi passare a un piano a pagamento.

Vercel

Sfondo

Vercel (originariamente noto come Zeit) è stata fondata nel 2015 ed è diventata rapidamente famosa. Sono i manutentori di Next.js, un popolare framework React per la creazione di siti Web. Offrono un livello gratuito per siti Web non commerciali, nonché modi per utilizzare la propria rete Edge per funzioni serverless.

Come usare

1. Accedi o registrati con GitHub.
2. Fai clic sul menu a discesa “Aggiungi nuovo…” e seleziona “Progetto”.                                                             
3. Scegli il “sito-banca” o il tuo progetto React preferito.
4. Abbiamo utilizzato le impostazioni predefinite per le impostazioni di distribuzione e quindi abbiamo fatto clic su “Distribuisci”.
5. Dopo un po’ di tempo, abbiamo implementato il sito web.

Ecco il URL dal vivo.

Pro e contro

Vercel necessita di un po’ di tempo per memorizzare nella cache la parte di installazione del processo di distribuzione, ma successivamente è uno dei servizi più veloci. Mostra le distribuzioni in anteprima per ogni ramo che invii e lo fa rapidamente grazie alla memorizzazione nella cache.

AWS amplifica

Sfondo

AWS è una vasta raccolta di prodotti cloud e Amplify è pubblicizzato come un modo semplice per ottenerne alcuni. Con AWS Amplify puoi creare, spedire e ospitare rapidamente applicazioni full-stack su AWS, con la flessibilità di sfruttare l’ampiezza dei servizi AWS man mano che i casi d’uso evolvono.

Come usare

1. Iscriviti o accedi ad AWS, quindi cerca AWS Amplify e fai clic su “Inizia”.
2. Scegli GitHub e autorizzalo (l’ho consentito solo per il repository “sito web banca”).
3. Seleziona il repository nella sezione “Repository aggiornati di recente”.
   1. Nell’impostazione della build, dovremo modificare il file baseDirectory affinché la nostra app sia dist in questo modo: Quindi, le impostazioni di compilazione dovrebbero assomigliare a queste:
4. Nel passaggio successivo, fai clic su “Salva e distribuisci”.
5. Dopo qualche tempo, il sito Web sarà distribuito e pronto per l’uso.

E siamo in diretta! Ecco lo URL.

Pro e contro

Devi modificare il baseDirectory nella specifica di distribuzione: non viene riconosciuto immediatamente. L’interfaccia utente sembra un po’ goffa, ma questa è una preferenza personale. Il potenziale di AWS Amplify è enorme perché molti altri servizi Web AWS sono a portata di mano.

Base di fuoco

Sfondo

Firebase è un servizio Google meglio conosciuto come piattaforma di archiviazione in tempo reale. Ma ha anche un’opzione di hosting per siti Web statici e microservizi Express.js o API e supporta l’anteprima di URL per i rami su cui sta lavorando il tuo team. Come con Netlify, Vercel e altri, serve i contenuti distribuiti su una rete CDN.

Come usare

1. Installa strumenti firebase con npm install -g firebase-tools.
2. Accedi a Firebase con accesso a firebase. Una volta effettuato l’accesso, dovresti vedere un messaggio come questo:
3. Passa alla directory del progetto ed esegui init di base di fuoco, dovresti vedere qualcosa di simile a questo: Scegli l’opzione per configurare i file per Firebase Hosting con distribuzioni GitHub Action opzionali. Quindi, puoi creare un progetto direttamente dalla CLI o utilizzare l’interfaccia utente di Firebase per farlo e successivamente collegarlo. Abbiamo creato il progetto dalla riga di comando ed ecco come abbiamo risposto alle domande risultanti:                                                                  Successivamente verranno creati semplici file `firebase.json` e `.firebaserc`.
4. Allora corri distribuzione della base di fuoco per distribuire effettivamente i file da distdirectory. Se la directory manca, assicurati di eseguirla npm esegui build prima per generare file. Il distribuzione della base di fuoco il comando dovrebbe generare un output simile all’esempio seguente:

Ora puoi visualizzare il sito web sullo URL in dotazione. Sìì! 

Pro e contro

Firebase è abbastanza semplice, ma quando lo configuri all’interno del tuo progetto, le domande a cui devi rispondere sono un po’ confuse. Fortunatamente, abbiamo risposto per te nella sezione precedente, ma richiedono la comprensione delle effettive funzionalità di Firebase prima di procedere. Oltre a ciò, Firebase è veloce da distribuire e può generare un URL in cui è possibile visualizzare in anteprima i file distribuiti. Puoi anche automatizzarlo facilmente con le distribuzioni di GitHub Action con la CLI, il che è pulito.

GitHub Pagine

Sfondo

GitHub Pages è in circolazione da un po’ di tempo ed è un modo semplice per pubblicare documenti o un sito Web personale direttamente da GitHub. È adorabile per i contenuti statici e molte persone lo usano per implementare siti semplici con un investimento minimo. È gratuito se il tuo progetto è pubblico ed è un modo veloce ed economico per ospitare un sito web.

Come usare

Tieni presente che devi modificare il file App.jsx dove chiamiamo Router e aggiungi nomebase ad esso in modo che corrisponda al nome del repository. Ecco come fare App.jsx dovrebbe apparire:                                                                                        Dobbiamo cambiare il nomebase perché le pagine GitHub distribuiranno il sito Web su uno URL in questo formato “https://GITHUB_USERNAME.gitlab.io/REPO_NAME”. Il sito Web non funzionerà correttamente senza il nome base impostato per il file react-router-dom.

1. Dopo che il codice è cambiato, dobbiamo installare gh-pagine pacchetto con:
2. E aggiungi a predistribuzione e un distribuire script a pacchetto.json:
3. Quindi, corriamo semplicemente npm esegui la distribuzione. Si innescherà npm esegui build e utilizzerà gh-pagine pubblicare il contenuto di dist a un ramo separato su GitHub chiamato gh-pagine.
4. Infine, controlla se il gh-pagine viene utilizzato per le pagine GitHub come di seguito:

Ecco il URL dal vivo.

Pro e contro

Se stai distribuendo un progetto diverso dal tuo nome utente, verrà distribuito all’interno di una sottodirectory sul nostro dominio gratuito all’interno di GitHub. Quindi, è necessario scrivere codice aggiuntivo per supportare la logica di trovarsi all’interno di una sottodirectory.

Nel nostro caso d’uso non supporta la distribuzione continua immediata, ma è possibile configurarla. Una volta configurato, è possibile implementare rapidamente le modifiche.

Pagine GitLab

Sfondo

Come GitHub, GitLab ha una propria soluzione di hosting e la chiamano GitLab Pages. Devo ammetterlo, è più semplice impostare una distribuzione continua su GitLab Pages che su GitHub Pages.

Come usare

1. Iscriviti o accedi a GitLab
2. Aggiungi un repository a GitLab se non lo hai già lì. Puoi fork quello che ho aggiunto lì 
   Similmente alle pagine GitHub, è necessario modificare il file App.jsx dove chiamiamo Router e aggiungi  nomebase ad esso in modo che corrisponda al nome del repository. Quindi questa è la modifica finale:                                                               Dobbiamo cambiare il nomebase perché le pagine GitLab distribuiranno il sito Web su uno URL di questo formato: https://GITLAB_USERNAME.gitlab.io/REPOSITORY_NAME. Il sito Web non funzionerà correttamente senza il nome base impostato per il file react-router-dom.
3. Dopo aver modificato e inviato il progetto a GitLab, vai su Impostazioni > Pagine e verrai accolto con una procedura guidata in quattro passaggi per distribuire il repository su GitLab Pages. 
4. Il primo passaggio della procedura guidata consiste nell’inserire l’immagine di build. Utilizzeremo Node.js LTS.
5. Successivamente, inseriremo il comando pre-build. IL npm ci basterà qui.
6. Ora passiamo alla fase di creazione. Dobbiamo passare — –dist-dir public perché GitLab Pages si aspetta che il sito web sia integrato nel file pubblico directory. Non puoi farla franca con nessun’altra directory, mi dispiace.
7. Effettua il commit del nuovo generato .gitlab-ci.yml file che indica a GitLab come distribuire il tuo sito web.
8. Ora vai alla sezione CI/CD -> Pipeline del repository e osserva l’esecuzione della pipeline appena aggiunta.
9. Dopo un po’ di tempo, il lavoro della pipeline terminerà e il sito web verrà distribuito su GitLab Pages.

Ecco il risultato.

Pro e contro

I pacchetti sono lenti da installare ed è necessario aggiungere codice aggiuntivo per farlo funzionare, ma la procedura guidata è estremamente intuitiva con solo quattro passaggi per la distribuzione.

Render

Sfondo

Render è un nuovo arrivato sul mercato lanciato nel 2019. Sta cercando di sconvolgere il modo in cui le persone distribuiscono i propri servizi (compresi i siti Web statici). Finora stanno andando bene e stanno crescendo di numero.

Come usare

1. Iscriviti o accedi a Render.
2. Crea un nuovo sito Web statico premendo il pulsante “Nuovo” e selezionando “Sito statico”.
3. Scegli il repository che desideri distribuire.
4. Conserva il filato; costruzione del filato comando build nell’impostazione build. Sfortunatamente, non funziona con npm ci; npm esegui build come fanno gli altri servizi. Cambia la “directory di pubblicazione” in dist e fai clic su “Crea sito statico”.
5. Dopo un po’ di tempo, Render distribuirà il codice.

Ecco il URL dal vivo da Render.

Pro e contro

È davvero veloce, ma non funziona bene per il nostro progetto con i comandi “npm ci” e “npm run build”. Solo il “filato” sembra funzionare.

Aumento

Sfondo

Surge è in circolazione ormai da un po’ di tempo. Fin dall’inizio, il loro servizio è semplice da usare e bastano solo uno o due comandi per distribuire il tuo sito web statico. È gratuito, ma offre un piano a pagamento di 30$ al mese. Lo stoicismo dello strumento è ciò che lo fa brillare. Non è necessaria alcuna configurazione complessa, basta installare “surge” ed eseguirlo con “surge”.

Come usare

1. Per prepararsi, correre npm esegui build per generare file statici all’interno dist directory. Il impennata li utilizzeranno per la distribuzione.
2. Corri npm install –global surge
3. Allora corri impennata.

Alcune cose da notare:
Se è la prima volta che lo esegui, dovrai creare un account con Surge. Non preoccuparti, è facile. Basta inserire la tua email e la password desiderata.

Quindi ti verrà chiesto di inserire “progetto”, che dovrebbe essere il percorso del file dist directory. Puoi semplicemente aggiungere dist al percorso che ti viene fornito se hai eseguito surge all’interno del repository che stai distribuendo.

Quindi, inserisci il futuro URL del tuo sito web. Prova qualcosa di unico perché cosa impennata offerto non ha funzionato per me.

Dopo l’ingresso URL, il impennata distribuirà i contenuti da dist allo URL specificato. Ecco cosa ho ottenuto:

Pro e contro

È veloce e semplice e non richiede l’adozione di un’interfaccia separata, ma non suggerisce uno URL disponibile per la tua app.

Tempo di distribuzione per ogni servizio di hosting

I nostri 3 migliori servizi di hosting React gratuiti

1. Netlify
2. Vercel
3. Aumento

Punti chiave

Dopo aver testato ciascuno di questi servizi di hosting di app React gratuiti, riteniamo che Netlify sia il migliore del gruppo. Fornisce implementazioni rapide con molte funzionalità di cui potresti aver bisogno. Subito dopo c’è Vercel che ha molte funzionalità ed è abbastanza veloce dopo la distribuzione iniziale. Poi abbiamo Surge, che è uno strumento di distribuzione minimo che può essere abbastanza economico se decidi di eseguire l’aggiornamento.

Automatizza la creazione del frontend e distribuisci la tua app 10 volte più velocemente. Saperne di più.