Automatisiertes Frontend-Deployment basierend auf Docker, Nginx und Jenkins

Vorbereitende Vorbereitung

• Ein Cloud-Server basierend auf dem CentOS 7-System.
• Das auf Vue-CLI basierende Projekt wird auf GitLab bereitgestellt.

Bereitstellungsziel

Erstellen Sie eine Docker+Nginx+Jenkins-Umgebung, um den automatisierten Front-End-Bereitstellungsprozess zu implementieren. Der konkrete Implementierungseffekt besteht darin, dass Entwickler lokal entwickeln, Code an den angegebenen Zweig pushen und übermitteln und Jenkins automatisch zur kontinuierlichen Integration und automatisierten Bereitstellung auslösen. Sie können eine E-Mail-Benachrichtigung nach Abschluss der Bereitstellung einrichten, die angibt, ob die Bereitstellung erfolgreich war oder nicht. Bei erfolgreichem Abschluss werden die gepackten Dateien auf den Server hochgeladen und die Seite wird über den Nginx-Reverse-Proxy angezeigt. Bei einem Fehler wird das entsprechende Fehlerprotokoll gedruckt.

Freundliche Erinnerung: Versuchen Sie, Alibaba Cloud- oder Tencent Cloud-Server auszuwählen. Jenkins startet möglicherweise nicht normal, wenn es auf anderen Servern bereitgestellt wird!

Aufbau einer Docker-Umgebung

Mit Cloud-Server verbinden

Sie können das von Alibaba Cloud oder Tencent Cloud bereitgestellte Online-Terminal wählen (das manchmal hängen bleiben kann), es wird jedoch empfohlen, für die Verbindung einen lokalen Computer zu verwenden. Geben Sie den Verbindungsbefehl im Terminal ein:

ssh root@öffentliche Netzwerkadresse Ihres Servers

Geben Sie anschließend das Cloud-Server-Passwort ein und der Befehl zeigt die folgenden Ergebnisse an:

Docker hat zwei Zweigversionen: Docker CE und Docker EE, nämlich Community Edition und Enterprise Edition. Dieses Tutorial basiert auf der Installation von Docker CE auf CentOS 7.

Docker-Umgebung installieren

1. Installieren Sie die Abhängigkeitsbibliotheken von Docker.

yum install -y yum-utils Gerätemapper-Persistent-Data lvm2

2. Fügen Sie die Softwarequellinformationen von Docker CE hinzu.

sudo yum-config-manager --add-repo \ https://download.docker.com/linux/centos/docker-ce.repo

3. Installieren Sie Docker CE.

sudo yum installiere docker-ce

4. Starten Sie den Docker-Dienst.

sudo systemctl enable docker // So einstellen, dass es beim Booten automatisch startet sudo systemctl start docker // Docker starten

Docker Installieren Docker Compose

Docker Compose ist ein Tool zum Definieren und Ausführen von Docker-Anwendungen mit mehreren Containern. Mit Compose verwenden Sie eine YML-Datei, um alle Dienste zu konfigurieren, die Ihre Anwendung benötigt. Anschließend können Sie mit einem einzigen Befehl alle Dienste aus der YML-Dateikonfiguration erstellen und starten. Laden Sie Docker-Compose herunter:

sudo curl -L "https://github.com/docker/compose/releases/download/1.24.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

Erhöhen Sie nach Abschluss der Installation die Berechtigungen:

sudo chmod +x /usr/local/bin/docker-compose

Geben Sie docker-compose -v ein, um die folgende Seite anzuzeigen:

Docker installiert Nginx- und Jenkins-Dienste

Installieren Sie Nginx und Jenkins

Das Docker-Image zieht die Befehle der Nginx- und Jenkins-Umgebungen wie folgt:

Docker-Pull Nginx
Docker Pull Jenkins/Jenkins:lts

Führen Sie nach Abschluss der Installation Docker-Images aus, um die Images, die sich aktuell unter Docker befinden, deutlich anzuzeigen.

