Richten Sie eine Nuxt.js-Webanwendung unter Ubuntu 18.04 LTS ein

• Nuxt.js: Das universelle Framework
• Node.js installieren
• Gerüstanwendung
• Erster Start
• Gebäude für die Produktion
• PM2: Verwalten Sie Ihre Anwendung mit Leichtigkeit

Nuxt.js: Das universelle Framework

Nuxt.js ist ein JavaScript-Framework zum schnellen Erstellen universeller Vue.js-Anwendungen. Es ist vor allem für seine Fähigkeit bekannt, Vue.js Apps zu erstellen, die sowohl auf dem Server als auch auf dem Client gerendert werden können. In diesem Tutorial werden wir eine vom Server gerenderte Nuxt.js-Anwendung einrichten und unter Ubuntu 18.04 LTS bereitstellen.

Node.js installieren

Zunächst müssen Sie sicherstellen, dass Sie Ubuntu 18.04 LTS ausführen. Dann müssen Sie Node.js installieren, falls es noch nicht installiert ist. In diesem Tutorial verwenden wir den Node Version Manager (NVM), um diesen Vorgang erheblich zu vereinfachen.

Installieren Sie NVM mit den folgenden Befehlen.

curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh -o install_nvm.sh
bash install_nvm.sh
source ~/.profile
nvm install 11.1.0
nvm use 11.1.0

Gerüstanwendung

Sobald Sie Node.js installiert haben, können wir nun mit der Einrichtung der Pakete fortfahren, die wir mit NPM benötigen. Wir werden ein praktisches kleines Tool namens verwenden create-nuxt-app, ein von der Community erstelltes Tool, mit dem Nuxt.js-Anwendungen einfach erstellt werden können.

Führen Sie in Ihrem Home-Verzeichnis den folgenden Befehl aus, um die App-Generierung zu starten.

npx create-nuxt-app <nameofproject>

Die Konsole fordert Sie zu mehreren wichtigen Optionen auf. Für dieses Tutorial werden wir unser Projekt " app" nennen. Wir werden Express als unser benutzerdefiniertes Server-Framework verwenden und die Anwendung im universellen Modus ausführen, um sicherzustellen, dass wir unsere Website auf dem Server rendern. Wenn Sie alle erforderlichen Berechtigungen angegeben haben, beginnt der Installationsvorgang und alle Konfigurationsdateien werden erstellt.

Erster Start

Sobald alles heruntergeladen wurde, wechseln Sie die Verzeichnisse in den Ordner, den Sie gerade erstellt haben.

cd app

Jetzt können wir den Nuxt.js-Entwicklungsserver starten.

npm run dev

Dieser Befehl erstellt die Site mithilfe von Webpack, einem Modulbündler, und stellt die Site auf einem Localhost-Port bereit, bei dem es sich im Allgemeinen um einen Port handelt 3000. Außerdem erhalten Sie Zugriff auf Hot-Reloading-Module, sodass Sie die Anwendung nicht jedes Mal neu starten müssen, wenn Sie eine Datei ändern. Da wir die App im universellen Modus ausführen, wird die App sowohl auf dem Client als auch auf dem Server kompiliert. Jetzt wird Ihre Anwendung auf dem Port ausgeführt 3000.

Gebäude für die Produktion

Der Entwicklungsmodus ist sehr nützlich, wenn Sie Ihre Anwendung aktiv entwickeln. Wenn Sie jedoch bereit sind, Ihre Anwendung zu veröffentlichen, verlieren Addons wie Hot-Reloading und Entwicklertools an Bedeutung. Aus diesem Grund möchten wir unsere Anwendung einmal für eine Produktionsumgebung erstellen. Zum Glück enthält Nuxt.js ein Tool, mit dem wir schnell die Module unserer App für die Produktion erstellen können. Führen Sie die folgenden Schritte aus, um den Produktionserstellungsprozess zu starten.

npm run build

Im Wesentlichen kompilieren wir hier alle unsere Webpack-Module mit Optimierungen für die Produktion.

Sobald der Build abgeschlossen ist, können Sie die Site für die Produktion ausführen.

npm start

Wenn Sie jetzt zu navigieren http://yourip:3000, wird der Begrüßungsbildschirm von Nuxt.js angezeigt, der bestätigt, dass Sie im Produktionsmodus ausgeführt werden.

PM2: Verwalten Sie Ihre Anwendung mit Leichtigkeit

Jetzt verstehen wir die Grundlagen der Ausführung unserer Anwendung für die Produktion. In Bezug auf eine Produktionsumgebung würden wir eine gute Möglichkeit bevorzugen, um unsere Anwendung für immer am Laufen zu halten, unsere Anwendung bei Bedarf automatisch neu zu starten und die Ressourcen unserer Anwendung zu überwachen. Hier kommt Process Manager 2 (PM2) ins Spiel. PM2 ist ein Node.js-Prozessmanager für Produktionsanwendungen, der viele wichtige Produktionstools wie Lastausgleich, erweiterte Protokolle, Startskripte und vieles mehr enthält. Installieren Sie zuerst PM2.

npm install pm2 -g

Dadurch wird PM2 global installiert, sodass wir es überall auf unserem Server verwenden können. Sobald der Download von PM2 abgeschlossen ist, können wir unsere Anwendung starten.

pm2 start <appfolder>/server/index.js

Beachten Sie, dass wir die Serverdatei starten, die sich in unserem Anwendungsstamm befindet.

Wenn Sie die Ressourcen anzeigen möchten, die Ihre Anwendung verbraucht, können Sie dies mit dem pm2 monitBefehl tun . Dadurch wird eine ähnliche Benutzeroberfläche wie bei ncurses angezeigt, über die Sie präzise Daten über die RAM-, CPU- und Festplattennutzung Ihrer Anwendung erfassen können.

Inzwischen wird Ihre Anwendung genau so ausgeführt, wie sie war, als wir sie zuvor mit npm ausgeführt haben, außer dass wir jetzt viel mehr Kontrolle über Produktionsoptimierungen haben.

Sie haben jetzt einen Nuxt.js-Anwendungsbuild, der für die Produktion mit Node.js und Ubuntu 18.04 bereitgestellt wird. Wenn Sie mehr über Nuxt und all seine detaillierten Funktionen erfahren möchten, besuchen Sie bitte die offizielle Dokumentation .