Gatsby ist ein schneller moderner Site-Generator für React. Es ist ein Open-Source-Framework, das die Funktionalität von React, GraphQL und Webpack zum Erstellen statischer Websites und Anwendungen kombiniert.
Gatsby ist mehr als nur ein Generator für statische Websites, es ermöglicht Webentwicklern, Websites mit React zu erstellen und mit jeder Datenquelle (CMS, Markdown usw.) ihrer Wahl zu arbeiten. In diesem Tutorial zeigen wir Ihnen, wie Sie Gatsby unter Ubuntu 20.04 installieren.
Voraussetzungen
- Ubuntu 20.04 VPS
- SSH-Zugriff mit Root-Rechten
Schritt 1. Melden Sie sich beim Server an
Melden Sie sich zunächst über SSH als Root-Benutzer bei Ihrem Ubuntu 20.04-Server an:
ssh root@IP_Address -p Port_number
Sie müssen „IP_Address“ und „Port_number“ durch die jeweilige IP-Adresse und SSH-Portnummer Ihres Servers ersetzen.
Bevor Sie beginnen, müssen Sie sicherstellen, dass alle auf dem Server installierten Ubuntu-Betriebssystempakete auf dem neuesten Stand sind. Sie können dies tun, indem Sie die folgenden Befehle ausführen:
# apt update -y # apt upgrade -y
Schritt 2. Erstellen Sie einen Systembenutzer
Als Nächstes erstellen wir einen neuen Systembenutzer und gewähren ihm sudo-Berechtigungen. In diesem Tutorial erstellen wir einen neuen Systembenutzer namens „Master“, Sie können einen beliebigen Benutzernamen wählen.
# adduser master
Führen Sie nach der Erstellung diesen Befehl aus, um den neuen Benutzer zur sudo-Gruppe hinzuzufügen. In Ubuntu dürfen Benutzer, die Mitglieder der sudo-Gruppe sind, sudo-Befehle ausführen.
# usermod -aG sudo master
Jetzt können wir uns als neuer Benutzer „master“ anmelden und diesen Benutzer verwenden, um die Installation abzuschließen.
# su - master
Schritt 3. NodeJS und NPM installieren
Es gibt einige Methoden, um sowohl NodeJS als auch NPM zu installieren. In diesem Artikel werden wir sie mithilfe der Knotenquelle installieren. Weitere Methoden finden Sie in unserem Blogbeitrag zur Installation von NodeJS und NPM.
$ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
Nach Abschluss müssen wir die Paketinformationen aus der oben neu hinzugefügten Quelle herunterladen.
$ sudo apt update
Führen Sie als Nächstes den folgenden Befehl aus, um NodeJS und NPM endgültig zu installieren.
$ sudo apt install nodejs
NodeJS und NPM wurden erfolgreich installiert, Sie können die installierte Version mit diesem Befehl überprüfen:
$ node -v; npm -v
Schritt 4. Gatsby-CLI installieren
Die Gatsby-Befehlszeilenschnittstelle ist der Haupteinstiegspunkt zum Einrichten und Ausführen der Gatsby-Anwendung. Es ist als ausführbare Datei verpackt, die global verwendet werden kann. Wir können Gatsby CLI über npm installieren.
$ sudo npm install -g gatsby-cli
Um die installierte Version von Gatsby CLI zu überprüfen, führen Sie diesen Befehl aus:
$ gatsby --version
Lassen Sie uns nun eine neue Gatsby-Website erstellen, Sie können „gatsby_site“ ersetzen ” mit einem beliebigen Namen.
$ gatsby new gatsby_site
Warten Sie einen Moment und ein neues „gatsby_site“-Verzeichnis wird erstellt.
Rufen Sie den folgenden Befehl auf, um Gatsby zu entwickeln und auszuführen.
$ cd gatsby_site $ gatsby develop -H 0.0.0.0
Sie sollten auf Ihre Gatsby-Site unter http://YOUR_SERVER_IP_ADDRESS:8000 zugreifen können , drücken Sie STRG + C, wenn Sie es stoppen möchten.
Lassen Sie uns jetzt unsere Gatsby-Website erstellen:
$ gatsby build
Der gatsby build Der Befehl ist Teil der Gatsby-CLI. Führen Sie gatsby build aus Befehl, um eine produktionsbereite Version Ihrer Site zu erstellen, wenn Sie bereit sind, Ihre Site zu veröffentlichen. Sie können Ihre Gatsby-Website auch auf GitHub bereitstellen, um eine CI/CD-Pipeline (Continuous Integration and Continuous Deployment) einzurichten.
Schritt 5. PM2 installieren
Process Manager (PM2) ermöglicht es Ihnen, Anwendungen für immer am Leben zu erhalten, sie ohne Ausfallzeit neu zu laden und allgemeine Systemverwaltungsaufgaben zu erleichtern. Rufen Sie den folgenden Befehl auf, um PM2 global auf Ihrem Ubuntu 20.04 zu installieren.
$ sudo npm install pm2 -g
Nach der Installation von PM2 können wir diese Befehle ausführen, um unsere Gatsby-Website auf Port 8000 zu starten.
$ cd ~/gatsby-site
$ pm2 start gatsby --name mygatsby -- serve -p 8000
Schritt 6. NGINX installieren und konfigurieren
Ihre Gatsby-Installation ist jetzt abgeschlossen und Sie sollten über die öffentliche IP-Adresse Ihres Servers mit der Portnummer 8000 darauf zugreifen können. Wenn Sie jedoch mit einem Domänennamen oder Subdomänennamen auf Ihre Gatsby-Website zugreifen möchten, anstatt die IP-Adresse des Servers einzugeben und die Portnummer in der URL, müssten Sie einen Reverse-Proxy auf Ihrem Server konfigurieren.
In diesem Schritt zeigen wir Ihnen, wie Sie die Reverse-Proxy-Konfiguration mit Nginx implementieren. Nginx ist ein leistungsstarker und leistungsstarker Webserver, der sich auf Anpassung und Leistung konzentriert.
Installieren Sie zuerst Nginx mit dem folgenden Befehl:
$ sudo apt install nginx
Unter Ubuntu 20.04 ist Nginx so konfiguriert, dass es nach der Installation ausgeführt wird. Sie können dies überprüfen, indem Sie diesen Befehl ausführen:
$ sudo systemctl status nginx
Erstellen Sie nach der Installation eine neue Konfigurationsdatei für den Nginx-Serverblock. Ersetzen Sie yourdomain.com mit Ihrem tatsächlichen Domain- oder Subdomain-Namen:
$ sudo nano /etc/nginx/sites-enabled/yourdomain.com.conf
Fügen Sie der Datei folgenden Inhalt hinzu:
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;
}
}
Speichern Sie die Datei, indem Sie STRG + O drücken Drücken Sie dann STRG + X Um den Nano-Editor zu beenden, starten Sie Nginx neu.
$ sudo systemctl restart nginx
Schritt 7. SSL-Zertifikat installieren
Dies ist ein optionaler Schritt, dessen Ausführung jedoch dringend empfohlen wird. Wir werden ein kostenloses SSL-Zertifikat von Let’s Encrypt installieren.
$ sudo apt install python3-certbot-nginx -y
Nach Abschluss können wir diesen Befehl ausführen, um das SSL-Zertifikat zu installieren.
$ sudo certbot
Sie werden nach Ihrer E-Mail-Adresse gefragt, akzeptieren die Let’s Encrypt TOS und ob Sie Ihre E-Mail-Adresse mit der Electronic Frontier Foundation teilen möchten oder nicht. Dann müssen Sie auswählen, für welche Namen Sie HTTPS aktivieren möchten. Wählen Sie Ihre Gatsby-Website, indem Sie die Nummer eingeben und die EINGABETASTE drücken. Let’s encrypt installiert das Zertifikat und fragt Sie, ob Sie die HTTP-zu-HTTPS-Umleitung konfigurieren möchten oder nicht. Sie können die Umleitung auswählen, dann erstellt certbot die Umleitung und lädt Nginx neu, wenn alles in Ordnung ist.
Jetzt sollten Sie im HTTPS-Modus unter https://yourdomain.com auf Ihre Gatsby-Website zugreifen können , können Sie mit dem Erstellen Ihrer Anwendung mit Gatsby fortfahren.
Natürlich müssen Sie sich nicht die Haare reißen, um Gatsby auf Ubuntu 20.04 zu installieren, wenn Sie einen verwalteten Linux-VPS-Hostingplan haben, der bei uns gehostet wird. Wenn ja, können Sie einfach unser Support-Team bitten, Gatsby auf Ubuntu 20.04 für Sie zu installieren. Sie sind rund um die Uhr verfügbar und können Ihnen bei der Installation von Gatsby sowie bei allen zusätzlichen Anforderungen helfen, die Sie möglicherweise haben.
PS. Wenn Ihnen dieser Blogbeitrag zur Installation von Gatsby unter Ubuntu 20.04 gefallen hat, können Sie ihn gerne in sozialen Netzwerken teilen, indem Sie die unten stehenden Verknüpfungen verwenden, oder hinterlassen Sie einfach einen Kommentar im Kommentarbereich. Danke.