So stellen Sie die Next.js-App in cPanel bereit (Anleitung)

Veröffentlicht: 2023-07-17
Inhaltsverzeichnis
  • Was ist Next.js?
  • Was ist cPanel?
  • Stellen Sie die Next.js-App auf cPanel bereit
  • Vor- und Nachteile der Bereitstellung eines NextJs in cPanel
  • FAQs
  • Andere Ressourcen
  • Abschluss

Lernen Sie, eine Next.js-Anwendung auf cPanel nahtlos und effektiv bereitzustellen. Ich begleite Sie Schritt für Schritt durch diesen Prozess.

Bevor wir eintauchen, werfen wir einen Blick auf Next.js und cPanel, für den Fall, dass Sie mit diesen Begriffen noch nicht vertraut sind.

Was ist Next.js?

Next.js ist ein nettes Framework, das auf React.js basiert. Es ist ein Assistent, wenn es um die Erstellung von Server-Side-Rendering-Apps (SSR) geht. React.js unterstützt standardmäßig nur die Erstellung von Single-Page-Anwendungen (SPA). Next.js springt jedoch mit seiner attraktiven SSR-Funktion ein. Was sonst? Next.js bietet neben anderen Vorteilen auch ein dateibasiertes Routing-System.

Was ist cPanel?

Wechsel zu cPanel. Betrachten Sie es als eine Software, die die Serververwaltung vereinfacht. Es bringt eine Vielzahl von Werkzeugen auf Ihren Tisch. Dateimanager, Datenbankmanager und Domain Name Manager sind nur einige Beispiele.

Nachdem wir uns nun mit Next.js und cPanel angefreundet haben, können wir mit unserer Hauptaufgabe fortfahren: der Bereitstellung einer Next.js-App auf cPanel. Angenommen, Sie haben eine Next.js-App, einen Webhost mit cPanel und einen verknüpften Domainnamen, dann machen wir weiter.

Stellen Sie die Next.js-App auf cPanel bereit

Schritt 1 : Beginnen Sie mit der Einrichtung eines benutzerdefinierten Next.js-Servers. Sie benötigen eine server.js-Datei im Stammverzeichnis Ihres Projekts, die mit dem erforderlichen Code gefüllt ist. Suchen Sie nach Hilfe in einem offiziellen Next.js-Leitfaden.

 const { createServer } = require('http') const { parse } = require('url') const next = require('next') const dev = process.env.NODE_ENV !== 'production' const hostname = 'localhost' const port = 3000 // when using middleware `hostname` and `port` must be provided below const app = next({ dev, hostname, port }) const handle = app.getRequestHandler() app.prepare().then(() => { createServer(async (req, res) => { try { // Be sure to pass `true` as the second argument to `url.parse`. // This tells it to parse the query portion of the URL. const parsedUrl = parse(req.url, true) const { pathname, query } = parsedUrl if (pathname === '/a') { await app.render(req, res, '/a', query) } else if (pathname === '/b') { await app.render(req, res, '/b', query) } else { await handle(req, res, parsedUrl) } } catch (err) { console.error('Error occurred handling', req.url, err) res.statusCode = 500 res.end('internal server error') } }) .once('error', (err) => { console.error(err) process.exit(1) }) .listen(port, () => { console.log(`> Ready on http://${hostname}:${port}`) }) })

Schritt 2 : Optimieren Sie die Datei package.json. Dieser Schritt macht die Umgebung „produktionsbereit“ und aktiviert die Datei server.js.

 { "scripts": { "start": "NODE_ENV=production node server.js" } }

Schritt 3 : Zeit, Ihre Next.js-Anwendung zu erstellen. Sie können dies mit dem Befehl „npm run build“ oder „garn run build“ in Ihrem Terminal tun.

Schritt 4 : Suchen Sie nach dem Build die Dateien Ihres Next.js-Projekts in Ihrem Dateimanager. Wenn Sie keine versteckten Dateien sehen, aktivieren Sie die Sichtbarkeit. Vermeiden Sie die Ordner „node_modules“ und „.git“, die Dateien „README.md“ und „.gitignore“. Wählen Sie alle anderen Dateien und Ordner aus und erstellen Sie eine ZIP-Datei.

Schritt 5 : Melden Sie sich jetzt bei Ihrem cPanel-Webhosting an. Laden Sie die ZIP-Datei hoch und extrahieren Sie sie in den Stammordner Ihres Domainnamens.

Schritt 6 : Ihre Projektdateien sind fertig. Gehen Sie zum Abschnitt „Software“ in Ihrem cPanel. Klicken Sie auf „Node.js-App einrichten“ und anschließend auf die Schaltfläche „+ Anwendung erstellen“. Richten Sie Ihre Node.js-App ein und berücksichtigen Sie dabei die Node.js-Version, den Produktionsanwendungsmodus, das Anwendungsstammverzeichnis, die URL und die Startdatei (server.js).

