Detailliertes Tutorial zum Bereitstellen eines SpringBoot + Vue-Projekts auf einem Linux-Server

Vorwort

Lassen Sie mich Ihnen zeigen, wie ich ein SpringBoot + Vue-Projekt mit getrenntem Frontend und Backend bereitgestellt habe. Die von mir verwendete Linux-Distribution ist CentOS7.5

Mit einem auf ElementUI basierenden E-Commerce-Backend-Managementsystem ist die Entwicklung eines ähnlichen Backends viel einfacher. Allerdings wird das Backend des bisherigen Systems mithilfe von Node komplettiert, was für uns Java-Entwickler nicht sinnvoll ist. Ich habe gelernt, wie man ElementUI verwendet, was ausreicht, und dann kann ich alle Backend-Dienste selbst mit SpringBoot erledigen.

Vor Kurzem scheint die offizielle Version von Vue3 veröffentlicht worden zu sein. Wenn Sie Zeit haben, können Sie einen Blick darauf werfen.

Tipp: Das Folgende ist der Hauptinhalt dieses Artikels. Die folgenden Fälle können als Referenz verwendet werden

1. Wie werden Vue-Paketprojekte bereitgestellt?

1.1 Vue-Projektverpackung

Tipps: Wenn Vue nicht auf Ihrem Computer installiert ist, installieren Sie zuerst Node. Das folgende Express (ein http-Framework, das die Funktion zum schnellen Erstellen eines Servers bietet) basiert ebenfalls auf Node. Bitte Baidu für die spezifische Installationsmethode. Ich werde hier nicht erklären, wie man es installiert.

Mein Projekt wurde mit vue cli4 erstellt, einem Projekt, das mit Scaffolding erstellt wurde. Wenn Sie nicht wissen, welche Version Ihres vue cli ist, können Sie den folgenden Befehl eingeben, um dies zu überprüfen

vue -V 

Der Vorteil der Verwendung von Scaffolding besteht darin, dass alles visualisiert wird. Sie können das Projekt mit einem Klick starten, das Projekt mit einem Klick kompilieren und die Installation von Abhängigkeiten wird sehr, sehr bequem. Das Wirkungsdiagramm sieht wie folgt aus

Wir klicken auf „Erstellen“ und dann auf „Ausführen“. Nachdem das Projekt erstellt wurde, wird im Stammpfad des Projekts ein „dist“-Ordner generiert. In dieser Datei werden alle Inhalte unseres Vue-Projektpakets gespeichert.

1.2 Verwenden Sie Express zum Proxy statischer Ressourcendateien

Natürlich gibt es viele Möglichkeiten, statische Ressourcen als Proxy zu verwenden. Dies ist eine Lösung, die meiner Meinung nach relativ einfach ist. Wie also geht das?

Tipp: Unabhängig davon, ob es sich um eine Linux- oder eine Windows-Umgebung handelt, ist die folgende Lösung universell (Voraussetzung ist, dass Sie Node und NPM bereits installiert haben. Wir müssen das NPM-Paket verwenden, um die Umgebung zu installieren).

• Erstellen Sie einen neuen Ordner wie: myapp mkdir myapp und gehen Sie dann in den Ordner: cd myapp
• Initialisieren Sie dann die Knotenumgebung: npm init ,
• Anschließend können Sie einige JSON-Informationen konfigurieren.
• Installieren Sie dann die Express-Umgebung: npm install express --save , --save bedeutet, dass es nur in der aktuellen Umgebung verwendet wird. Sie werden auch aufgefordert, eine js-Datei zu erstellen. Sie können diese ignorieren oder erstellen
• Erstellen Sie dann die Datei app.js: touch app.js und legen Sie sie im selben Verzeichnis wie den Ordner „dist“ ab.
• Schreiben Sie den Code für statische Express-Proxy-Ressourcen. Verwenden Sie in der Windows-Umgebung einen Texteditor und in der Linux-Umgebung einen Vim-Editor.

const express = erfordern('express')
const app = express()

// Statische Proxy-Ressourcen app.use(express.static('./dist'))

// Lauschen Sie auf Port 4000 als Zugriffspfad für Ressourcen app.listen(4000, () => {
 console.log('Server läuft unter http://127.0.0.1:4000')
})

Speichern Sie den Code nach der Bearbeitung. Wir verwenden ein Projektmanagement-Toolkit pm2

Windows

Installieren Sie dies, damit wir den Projektstatus in Echtzeit anzeigen können

Dadurch müssen wir das Projekt nicht mit node app.js ausführen. Der Nachteil der direkten Ausführung besteht darin, dass das Projekt automatisch geschlossen wird, wenn Sie die Shell oder Linux-Shell schließen. Dies macht das Projektmanagement sehr komfortabel

2. Wie wird das SpringBoot-Projekt bereitgestellt?

2.1 Mögliche Probleme bei der Datenbankbereitstellung

• Stellen Sie zunächst sicher, dass die MySQL-Datenbank auf unserem Server installiert ist
• Anschließend erfolgt die entsprechende Konfiguration der Datenbank, das Einrichten des Fernzugriffs, usw.
• Die Datenbank unterstützt standardmäßig keine Remoteverbindungen. Aktivieren Sie diese bei Bedarf. Die Einstellung % bedeutet, dass externe Benutzer darauf zugreifen können.

mysql> aktualisiere mysql.user, setze host='%', wobei user='root' und host='localhost';
mysql> FLUSH-PRIVILEGIEN;

// Wenn das oben genannte nicht funktioniert, geben Sie bitte diesen Befehl ein, der das Problem des Fernzugriffs lösen solltemysql> gewähren Sie root@'%', identifiziert durch 'Ihr Datenbank-Anmeldekennwort', alle Berechtigungen für *.*;

