Gatsby è un generatore di siti moderno e veloce per React. È un framework open source che combina le funzionalità di React, GraphQL e Webpack per la creazione di siti Web e applicazioni statici.
Gatsby è più di un semplice generatore di siti statici, consente agli sviluppatori Web di creare siti Web utilizzando React e lavorare con qualsiasi fonte di dati (CMS, Markdown, ecc.) Di loro scelta. In questo tutorial, ti mostreremo come installare Gatsby su Ubuntu 20.04.
Prerequisiti
- Ubuntu 20.04 VPS
- Accesso SSH con privilegi di root
Passaggio 1. Accedi al server
Innanzitutto, accedi al tuo server Ubuntu 20.04 tramite SSH come utente root:
ssh root@IP_Address -p Port_number
Dovrai sostituire "Indirizzo_IP" e "Numero_porta" con il rispettivo indirizzo IP e numero di porta SSH del tuo server.
Prima di iniziare, devi assicurarti che tutti i pacchetti del sistema operativo Ubuntu installati sul server siano aggiornati. Puoi farlo eseguendo i seguenti comandi:
# apt update -y # apt upgrade -y
Passaggio 2. Crea un utente di sistema
Successivamente, creeremo un nuovo utente di sistema e gli concederemo i privilegi sudo. In questo tutorial creeremo un nuovo utente di sistema chiamato 'master', puoi scegliere qualsiasi nome utente che ti piace.
# adduser master
Una volta creato, eseguiamo questo comando per aggiungere il nuovo utente al gruppo sudo. In Ubuntu, gli utenti che sono membri del gruppo sudo possono eseguire comandi sudo.
# usermod -aG sudo master
Ora possiamo accedere come nuovo utente "master" e utilizzeremo questo utente per completare l'installazione.
# su - master
Passaggio 3. Installa NodeJS e NPM
Esistono alcuni metodi per installare sia NodeJS che NPM. In questo articolo, li installeremo utilizzando l'origine del nodo. Per altri metodi, puoi controllare il nostro post sul blog su come installare NodeJS e NPM.
$ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
Una volta completato, dobbiamo scaricare le informazioni sul pacchetto dalla fonte appena aggiunta sopra.
$ sudo apt update
Quindi, esegui il comando seguente per installare finalmente NodeJS e NPM.
$ sudo apt install nodejs
NodeJS e NPM sono stati installati correttamente, puoi controllare la versione installata usando questo comando:
$ node -v; npm -v
Fase 4. Installa Gatsby-CLI
Gatsby CLI è il punto di ingresso principale per avviare ed eseguire l'applicazione Gatsby. È confezionato come un eseguibile che può essere utilizzato a livello globale. Possiamo installare Gatsby CLI tramite npm.
$ sudo npm install -g gatsby-cli
Per verificare la versione installata di Gatsby CLI, eseguire questo comando:
$ gatsby --version
Ora creiamo un nuovo sito web Gatsby, puoi sostituire "gatsby_site ” con il nome che preferisci.
$ gatsby new gatsby_site
Attendi qualche istante e viene creata una nuova directory "gatsby_site".
Richiama il comando seguente per sviluppare Gatsby ed eseguirlo.
$ cd gatsby_site $ gatsby develop -H 0.0.0.0
Dovresti essere in grado di accedere al tuo sito Gatsby all'indirizzo http://YOUR_SERVER_IP_ADDRESS:8000 , premi CTRL + C se vuoi interromperlo.
Ora, costruiamo il nostro sito web Gatsby:
$ gatsby build
La gatsby build il comando fa parte dell'interfaccia a riga di comando di Gatsby. Esegui gatsby build comando per creare una versione pronta per la produzione del tuo sito quando sei pronto per pubblicare il tuo sito. Puoi anche distribuire il tuo sito web Gatsby su GitHub per configurare una pipeline CI/CD (Continuous Integration and Continuous Deployment).
Passaggio 5. Installa PM2
Process Manager (PM2) ti consentirà di mantenere in vita le applicazioni per sempre, ricaricarle senza tempi di inattività e facilitare le comuni attività di amministrazione del sistema. Richiama il comando seguente per installare PM2 su Ubuntu 20.04 a livello globale.
$ sudo npm install pm2 -g
Dopo aver installato PM2, possiamo eseguire questi comandi per avviare il nostro sito Web Gatsby sulla porta 8000.
$ cd ~/gatsby-site
$ pm2 start gatsby --name mygatsby -- serve -p 8000
Passaggio 6. Installa e configura NGINX
L'installazione di Gatsby è stata completata e dovresti essere in grado di accedervi all'IP pubblico del tuo server con il numero di porta 8000. Tuttavia, se desideri accedere al tuo sito Web Gatsby utilizzando un nome di dominio o un nome di sottodominio invece di digitare l'indirizzo IP del server e il numero di porta nell'URL, dovresti configurare un proxy inverso sul tuo server.
In questo passaggio, ti mostreremo come implementare la configurazione del proxy inverso utilizzando Nginx. Nginx è un server Web potente e ad alte prestazioni che si concentra sulla personalizzazione e sulle prestazioni.
Innanzitutto, installa Nginx con il seguente comando:
$ sudo apt install nginx
Su Ubuntu 20.04, Nginx è configurato per iniziare a funzionare al momento dell'installazione, puoi verificarlo eseguendo questo comando:
$ sudo systemctl status nginx
Una volta installato, crea un nuovo file di configurazione del blocco del server Nginx. Sostituisci yourdomain.com con il tuo nome di dominio o sottodominio effettivo:
$ sudo nano /etc/nginx/sites-enabled/yourdomain.com.conf
Aggiungi il seguente contenuto al file:
server {
listen 80;
server_name yourdomain.com;
location / {
proxy_pass http://localhost:8000;
proxy_http_version 1.1;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Host $http_host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_pass_request_headers on;
}
location ~ /.well-known {
allow all;
}
}
Salva il file premendo CTRL + O quindi premi CTRL + X per uscire dall'editor nano, quindi riavvia Nginx.
$ sudo systemctl restart nginx
Passaggio 7. Installa il certificato SSL
Questo è un passaggio facoltativo ma altamente consigliato da completare. Installeremo un certificato SSL gratuito da Let's Encrypt.
$ sudo apt install python3-certbot-nginx -y
Una volta completato, possiamo eseguire questo comando per installare il certificato SSL.
$ sudo certbot
Ti verrà chiesto il tuo indirizzo e-mail, accetti i TOS di Let's Encrypt e se desideri condividere o meno il tuo indirizzo e-mail con la Electronic Frontier Foundation. Quindi, devi scegliere per quali nomi desideri attivare HTTPS. Scegli il tuo sito web Gatsby digitando il numero e premendo INVIO. Let's encrypt installerà il certificato e ti chiederà se configurare il reindirizzamento da HTTP a HTTPS o meno, puoi scegliere il reindirizzamento, quindi certbot creerà il reindirizzamento e ricaricherà Nginx se tutto è a posto.
Ora dovresti essere in grado di accedere al tuo sito web Gatsby in modalità HTTPS su https://yourdomain.com , puoi procedere con la creazione della tua applicazione utilizzando Gatsby.
Ovviamente, non devi tirarti i capelli per installare Gatsby su Ubuntu 20.04 se hai un piano di hosting VPS Linux gestito ospitato con noi. Se lo fai, puoi semplicemente chiedere al nostro team di supporto di installare Gatsby su Ubuntu 20.04 per te. Sono disponibili 24 ore su 24, 7 giorni su 7 e saranno in grado di aiutarti con l'installazione di Gatsby, nonché con eventuali requisiti aggiuntivi che potresti avere.
PS. Se ti è piaciuto leggere questo post del blog su come installare Gatsby su Ubuntu 20.04, sentiti libero di condividerlo sui social network usando le scorciatoie qui sotto o semplicemente lascia un commento in basso nella sezione commenti. Grazie.