Klicken Sie abschließend auf ERSTELLEN. Sobald es erstellt ist, stoppen Sie es für eine Weile. Scrollen Sie nach unten zum Abschnitt „Erkannte Konfigurationsdateien“. Führen Sie NPM Install aus, um alle Node.js-Pakete abzurufen. Klicken Sie abschließend auf APP STARTEN.

Los geht's! Öffnen Sie Ihren Domainnamen in Ihrem Browser. Ihre Next.js-App ist jetzt live. Tolle Arbeit für den erfolgreichen Einsatz!

Es war eine Freude, diese Methode zur Bereitstellung von Next.js-Apps auf cPanel zu teilen. Viel Glück und viel Spaß beim Codieren!

Vor- und Nachteile der Bereitstellung eines NextJs in cPanel

Die Bereitstellung einer Next.js-Anwendung auf cPanel bringt eine Reihe von Vorteilen mit sich. Hier sind einige Vor- und Nachteile, die Sie berücksichtigen sollten.

Vorteile :

  1. Benutzerfreundlich : cPanel bietet eine benutzerfreundliche grafische Oberfläche, die den Bereitstellungsprozess vereinfacht.
  2. Automatisierung : cPanel enthält viele automatisierte Tools, die Aufgaben wie das Erstellen von Datenbanken, das Verwalten von Website-Dateien, das Einrichten von E-Mails und mehr erledigen können.
  3. Vielseitigkeit : cPanel unterstützt eine breite Palette von Anwendungen, einschließlich Node.js-Apps, wie sie beispielsweise mit Next.js erstellt wurden.

Nachteile :

  1. Eingeschränkte Flexibilität : Obwohl cPanel einfach zu verwenden ist, kann es aufgrund seiner vereinfachten Benutzeroberfläche manchmal die Flexibilität und Kontrolle über Ihre Serverumgebung einschränken.
  2. Potenzielle Kompatibilitätsprobleme : Einige Benutzer haben Probleme bei der Bereitstellung von Next.js-Anwendungen auf Shared-Hosting-Plattformen gemeldet, z. B. Fehler während des Erstellungsprozesses.

FAQs

Welche Vorteile und Einschränkungen hat das Hosten einer Next.js-Website auf cPanel?

Das Hosten einer Next.js-Website auf cPanel kann mehrere Vorteile haben, wie etwa Kosteneinsparungen und die Beibehaltung der Next.js-Funktionen. Es gibt jedoch einige Einschränkungen, die Sie beachten sollten. cPanel unterstützt beispielsweise keine serverlosen Funktionen und keine automatische statische Optimierung. Die Entscheidung, auf cPanel zu hosten, sollte auf individuellen Vorlieben und Geschäftsanforderungen basieren.

Was bewirkt die .htaccess-Dateikonfiguration beim Bereitstellen einer Next.js-Anwendung auf cPanel?

Die Konfiguration der .htaccess-Datei ist ein wichtiger Teil der Bereitstellung einer Next.js-Anwendung auf cPanel. Diese Datei steuert das Verhalten des Servers, wenn bestimmte Bedingungen auftreten. Die im Beispiel bereitgestellte spezifische Konfiguration hilft dabei, Anfragen und Weiterleitungen ordnungsgemäß zu verarbeiten.

Was passiert, wenn beim Bereitstellen einer Next.js-App auf cPanel Abstürze oder Umleitungsprobleme auftreten?

Wenn beim Bereitstellen Ihrer Next.js-App auf cPanel Abstürze oder Umleitungsprobleme auftreten, könnte eine Lösung darin bestehen, eine Startdatei mit dem Namen app.js in Ihrem Stammordner zu erstellen. In diesem Szenario müssen Sie Ihre Anwendung als Node.js-Anwendung ausführen.

Wie kann ich die Bildoptimierung deaktivieren, wenn ich eine Next.js-App auf cPanel bereitstelle?

Das Deaktivieren der Bildoptimierung beim Bereitstellen einer Next.js-App auf cPanel ist möglich, die genauen Anweisungen waren jedoch nicht in den bereitgestellten Informationen enthalten. Spezifische Schritte finden Sie in der offiziellen Next.js-Dokumentation oder in entsprechenden Tutorials.

Andere Ressourcen

Beste Next.JS-Hosting-Anbieter

Beste Node.js-Hosting-Anbieter

Abschluss

Auch wenn die Bereitstellung einer Next.js-Anwendung auf cPanel mit einigen Herausforderungen verbunden sein kann, überwiegen die Vorteile oft die Nachteile. Die Einfachheit und Automatisierung von cPanel machen den Bereitstellungsprozess selbst für Entwickler, die neu im Prozess sind, unkompliziert und überschaubar. Mit dieser Anleitung sollten Sie nun besser für die Bereitstellung Ihrer Next.js-Anwendungen auf cPanel gerüstet sein.