Come distribuire applicazioni frontend su pagine Cloudflare?

La distribuzione di applicazioni frontend è uno dei grandi problemi un tempo fa. Ma oggi è un gioco da ragazzi. Anche un più giovane può distribuire applicazioni con l'aiuto di servizi di super hosting.

Molte piattaforme di hosting ci consentono di distribuire applicazioni frontend in pochi minuti. Il nostro sito sarà pronto pubblicamente in pochi minuti.

Non è fantastico?

Si lo è.

Impariamo come distribuire applicazioni frontend su Cloudflare Pages.

Applicazioni frontend

Prima di immergerci nella parte di distribuzione dell'applicazione, dobbiamo creare un'applicazione frontend.

Come farlo?

Anche tu lo sai. Quindi, non ne discuteremo qui ora.

Sappiamo che ci sono molte librerie, framework là fuori per noi per creare applicazioni frontend. Ma la parte centrale di quelle librerie o framework è JavaScript. Conosci tutte queste cose, poiché stai già cercando un modo per distribuire la tua applicazione frontend. Puoi saltare questa parte e passare alla distribuzione se stai cercando solo la parte di distribuzione.

C'è React, Vue, Angular, JavaScript e molti altri. Si possono creare applicazioni in base alle proprie esigenze.

Come possiamo vedere, ci sono un sacco di opzioni per creare applicazioni frontend. E la distribuzione? È lo stesso processo per tutte le applicazioni frontend?

Sì, il processo di distribuzione è lo stesso per tutte le applicazioni frontend. Tuttavia, il processo che rende le applicazioni frontend pronte per la distribuzione può variare in base alle librerie e ai framework.

Ci sarà un comando da compilare per la maggior parte delle applicazioni front-end costruite con librerie e framework. Potresti già saperlo. Se non sai di cosa si tratta, potresti doverlo esaminare in base alla tua libreria o framework frontend.

Abbiamo bisogno di un'applicazione da distribuire. Impostiamo una semplice applicazione. Puoi saltare questa parte se hai già un'applicazione frontend da distribuire.

Impostare

Prima della configurazione, dobbiamo essere consapevoli di una cosa. Il punto di ingresso deve essere index.html affinché la nostra applicazione frontend possa distribuirla alle pagine Cloudflare. Potresti trovare il file index.html (la posizione può variare in base alla libreria e al framework) dopo il processo di compilazione.

Creeremo una semplice applicazione React e Plain JavaScript per la demo. Puoi scegliere qualsiasi altra libreria o framework con cui hai familiarità. Per prima cosa impostiamo l'applicazione React .

Esegui il seguente comando per creare l'applicazione React.

 npx create-react-app demo

Aggiorna l'app con la tua creatività o lasciala così com'è. Cambierò solo qualcosa per assicurarmi che sia distribuito correttamente alla fine.

Ora creiamo una semplice applicazione JavaScript.

Avere index.html è obbligatorio per noi. Quindi, creiamo il file con il nome index.html . Ora puoi aggiungere più file come styles.css, script.js, immagini, ecc., per renderlo elegante. Ma non è obbligatorio, però :).

La nostra semplice configurazione per la distribuzione è ora completata. E dopo? È tempo di schieramento. Tuffati in esso.

Distribuzione

Le pagine Cloudflare ci consentono di distribuire la nostra applicazione frontend da GitHub. Quindi, ci sono due parti nel processo di distribuzione.

• Innanzitutto, dobbiamo avere il codice dell'applicazione su GitHub.
• In secondo luogo, distribuire l'applicazione alle pagine Cloudflare.

La maggior parte delle volte, non dovrai preoccuparti della prima parte poiché manteniamo il nostro codice nelle piattaforme di hosting dal primo giorno del progetto. Puoi saltare la prima parte e passare alla parte di distribuzione.

Se non hai inviato il tuo codice a GitHub o si trova in altre piattaforme di hosting del codice, potresti doverlo spostare su GitHub per distribuirlo nelle pagine di Cloudflare. Puoi seguire i passaggi seguenti per inviare il tuo codice a GitHub o farlo da solo.

1. Invio di codice a GitHub

Hai un account GitHub? Sì, immagino nella maggior parte dei casi. Nel caso in cui non ne possiedi uno, creane uno qui.

• Vai su GitHub e accedi al tuo account.
• Crea un repository con il nome del tuo progetto. Qui, lo stiamo nominando come la demo .

• Un repository appena creato avrà il seguente aspetto. Mostra alcuni comandi git per riempire il tuo repository di codice.

Inviamo il nostro codice al repository che abbiamo appena creato. Puoi seguire i passaggi seguenti o farlo da solo se lo conosci già. Iniziamo aprendo il nostro progetto in terminale o cmd.

• Inizializza git con il comando git init .
• Aggiungi tutte le tue modifiche a git locale usando il comando git add . .
• Conferma le modifiche con il comando git commit -m "message" . Sostituisci il messaggio con un messaggio adatto per il commit.
• Ora dobbiamo connettere il nostro repository remoto al progetto locale.
• Il comando per connetterlo è git remote add origin 'your_repo_path' . Sostituisci your_repo_path con il tuo repository remoto. Il percorso del repository sarà il seguente [email protected]:username/repo_name . Il percorso del mio repository per la demo è [email protected]:hafeezulkareem/demo .
• Il passaggio finale consiste nell'inviare il codice al nostro repository remoto. Possiamo farlo usando il comando git push -u origin main .

