React è una popolare libreria JavaScript per la creazione di interfacce utente funzionali in applicazioni web dinamiche. Forse hai passato molte lunghe ore a eseguire il debug del codice React nel tentativo di creare il prossimo Instagram o Airbnb.
Indipendentemente da ciò che stai costruendo, l'obiettivo finale è sempre quello di mostrare il tuo lavoro al mondo. È qui che tornano utili piattaforme di hosting come Netlify. Forniscono una suite di strumenti che semplificano il processo di distribuzione.
Segui per scoprire come distribuire le tue applicazioni React utilizzando gli strumenti di distribuzione facili da usare di Netlify.
Cos'è Netlify?
Netlify è una piattaforma di sviluppo basata su cloud con funzionalità che semplificano notevolmente l'hosting e la distribuzione di applicazioni sul Web. In poche parole, fornisce una gamma di strumenti e servizi che ottimizzano e semplificano il processo consentendo di distribuire e ospitare un'applicazione Web in pochi secondi.
Caratteristiche principali di Netlify
Netlify ha una gamma di funzionalità che semplificano il processo di distribuzione.
- Fornisce funzionalità essenziali di accesso e controllo della versione per consentire ai team di sviluppo di collaborare in modo efficiente ed efficace sui progetti.
- Offre servizi di hosting sicuri che puoi adattare alle tue esigenze. Inoltre, fornisce backup automatici in caso di perdita di dati.
- Si integra perfettamente con i servizi di sviluppo cloud più diffusi come GitHub, GitLab e Bitbucket.
- Fornisce funzionalità che semplificano l'impostazione e la configurazione di un URL di dominio personalizzato e di un certificato SSL per la tua applicazione.
Crea un'applicazione Demo React
- Per iniziare, dovrai prima creare un'applicazione React demo che alla fine distribuirai su Netlify. Esegui il comando seguente sul tuo terminale per creare un'applicazione React:
npx create-react-app demo-react-netlify-app - Successivamente, esegui questo comando da terminale per avviare il server di sviluppo:
Vai avanti e visualizza i risultati nel tuo browser su http://localhost: 3000.inizio npm - Infine, esegui questo comando per creare una versione pronta per la produzione della tua applicazione:
Questo comando genera i file e le risorse di produzione richiesti all'interno di una nuova cartella nella directory principale chiamata build. La cartella di compilazione acquisisce una versione minimizzata dell'intera applicazione, contenente tutto il necessario per distribuire l'applicazione.npm esegue la compilazione
Distribuisci l'applicazione React su Netlify
Netlify fornisce tre metodi che puoi utilizzare per distribuire la tua applicazione React. Puoi:
- Importa il tuo progetto da un host di repository Git come GitHub.
- Usa la funzione di trascinamento della selezione.
- Usa lo strumento da riga di comando, la CLI di Netlify.
Distribuisci utilizzando la funzione di importazione di GitHub
- A partire da creazione di un repository su GitHub per ospitare i file di progetto dell'applicazione React. In alternativa, puoi anche ospitare i tuoi file di progetto su qualsiasi altro provider Git supportato come GitLab, Bitbucket o Azure DevOps.
- Successivamente, registrati per un account su Netlifica. Dopo esserti registrato, vai alla dashboard del tuo account e seleziona il Siti scheda.
- Clicca sul Importa da Git pulsante.
- Seleziona la tua piattaforma provider Git preferita. Netlify ti chiederà di autenticarti con il tuo provider Git per concedergli l'accesso al tuo account e ai repository.
- Una volta fatto ciò, Netlify visualizzerà un elenco di repository sul tuo provider Git. Seleziona il repository del progetto React che hai inizialmente inviato al tuo provider Git.
- Dopo aver selezionato il repository, è necessario specificare come Netlify deve gestire il processo di distribuzione. Di solito, per i siti Web statici, non è necessario apportare modifiche, tuttavia, per i siti Web dinamici come le applicazioni React, sarà necessario configurare le impostazioni di build. Fortunatamente, Netlify per impostazione predefinita rileva automaticamente il framework utilizzato per creare l'applicazione e popola i campi con le impostazioni di compilazione richieste.
- Infine, fai clic Distribuisci sito per terminare il processo.
Fare clic sull'URL fornito per visualizzare l'applicazione sul browser. Se disponi di un URL di dominio personalizzato, puoi indicare a Netlify di utilizzarlo con il tuo sito aggiornando l'URL dalle impostazioni del sito.
Distribuisci utilizzando la funzionalità di trascinamento della selezione
Questo è il metodo più semplice per distribuire la tua applicazione React su Netlify. Devi solo trascinare e rilasciare la cartella di compilazione nell'interfaccia utente drag-and-drop di Netlify.
- Nella dashboard di Netlify, seleziona il Luogo scheda. Successivamente, fai clic su Aggiungi nuovo sito e quindi selezionare Distribuisci manualmente dalle opzioni del menu a discesa.
- Nella pagina della funzionalità di trascinamento della selezione, seleziona la cartella contenente i file di build di React e rilasciala in questa interfaccia utente. Il progetto verrà distribuito istantaneamente su Netlify. In alternativa, puoi cliccare su Sfoglia per caricare per selezionare la cartella di build dal file system.
Distribuisci utilizzando l'interfaccia della riga di comando di Netlify
Utilizzando l'interfaccia a riga di comando (CLI) di Netlify, puoi distribuire la tua applicazione React direttamente da un terminale. Inoltre, la CLI di Netlify ti consente di configurare la distribuzione continua in modo che quando esegui il commit e invii nuovi aggiornamenti al tuo repository Git, questi vengano distribuiti automaticamente.
- Esegui il comando seguente sul tuo terminale per installare la CLI di Netlify:
npm installare netlify-cli -g - Ora, esegui il comando seguente per distribuire la tua applicazione. Assicurati di essere nella directory di lavoro del progetto prima della distribuzione.
La CLI di Netlify ti chiederà di consentirgli di apportare modifiche al tuo account. Dopo aver concesso l'autorizzazione, fornisci il nome dell'account del team che hai fornito al momento della registrazione, quindi scegliere se collegare la directory dell'app a un sito Web esistente o crearne e configurarne uno nuovo uno. Termina fornendo un nome di sito Web personalizzato e il nome della cartella di build.distribuzione netlify - La CLI distribuirà una bozza della tua applicazione. Controlla che tutto funzioni come previsto.
- Infine, esegui il comando seguente per distribuire la tua applicazione in produzione.
distribuzione netlify --prod
Confronto tra i tre metodi di distribuzione
Il metodo di importazione GitHub è il più efficiente per la distribuzione di app di produzione poiché consente il collegamento il tuo repository Git direttamente su Netlify e mantieni il tuo codice sincronizzato con il loro sito Web o applicazione live. Quando esegui il commit e invii le modifiche al tuo repository Git, Netlify aggiornerà automaticamente il sito web.
Il metodo di trascinamento della selezione è più semplice per la distribuzione di siti statici, in quanto non richiede codifica o configurazione. Tuttavia, non consente aggiornamenti automatici quando apporti modifiche al tuo repository.
Il metodo CLI è il più completo, in quanto offre il pieno controllo sul processo di distribuzione e consente configurazioni personalizzate. Questo metodo è più adatto se hai già una buona conoscenza di Netlify e sei a tuo agio nel lavorare con la riga di comando.
Tutti e tre i metodi sono utili per la distribuzione di app su Netlify. In definitiva, la scelta di quale utilizzare dipenderà dalle esigenze di ogni singolo progetto.
Utilizzo di Netlify per distribuire altre applicazioni
Netlify è uno strumento potente e versatile che puoi utilizzare per distribuire applicazioni diverse da React. Puoi usarlo per distribuire e ospitare siti Web statici e applicazioni dinamiche create con diversi framework come Angular.
L'interfaccia intuitiva semplifica la configurazione, la gestione e la distribuzione delle tue API.
