So installierst du Next.js unter Ubuntu
Next.js ist eine kostenlose, quelloffene und produktionsreife React-Anwendung, die dir Bausteine zur Verfügung stellt, um superschnelle und extrem benutzerfreundliche Webanwendungen zu erstellen. Sie wurde von Vercel entwickelt und ermöglicht React-basierte Webanwendungen mit serverseitigem Rendering und die Erstellung statischer Websites. Next.js kann alle für React erforderlichen Konfigurationen übernehmen und bietet zusätzliche Funktionen und Optimierungen für deine Anwendung.
Diese Anleitung zeigt dir, wie du Next.js mit Nginx als Reverse Proxy auf Ubuntu 22.04 installierst.
Voraussetzungen
- Ein Server, auf dem Ubuntu 22.04 läuft.
- Ein gültiger Domainname zeigt auf die IP deines Servers.
- Ein Root-Passwort ist auf dem Server konfiguriert.
Node.js installieren
Bevor du beginnst, muss Node.js auf deinem Server installiert werden. Installiere zunächst alle erforderlichen Abhängigkeiten mit dem folgenden Befehl:
apt install curl gnupg2 wget -y
Als Nächstes fügst du das Node.js-Repository mit dem folgenden Befehl hinzu:
curl -sL https://deb.nodesource.com/setup_18.x | bash -
Sobald das Repository hinzugefügt ist, kannst du Node.js mit dem folgenden Befehl installieren:
apt install nodejs -y
Nach der Installation überprüfst du die Node.js-Version mit dem folgenden Befehl:
node -v
Du solltest die folgende Ausgabe sehen:
v18.12.1
Du kannst auch die NPM-Version mit dem folgenden Befehl überprüfen:
npm -v
Du solltest die folgende Ausgabe sehen:
8.19.2
Erstellen einer Next.js-Anwendung
Du kannst das npx-Tool verwenden, um eine Next.js-Anwendung zu erstellen. npx ist ein CLI-Tool, mit dem sich Abhängigkeiten, die in der npm-Registry gehostet werden, einfach installieren und verwalten lassen.
Führe den folgenden Befehl aus, um eine Next.js-Anwendung namens nextapp zu erstellen:
npx create-next-app nextapp
Du solltest die folgende Ausgabe erhalten:
Need to install the following packages: create-next-app@13.0.3 Ok to proceed? (y) y ? Would you like to use TypeScript with this project? … No / Yes ? Would you like to use ESLint with this project? … No / Yes Creating a new Next.js app in /root/nextapp. Using npm. Installing dependencies: - react - react-dom - next - typescript - @types/react - @types/node - @types/react-dom - eslint - eslint-config-next added 237 packages, and audited 238 packages in 20s 78 packages are looking for funding run `npm fund` for details found 0 vulnerabilities Initializing project with template: default Success! Created nextapp at /root/nextapp
Sobald du fertig bist, kannst du mit dem nächsten Schritt fortfahren.
Ausführen einer Next.js-Anwendung
Nachdem du eine Next.js-Anwendung erstellt hast, wechselst du in das Verzeichnis nextapp und führst sie mit dem folgenden Befehl aus:
cd nextapp npm run dev
Du erhältst die folgende Ausgabe:
> nextapp@0.1.0 dev > next dev ready - started server on 0.0.0.0:3000, url: http://localhost:3000 event - compiled client and server successfully in 3.2s (154 modules) Attention: Next.js now collects completely anonymous telemetry regarding usage. This information is used to shape Next.js' roadmap and prioritize features. You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL: https://nextjs.org/telemetry
Drücke die Tastenkombination STRG+C, um die Anwendung anzuhalten. Erstelle dann die Anwendung mit dem folgenden Befehl:
npm run build
Du erhältst die folgende Ausgabe:
> nextapp@0.1.0 build > next build info - Linting and checking validity of types info - Creating an optimized production build info - Compiled successfully info - Collecting page data info - Generating static pages (3/3) info - Finalizing page optimization Route (pages) Size First Load JS ? ? / 4.83 kB 83.7 kB ? ? css/ae0e3e027412e072.css 707 B ? /_app 0 B 78.9 kB ? ? /404 212 B 79.1 kB ? ? /api/hello 0 B 78.9 kB + First Load JS shared by all 79.2 kB ? chunks/framework-0f397528c01bc177.js 45.7 kB ? chunks/main-5cebf592faf0463a.js 31.8 kB ? chunks/pages/_app-05f53d08443c56f6.js 402 B ? chunks/webpack-2369ea09e775031e.js 1.02 kB ? css/ab44ce7add5c3d11.css 247 B ? (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps) ? (Static) automatically rendered as static HTML (uses no initial props)
Starte die Next.js-Anwendung mit folgendem Befehl:
npm start
Du solltest die folgende Ausgabe sehen:
> nextapp@0.1.0 start > next start ready - started server on 0.0.0.0:3000, url: http://localhost:3000
Drücke die Tastenkombination STRG+C, um die Anwendung anzuhalten.
Verwalten der Next.js-Anwendung mit PM2
PM2 ist ein fortschrittlicher Prozessmanager für produktive Node.js-Anwendungen. Er ermöglicht es dir, Anwendungen für immer am Leben zu erhalten.
Um PM2 zu installieren, führe den folgenden Befehl aus:
npm install pm2@latest -g
Starte dann deine Next.js-Anwendung mit PM2, indem du den folgenden Befehl ausführst:
pm2 start "npm start"
Du erhältst die folgende Ausgabe:
[PM2] Starting /usr/bin/bash in fork_mode (1 instance) [PM2] Done. ??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ? id ? name ? namespace ? version ? mode ? pid ? uptime ? ? ? status ? cpu ? mem ? user ? watching ? ??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ? 0 ? npm start ? default ? N/A ? fork ? 1321 ? 0s ? 0 ? online ? 0% ? 24.5mb ? root ? disabled ? ???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
Jetzt ist die Next.js-Anwendung gestartet und lauscht auf Port 3000. Du kannst dies mit dem folgenden Befehl überprüfen:
ss -antpl | grep 3000
Du erhältst die folgende Ausgabe:
LISTEN 0 511 0.0.0.0:3000 0.0.0.0:* users:(("node",pid=1337,fd=18))
Du kannst den Status deiner Next.js-Anwendung auch mit dem folgenden Befehl überprüfen:
pm2 show "npm start"
Du erhältst die folgende Ausgabe:
Describing process with id 0 - name npm start ??????????????????????????????????????????????????????????? ? status ? online ? ? name ? npm start ? ? namespace ? default ? ? version ? N/A ? ? restarts ? 0 ? ? uptime ? 59s ? ? script path ? /usr/bin/bash ? ? script args ? -c npm start ? ? error log path ? /root/.pm2/logs/npm-start-error.log ? ? out log path ? /root/.pm2/logs/npm-start-out.log ? ? pid path ? /root/.pm2/pids/npm-start-0.pid ? ? interpreter ? none ? ? interpreter args ? N/A ? ? script id ? 0 ? ? exec cwd ? /root/nextapp ? ? exec mode ? fork_mode ? ? node.js version ? N/A ? ? node env ? N/A ? ? watch & reload ? ? ? ? unstable restarts ? 0 ? ? created at ? 2022-11-12T13:30:39.734Z ? ??????????????????????????????????????????????????????????? Divergent env variables from local env Add your own code metrics: http://bit.ly/code-metrics Use `pm2 logs npm start [--lines 1000]` to display logs Use `pm2 env 0` to display environment variables Use `pm2 monit` to monitor CPU and Memory usage npm start
Wenn du fertig bist, kannst du mit der Installation und Konfiguration von Nginx fortfahren.
Nginx als Reverse Proxy für die Next.js-Anwendung konfigurieren
Es ist eine gute Idee, Nginx als Reverse Proxy zu installieren und zu konfigurieren, um auf die Next.js-Anwendung zuzugreifen.
Installiere zunächst das Nginx-Paket mit dem folgenden Befehl:
apt install nginx -y
Sobald Nginx installiert ist, erstellst du eine Konfigurationsdatei für den virtuellen Nginx-Host:
nano /etc/nginx/conf.d/next.conf
Füge die folgenden Konfigurationen hinzu:
server {
server_name next.example.com;
location / {
# Reverse proxy for Next server
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_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 X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Port $server_port;
}
}
Speichere und schließe die Datei. Überprüfe dann den Nginx auf Syntaxkonfigurationsfehler:
nginx -t
Du solltest die folgende Ausgabe sehen:
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful
Starte anschließend den Nginx-Dienst neu, um die Änderungen zu übernehmen:
systemctl restart nginx
Du kannst den Status von Nginx auch mit dem folgenden Befehl überprüfen:
systemctl status nginx
Du solltest die folgende Ausgabe sehen:
? nginx.service - A high performance web server and a reverse proxy server
Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
Active: active (running) since Sat 2022-11-12 13:35:46 UTC; 6s ago
Docs: man:nginx(8)
Process: 2023 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
Process: 2024 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
Main PID: 2025 (nginx)
Tasks: 3 (limit: 464122)
Memory: 3.3M
CGroup: /system.slice/nginx.service
??2025 "nginx: master process /usr/sbin/nginx -g daemon on; master_process on;"
??2026 "nginx: worker process" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""
??2027 "nginx: worker process" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""
Nov 12 13:35:46 ubuntu22041 systemd[1]: Starting A high performance web server and a reverse proxy server...
Nov 12 13:35:46 ubuntu22041 systemd[1]: Started A high performance web server and a reverse proxy server.
Wenn du damit fertig bist, kannst du mit dem nächsten Schritt fortfahren.
Zugriff auf die Next.js Webanwendung
Jetzt ist die Next.js-Anwendung installiert und mit Nginx konfiguriert. Du kannst sie jetzt über die URL http://next.example.com aufrufen. Du solltest die Next.js-Webseite auf dem folgenden Bildschirm sehen:
Fazit
Glückwunsch! Du hast die Next.js-Anwendung erfolgreich mit Nginx auf Ubuntu 22.04 installiert. Jetzt kannst du deinen Entwicklungsprozess mit dem Next.js-Framework beschleunigen. Wenn du noch Fragen hast, kannst du dich gerne an mich wenden.