Docker-Bilder 

Nginx- und Jenkins-Verzeichnisschreiben

Zur einfacheren Verwaltung aggregieren wir Nginx und Jenkins in einem Dateiverzeichnis unter Docker. Die Verzeichnisstruktur ist wie folgt:

+ komponieren
- docker-compose.yml // Docker-Compose-Ausführungsdatei + nginx 
+ Konf.d
- nginx.conf // Nginx-Konfiguration + Jenkins
- jenkins_home // Jenkins-Volume + Webserver mounten 
-static //Speichern Sie die Dist-Datei nach der Front-End-Verpackung

Das Webserververzeichnis wird später generiert und wird hier nicht erläutert. Was manuell erstellt werden muss, sind die Verzeichnisse Compose, Nginx und Jenkins sowie deren untergeordnete Dateien. Die wichtigsten davon sind die Konfigurationen der Dateien docker-compose.yml und nginx.conf. Es wird empfohlen, die oben genannten Ordner im Stammverzeichnis zu platzieren. Sie können sie im Home-Ordner platzieren oder separat einen neuen Ordner erstellen.

Konfiguration der Datei docker-compose.yml

Version: '3'
Dienste: # Sammlung docker_jenkins:
Benutzer: root # Um einige Berechtigungsprobleme zu vermeiden, verwende ich hier root
restart: always # Neustartmodus image: jenkins/jenkins:lts # Geben Sie das vom Dienst verwendete Image an. Hier habe ich LTS (Long Term Support) gewählt
container_name: jenkins #Containername ports: #Offengelegte Portdefinition - 8080:8080
  50000: 50000
volumes: # Volume-Mount-Pfad - /home/jenkins/jenkins_home/:/var/jenkins_home # Dies ist das Verzeichnis, das wir zu Beginn erstellt und in das Verzeichnis jenkins_home im Container gemountet haben - /var/run/docker.sock:/var/run/docker.sock
  - /usr/bin/docker:/usr/bin/docker # Damit können wir den Docker-Befehl im Container verwenden - /usr/local/bin/docker-compose:/usr/local/bin/docker-compose
docker_nginx:
Neustart: immer
Bild: nginx
Containername: nginx
Häfen:
  -8090:80
  - 80:80
  - 433:433
Bände:
  - /home/nginx/conf.d/:/etc/nginx/conf.d - /home/webserver/static/jenkins/dist/dist:/usr/share/nginx/html

Konfiguration der Datei nginx.conf

Server{
hören Sie 80;
root /usr/share/nginx/html;index index.html index.htm;
}

Nachdem die beiden oben genannten Dateien konfiguriert wurden, müssen Sie das Verzeichnis /home/compose aufrufen und den folgenden Befehl eingeben, um die Umgebung zu starten:

docker-compose up -d

Geben Sie docker ps -a ein, um den Status des Containers anzuzeigen:

Der Status wird als aktiv angezeigt und die dahinter stehende Portnummer wird wie oben angezeigt. Dies ist ein normaler Status. Geben Sie die öffentliche IP-Adresse Ihres Cloud-Servers sowie die Portnummer 8080 in den Browser ein, um die folgende Seite anzuzeigen:

Notiz:

• Denken Sie daran, vor diesem Schritt die Sicherheitsgruppe für Port 80 des Cloud-Servers zu öffnen (Sie können hierfür die bereitgestellte Ein-Klick-Aktivierungsfunktion verwenden). Darüber hinaus wird jedoch empfohlen, die Sicherheitsgruppe für Port 8080 manuell hinzuzufügen.
• Port 80: Dies ist der für HTTP (HyperText Transport Protocol) geöffnete Port.
• Port 8080: wird für den WWW-Proxy-Dienst verwendet, der das Surfen im Internet ermöglicht.
  

Das in der obigen Abbildung erforderliche Kennwort befindet sich in /home/jenkins/jenkins_home/secrets/initAdminPassword in Volumes in docker-compose.yml. Es kann durch den folgenden Befehl abgerufen werden:

