Bereitstellung einer Next.js-Anwendung auf einem DigitalOcean-Droplet

Einführung

Next.js ist ein beliebtes React-Framework, mit dem sich serverseitig gerenderte React-Anwendungen einfach erstellen lassen. In diesem Tutorial zeigen wir Ihnen, wie Sie eine Next.js-Anwendung auf einem DigitalOcean-Droplet mit Nginx als Reverse-Proxy bereitstellen. Diese Schritt-für-Schritt-Anleitung setzt voraus, dass Sie bereits eine fertige Next.js-Anwendung und ein DigitalOcean-Konto besitzen.

Voraussetzungen

• Eine Next.js-Anwendung
• Ein DigitalOcean-Konto
• Registrierter Domainname (optional, aber empfohlen)
• Lokale Installation von Node.js und npm oder yarn

Schritt 1: Erstellen Sie ein DigitalOcean-Droplet

Wir werden unsere Next.js-Anwendung auf einem DigitalOcean-Droplet hosten, das wir selbst konfigurieren. Erstellen wir das Droplet jetzt.

• Melden Sie sich in Ihrem DigitalOcean-Konto an und gehen Sie zum Abschnitt Droplets.
• Klicken Sie auf “Tropfen erstellen”.
• Wählen Sie das Ubuntu-Image (vorzugsweise die neueste LTS-Version).
• Wählen Sie die gewünschte Tropfengröße entsprechend Ihren Bedürfnissen und Ihrem Budget.
• Für eine bessere Performance wählen Sie das Rechenzentrum, das Ihrer Zielgruppe am nächsten liegt.
• Fügen Sie Ihre SSH-Schlüssel für den sicheren Zugriff auf Ihr Droplet hinzu.
• Wählen Sie einen Hostnamen für Ihren Droplet. Dies kann Ihr Domainname oder ein beliebiger anderer Name sein.
• Klicken Sie auf “Tropfen erstellen”.
• Erstellen Sie das Droplet

Notieren Sie sich nach der Erstellung des Droplets die ihm zugewiesene IP-Adresse.

Schritt 2: Starten Sie den Droplet

Nachdem wir das Droplet erstellt haben, müssen wir es so vorbereiten, dass es eingehende Verbindungen annehmen und diese an unsere Next.js-Anwendung weiterleiten kann.

Stellen Sie eine SSH-Verbindung zu Ihrem Droplet her, indem Sie die IP-Adresse und den SSH-Schlüssel verwenden, die Sie bei der Droplet-Erstellung angegeben haben:

ssh root@<DROPLET_IP>

Pakete in Droplet aktualisieren und upgraden:

sudo apt update && sudo apt upgrade -y

Installieren Sie die erforderlichen Pakete:

sudo apt install -y nodejs npm nginx

Schritt 3: Nginx konfigurieren

Nginx ist das Tool, das das gesamte Routing zu unserer Next.js-Anwendung übernimmt. Erstellen Sie eine neue Nginx-Konfigurationsdatei für Ihre Next.js-Anwendung:

sudo nano /etc/nginx/sites-available/nextjs

Fügen Sie die folgende Konfiguration ein und ersetzen Sie server_name durch Ihren Droplet-Domänennamen oder Ihre IP-Adresse:

server {
listen 80;
server_name YOUR_IP_ADDRESS;
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}

Datei speichern und schließen. Einen symbolischen Link erstellen, um die Konfiguration zu aktivieren:

sudo ln -s /etc/nginx/sites-available/nextjs /etc/nginx/sites-enabled/

Überprüfen Sie die Nginx-Konfiguration auf Syntaxfehler:

sudo nginx -t

Wenn der Konfigurationstest erfolgreich war, starten Sie Nginx neu:

sudo service nginx restart

Schritt 4: Die Next.js-Anwendung bereitstellen

Als Nächstes bringen wir eine Next.js-Anwendung auf den Droplet. Dafür gibt es viele Möglichkeiten.

1. Erstellen Sie einen SSH-Schlüssel auf dem Server, verbinden Sie ihn mit Ihrem GitHub-Konto und klonen Sie Ihr Repository.
2. Erstellen Sie eine Next.js-Anwendung in Droplet

In diesem Tutorial erstellen wir eine neue Next.js-Anwendung in unserem Droplet.

Stellen Sie eine SSH-Verbindung zu Ihrem Droplet her:

ssh root@<DROPLET_IP>

Erstellen Sie eine neue Next.js-Anwendung und folgen Sie den Anweisungen:

cd /var/www
npx create-next-app nextjs

Wechseln Sie in das Anwendungsverzeichnis von Next.js:

cd nextjs

Installieren Sie die Programmabhängigkeiten:

npm install

Erstellen Sie die Next.js-Anwendung:

npm run build

Zum Schluss führen Sie die Next.js-Anwendung aus:

npm start

Ihre Next.js-Anwendung ist nun bereitgestellt und über Ihre Droplet-Domain oder IP-Adresse erreichbar. Damit Ihre Anwendung im Hintergrund ausgeführt wird und bei einem Serverabsturz oder -neustart automatisch neu startet, benötigen Sie einen Prozessmanager wie PM2.

Schritt 5: PM2-Prozessmanager starten

Wir haben npm innerhalb unseres Droplets gestartet. Manchmal kann dieser Befehl aus Gründen wie einem Serverneustart oder der Installation eines Updates nicht mehr ausgeführt werden. Wir verwenden das Tool PM2, um sicherzustellen, dass unsere Next.js-Anwendung stets läuft. PM2 startet automatisch neu, selbst wenn die Next.js-Anwendung abstürzt.

So installieren Sie PM2 global auf Ihrem Server:

sudo npm install -g pm2

Wechseln Sie in das Anwendungsverzeichnis von Next.js (falls es noch nicht vorhanden ist):

cd /var/www/nextjs

Starten Sie die Next.js-Anwendung mit PM2:

pm2 start npm --name "nextjs" -- start

Dieser Befehl startet die Next.js-Anwendung mit dem Namen “nextjs” mithilfe des Befehls „npm start“. PM2 startet die Anwendung automatisch neu, falls der Server abstürzt oder neu startet.

Um sicherzustellen, dass PM2 beim Systemstart gestartet wird, führen Sie Folgendes aus:

pm2 startup

Dieser Befehl erstellt ein Skript, das Sie in Ihr Terminal kopieren und einfügen können, um PM2 beim Systemstart zu starten.

Aktuelle PM2-Prozesse speichern:

pm2 save

Ergebnis

Sie haben nun erfolgreich eine Next.js-Anwendung auf einem DigitalOcean-Droplet mit Nginx als Reverse-Proxy und PM2 als Prozessmanager ausgeführt. Ihre Anwendung sollte über den Domainnamen oder die IP-Adresse Ihres Droplets erreichbar sein.

Wenn Sie einen Domainnamen verwenden, denken Sie daran, Ihre DNS-Einstellungen zu konfigurieren. Richten Sie den A-Record Ihrer Domain auf die IP-Adresse Ihres Servers ein, damit Sie über den Domainnamen auf die Anwendung zugreifen können.

Für mehr Sicherheit und bessere Suchmaschinenoptimierung (SEO) empfiehlt sich die Einrichtung von SSL-Zertifikaten mit Let's Encrypt und die Implementierung von HTTPS-Verbindungen. Zusätzlich können Sie Ihre Next.js-Anwendung durch Caching und weitere Leistungsverbesserungen optimieren.