Vediamo gli snap di codice nel repository GitHub.

Abbiamo finito di inviare il nostro codice a Github. Il nostro prossimo compito è distribuirlo nelle pagine Cloudflare . Senza ulteriori indugi, iniziamo a distribuire.

2. Distribuzione su pagine Cloudflare

Distribuiamo il sito alle pagine di Cloudflare. Prima di andare oltre, dobbiamo creare un account Cloudflare. Se non hai già un account in Cloudflare, creane uno qui. Dopo il completamento della creazione dell'account Cloudflare, sei pronto per distribuire il tuo sito.

• Vai al sito di Cloudflare Pages.
• Accedi al tuo account. Vedrai la dashboard come segue.

• Se hai effettuato l'accesso al sito Web di Cloudflare , potresti non vedere la dashboard delle tue pagine.
• Passa alla dashboard delle pagine facendo clic sul pulsante Pagine sul lato destro della dashboard di Cloudflare. Fare riferimento all'immagine sottostante.

• Fare clic sul pulsante Crea un progetto dalla dashboard delle pagine.

• Passerai alla pagina seguente.

• Fare clic sull'account Connect GitHub per ottenere il nostro repository di applicazioni da GitHub .
• Verrai reindirizzato alla pagina delle app GitHub per autorizzare le pagine Cloudflare.

• Possiamo dare accesso a tutti i repository oa quelli selezionati. È meglio dare accesso ai repository che stiamo distribuendo su Cloudflare Pages. Puoi dare accesso a tutti i repository se lo desideri.
• Seleziona una delle due opzioni.
• Se hai selezionato Tutti i repository , non è necessario selezionare il repository specifico dei repository. Fare clic sul pulsante Installa e autorizza .
• Se hai selezionato Seleziona solo repository , devi selezionare i repository dal menu a discesa. Fare clic sul menu a discesa Seleziona repository che appare dopo aver selezionato l'opzione Seleziona solo repository .

• Inserisci il nome del tuo repository come segue.

• Il tuo repository verrà mostrato una volta inserito il nome. Seleziona il deposito. Puoi vedere il repository selezionato in cima all'elenco come segue.

• Fare clic sul pulsante Installa e autorizza . Verrai reindirizzato alla pagina di distribuzione di Cloudflare Pages.
• Vedrai tutti i repository autorizzati sulla pagina.

• Seleziona il repository che desideri distribuire.

• Dopo aver selezionato il repository da distribuire, fare clic sul pulsante Inizia configurazione .

• Ti condurrà ai passaggi successivi del processo di distribuzione, ad es. Configurazione di build e distribuzioni .

• Quando scorri verso il basso, troverai una sezione chiamata Impostazioni build . Dobbiamo selezionare il processo di compilazione appropriato per la nostra applicazione frontend.
• Dobbiamo selezionare il processo di compilazione in base al framework o alla libreria che stiamo utilizzando.
• Fare clic sul predefinito Framework per vedere tutte le opzioni.

• Qui stiamo distribuendo applicazioni React e Plain JavaScript .
• Se stai distribuendo un'applicazione React , seleziona Crea app React dal menu a discesa.
• Per un'applicazione JavaScript semplice senza alcun pacchetto, seleziona Nessuno .

• Se stai distribuendo un'altra applicazione frontend, seleziona l'opzione di compilazione predefinita del Framework appropriata.
• Possiamo selezionare Nessuno e inserire anche il comando di creazione personalizzato. In base alla tua applicazione, selezionala.
• Dopo l'impostazione della configurazione della build, fai clic sul pulsante Salva e distribuisci per completare il nostro processo di distribuzione.
• Dopo aver fatto clic sul pulsante Salva e distribuisci , il processo di distribuzione inizierà come segue.

• Il processo richiederà alcuni minuti per implementare il nostro sito. Aspetta e divertiti.
• Dopo il completamento del processo di distribuzione, mostra l'URL del sito con un messaggio di successo.

• Visita il sito con l'URL indicato.

• Possiamo aggiornare le impostazioni del sito dalla pagina del progetto.

• Le pagine di Cloudflare distribuiranno automaticamente gli aggiornamenti ogni volta che inseriamo nuovo codice nel repository.

Questo è tutto. Abbiamo finito con la distribuzione della nostra applicazione frontend alle pagine Cloudflare.

Conclusione

evviva! abbiamo distribuito la nostra applicazione frontend alle pagine Cloudflare. Dopo aver distribuito l'applicazione frontend, potrebbe essere necessario modificare le impostazioni, aggiornare le cose, ecc.; fare riferimento alla documentazione di Cloudflare qui. Se vuoi vedere i passaggi per distribuire una guida framework specifica, puoi andare alla sezione Guide framework nella documentazione.

Quindi, che ne dici di distribuire il frontend su Netlify?

Nota: i siti demo mostrati nell'articolo potrebbero non essere disponibili pubblicamente dopo un po' di tempo.

Buona distribuzione