2.2 Hochladen des SpringBoot-Projektpakets

Durch unsere Online-Suche haben wir herausgefunden, dass es zwei Möglichkeiten gibt, das SpringBoot-Projekt zu verpacken.

• Direkte Ausführung mit eingebettetem Tomcat
• Verwenden Sie nicht den eingebetteten Tomcat, packen Sie das Projekt in ein War-Paket, stellen Sie es auf Tomcat bereit und führen Sie es aus.

Ich habe die zweite Lösung in der Java EE- Phase verwendet und verwende jetzt die erste Lösung

Um das Projekt zu verpacken, müssen wir der Maven-POM-Abhängigkeit das folgende Plugin hinzufügen:

<Bauen>
 <Plugins>
 <Plugin>
 <groupId>org.springframework.boot</groupId>
 <artifactId>Spring-Boot-Maven-Plugin</artifactId>
 </plugin>
 </plugins>
 </bauen>

Öffnen Sie Ihre Idee und klicken Sie rechts auf „Verpacken“, um die Verpackung abzuschließen. Die generierten Dateien liegen im Zielverzeichnis.

Dann können wir das Projekt über den Befehl direkt auf der Kommandozeile ausführen.

java -jar xxx.jar 

java -jar xxxx.war

3. Serverkonfiguration

3.1 Starten und Stoppen des SpringBoot-Projekts in der Linux-Umgebung

Hier laden wir unser gepacktes SpringBoot-Projekt und Vue-Projekt auf den Server hoch.

Das Vue-Projekt befolgt die oben genannten Schritte, die universell für Windows- und Linux-Plattformen gelten.

Wir wissen, dass es praktisch ist, das Projekt mit Java-JAR auszuführen, aber wir werden auch auf ein Problem stoßen: Wenn die Linux-Shell geschlossen wird, wird auch der Dienst geschlossen. Daher müssen wir ein Skript verwenden, um sicherzustellen, dass unser Prozess (SpringBoot-Dienst) im Hintergrund weiter ausgeführt werden kann.

Wir schreiben ein Bash -Skript, wir müssen nur demo-0.0.1-SNAPSHOT durch Ihr eigenes exportiertes Jar-Paket ersetzen

#!/bin/sh
nohup java -jar demo-0.0.1-SNAPSHOT.jar &

Das & kann hier nicht weggelassen werden, was bedeutet, dass der Daemon-Prozess im Hintergrund laufen kann.

Speichern und Ausführen des Skripts

sh start-up.sh

ps: Wenn der Befehl hier nicht ausgeführt werden kann, müssen Sie Lese- und Schreibrechte für diesen Ordner erteilen chmod 777 *

Überprüfen Sie, ob der Prozess ausgeführt wird

ps -ef | grep java

Suchen Sie den Projektnamen. Die erste Spalte ist Ihre PID.
Geben Sie kill -9 pid ein, um Ihr Java-Projekt zu stoppen

3.2 Nginx Reverse-Proxy-SpringBoot-Dienst

Da einige Unternehmen https-Dienste verwenden müssen, müssen wir unsere Backend-Dienste per Reverse-Proxy in https-Dienste umwandeln.

Voraussetzung ist, dass Sie die folgende Umgebung konfiguriert haben. Wenn nicht, fahren Sie mit der Nginx-Installation und SSL-Konfiguration fort.

• Sie haben den Nginx-Server installiert
• Sie haben das SSL-Zertifikat konfiguriert und den https-Dienst implementiert. Wenn Sie nicht wissen, wie das geht, können Sie diesen Artikel lesen.

Konfigurieren Sie den Alias ​​des Backend-Dienstes in http. Der Alias ​​des SpringBoot-Projekts kann nicht '_' verwenden.

Upstream tikuApiServer {
 	Server 127.0.0.1:9999;
 }

Dann konfigurieren Sie es wie folgt im Dienst mit Server 443

 Server {
 hören Sie 443 SSL HTTP2 Standardserver;
 hören Sie [::]:443 ssl http2 Standardserver;
 Servername Ihr Domänenname;
 Der Pfad zum Stamm-HTTPS-Projekt;
 Index Index.html Index.htm;
#
 ssl_certificate "zertifikat.crt";
 ssl_certificate_key "Zertifikat.Schlüssel";
 ssl_session_cache geteilt:SSL:1m;
 SSL-Sitzungszeitüberschreitung 10 Min.;
 ssl_ciphers HOCH:!aNULL:!MD5;
 ssl_prefer_server_ciphers ein;

 # Konfigurationsdateien für den Standardserverblock laden.
 /etc/nginx/default.d/*.conf einschließen;
 mime.types einschließen;
		Standardtyp Anwendung/Oktett-Stream;
		
		// ================== Hier =======================
 Standort /tiku/
 	Proxy-Passwort http://tikuApiServer/api/v1/;
 }

 Fehlerseite 404 /404.html;
 Standort = /40x.html {
 }

 Fehlerseite 500 502 503 504 /50x.html;
 Standort = /50x.html {
 }
 }

Auf diese Weise kann unsere Backend-API direkt unter https://domain/tiku/xxxx aufgerufen werden.

Zusammenfassen

Tipp: Hier eine Zusammenfassung des Artikels:

1. Trennung von Frontend und Backend Integrierte Bereitstellung von SpirngBoot + Vue
2. Bash-Skripting (Daemon zum Ausführen des Projekts)
3. MySQL-Fernzugriff

Dies ist das Ende dieses Artikels über die Bereitstellung des SpringBoot + Vue-Projekts auf dem Linux-Server. Weitere relevante Inhalte zur Bereitstellung von SpringBoot + Vue auf Linux-Servern finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!