cat /home/jenkins/jenkins_home/secrets/initialAdminPassword

Jenkins-Plugin installieren

Wählen Sie nach dem Aufrufen der Seite „Empfohlene Installation“ aus.

Wählen Sie nach Abschluss der Installation links die Option „Jenkins verwalten“ aus. Wie in der folgenden Abbildung dargestellt:

Suchen Sie in Jenkins unter „Plugins verwalten“ nach den folgenden Plugins: GitLab, Publish Over SSH, Nodejs und installieren Sie sie.

Konfigurieren Sie nach Abschluss der Installation die Nodejs-Umgebung und die SSH-Parameter. Wählen Sie auf der Startseite das globale Tool „Konfiguration > NodeJS“, wählen Sie die automatische Installation und die entsprechende Nodejs-Versionsnummer. Klicken Sie nach erfolgreicher Auswahl auf „Speichern“.

Konfigurieren Sie die SSH-Informationen. Geben Sie unter „Jenkins verwalten“ > „System konfigurieren“ die relevanten Informationen des Servers ein:

Verbinden von Jenkins und GitLab

Schlüssel generieren

Führen Sie den folgenden Befehl im Stammverzeichnis aus:

ssh-keygen -t rsa

Im Allgemeinen wird standardmäßig eine doppelte Eingabe vorgenommen, wie in der folgenden Abbildung dargestellt:

Verwenden Sie cd ~/.ssh, um die generierte Datei anzuzeigen. Kopieren Sie den generierten Schlüssel id_rsa und fügen Sie ihn in die Anmeldeinformationen in Jenkins ein. Wie in der Abbildung gezeigt:

Melden Sie sich bei GitLab an und konfigurieren Sie den öffentlichen Schlüssel id_rsa.pub in GitLab:

Neues Projekt

Starten Sie nach der Vorbereitung eine neue Aufgabe und wählen Sie Neues Element > Freestyle-Projekt, um ein Freestyle-Projekt zu erstellen.

Quellcodeverwaltung

Nachdem die Erstellung abgeschlossen ist, konfigurieren Sie die Git-Informationen in der Quellcodeverwaltung und wählen Sie die Anmeldeinformationen aus, die wir gerade in den Anmeldeinformationen hinzugefügt haben.

Trigger erstellen

Wählen Sie im Build-Trigger die Zeit aus, zu der der Build ausgelöst werden soll. Sie können die Hooks Ihrer Teamkollegen auswählen, z. B. beim Pushen von Code oder beim Zusammenführen von Anfragen:

Klicken Sie auf „Erweiterte Optionen, um das geheime Token zu finden“ > „Generieren“, um einen Tokenwert zu generieren:

Nach der erfolgreichen Konfiguration musst du noch den entsprechenden Hook in GitLab hinzufügen. Notieren Sie sich die Webhook-URL (rot umrandet) und den geheimen Token-Wert im obigen Bild und konfigurieren Sie sie in GitLab.

Build-Umgebung und Build-Konfiguration

Nach Abschluss der obigen Konfiguration ist Jenkins mit GitLab verknüpft. Wenn Sie Dateien lokal pushen, werden sie automatisch erstellt. Sie können auf das geänderte Projekt zugreifen, indem Sie auf die öffentliche IP-Adresse des Cloud-Servers zugreifen. Sie können es auch manuell auf Jenkins erstellen, wie in der Abbildung gezeigt:

Abschluss

Endlich ist das einfache Online-Bereitstellungsprojekt abgeschlossen. Studenten, die über Domänennamen verfügen, können die Cloud-Auflösung verwenden, um die öffentliche IP-Adresse zuzuordnen, sodass sie für die Projektentwicklung und den Start besser erkennbare Domänennamen verwenden können.

Dies ist das Ende dieses Artikels über die automatisierte Front-End-Bereitstellung basierend auf Docker, Nginx und Jenkins. Weitere Informationen zur automatisierten Bereitstellung von Docker, Nginx und Jenkins 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!