Jenkins+Gitlab+Nginx Bereitstellung einer Front-End-Anwendung

Zugehörige Abhängigkeitsinstallation

Docker

Da die Inlandsinstallation zu langsam ist, können Sie https://docs.docker.com/desktop/ verwenden, um den Download zu beschleunigen.
Der konkrete Downloadvorgang wird hier nicht erläutert.
Spiegelquelle: „http://hub-mirror.c.163.com“

Installieren Sie Jenkins mit Docker

# Ziehen Sie das Jenkins-Image docker pull jenkins/jenkins

# Führen Sie im Hintergrund einen Dienst namens jk mit der externen Portnummer 3080 und dem verknüpften Datenvolumen ~/docker/jenkins aus. docker run -d --name jk -p 3080:8080 -v ~/docker/jenkins:/var/jenkins_home jenkins/jenkins

Nachdem der Befehl ausgeführt wurde, können Sie einen http-Dienst mit der Portnummer 3080 starten und den Browser öffnen.

• Geben Sie http://localhost:3080/ ein und warten Sie, bis die Initialisierung abgeschlossen ist (was lange dauern kann). Zu diesem Zeitpunkt ist das Administratorkennwort erforderlich. Sie können das Administratorkennwort abrufen, indem Sie cat ~/docker/jenkins/secrets/initialAdminPassword ausführen.
• Der nächste Schritt ist die Installation des Plugins. Ich empfehle die erste Option, das empfohlene Plugin (diese Installation wird langsam sein, also haben Sie Geduld)
• Erstellen Sie das erste Administratorkonto

Installieren Sie Gitlab auf Docker

Docker-Pull Gitlab/Gitlab-CE

docker run -d --name gitlab -p 443:443 -p 9001:80 -p 222:22 -v ~/docker/gl/config:/etc/gitlab:Z -v ~/docker/gl/logs:/var/logs/gitlab:Z -v ~/docker/gl/data:/var/opt/gitlab:Z gitlab/gitlab-ce

• Der Initialisierungsprozess kann lange dauern. Führen Sie docker logs -f gitlab aus, um den Fortschritt anzuzeigen.
  
• Geben Sie http://localhost:9001 ein. Sie werden beim ersten Mal aufgefordert, ein Passwort einzugeben. Geben Sie anschließend Ihren Benutzernamen und Ihr Passwort ein (der Standardbenutzername ist root).
• Legen Sie die Adresse zum Klonen des Projekts mithilfe von https und ssh fest.

# Konfigurieren Sie die vom HTTP-Protokoll verwendete Zugriffsadresse. Wenn keine Portnummer hinzugefügt wird, ist der Standardwert 80.
externe_URL 'http://192.168.1.2:9001'

# Konfigurieren Sie die vom SSH-Protokoll verwendete Zugriffsadresse und den Port gitlab_rails['gitlab_ssh_host'] = '192.168.1.2'
gitlab_rails['gitlab_shell_ssh_port'] = 222 # Dieser Port ist der Port 222, der während der Ausführung Port 22 zugeordnet ist. # nginx lauscht auf Port 80, andernfalls wird standardmäßig die Portnummer von external_url verwendet, was zu einer erfolglosen Portzuordnung führt. nginx['listen_port'] = 80
:wq #Speichern Sie die Konfigurationsdatei und beenden Sie sie, starten Sie den Container neu

Wenn die SSH-Methode nicht erfolgreich ist, liegt dies wahrscheinlich daran, dass die Schlüsseldateiberechtigungen auf dem Server falsch sind. docker exec -it gitlab sh Rufen Sie den Container auf und prüfen Sie, ob der Benutzername und die Gruppe der drei Dateien ssh_host_ecdsa_key, ssh_host_ed25519_key und ssh_host_rsa_key im Verzeichnis /etc/gitlab git sind (chown zum Ändern des Benutzers, chgrp zum Ändern der Gruppe) und ob die Dateiberechtigungen 600 lauten (der Befehl chmod kann geändert werden).

Installieren Sie nginx im Docker

Docker-Pull Nginx
docker run -d --name nginx -p 80:80 -v ~/nginx/html:/usr/share/nginx/html nginx

Zusammenfassung

• localhost:3080, Zugriff auf Jenkins (sollte auf dem Server laufen, der zum Erstellen verwendet wurde)
• localhost:9001, Zugriff auf Gitlab (sollte auf dem Server ausgeführt werden, auf dem der Quellcode abgelegt ist)
• localhost, Zugriff auf nginx (sollte auf dem Server laufen)

Konfiguration

1. Installieren Sie Gitlab-bezogene Plug-Ins

Home -> Systemverwaltung -> Plugin-Verwaltung

Wechseln Sie dann zu optionalen Plugins, suchen Sie nach Gitlab, wählen Sie das Gitlab-Plugin aus (ich habe es bereits installiert, daher wird es hier nicht angezeigt), wählen Sie dann die Schaltfläche in der unteren linken Ecke und warten Sie, bis die Installation abgeschlossen ist

2. Home -> Systemverwaltung -> Systemkonfiguration

Unter „Anmeldeinformationen“ müssen Sie das GitLab-API-Token hinzufügen.

Die Methode zum Abrufen des GitLabAPI-Tokens ist in der folgenden Abbildung dargestellt. Das generierte Token wird nach dem Aktualisieren aus Sicherheitsgründen ausgeblendet.

Nach Abschluss der Konfiguration klicken Sie am besten auf die Schaltfläche „Verbindung testen“, um sicherzustellen, dass die Konfiguration korrekt ist.

3. Neuen Job anlegen

4. Geben Sie den Aufgabennamen ein und wählen Sie Freier Stil

5. Konfigurieren Sie die zugehörigen Build-Optionen

1. Wählen Sie in der allgemeinen Konfiguration die Optionen aus, die in der vorherigen Systemkonfiguration ausgefüllt wurden. Wenn Sie sie nicht auswählen, wird der Build-Status nicht an Gitlab zurückgesendet.

2. Quellcodeverwaltung

Die URL kann nur im HTTP-Format vorliegen, daher müssen die Anmeldeinformationen unten einen Benutzernamen mit einem Passwort enthalten. Wenn Sie das falsche auswählen, können Sie den Code nicht abrufen.

Die folgende Konfiguration bedeutet, dass nur Builds auf Master und Zweigen ausgeführt werden, die mit ci beginnen. Klicken Sie für weitere Informationen zu den spezifischen Regeln auf das Fragezeichen rechts.

3. Aktivieren Sie „Build, wenn eine Änderung an GitLab gesendet wird“ beim Build-Trigger. Auf der rechten Seite befindet sich die Webhook-URL für GitLab und unten sind einige Optionen aufgeführt, wann der Build ausgelöst werden soll (was mit der Konfiguration auf GitLab koordiniert werden muss).

Die vom Jenkins-Plugin bereitgestellte Webhooj-URL kann nicht direkt verwendet werden, da Jenkins eine Anmeldung erfordert und die externe API ebenfalls eine Anmeldung erfordert. Andernfalls wird HTTP 401 zurückgegeben. Glücklicherweise kann diese Art der Anmeldung mit der HTTP-Basisauthentifizierung abgewickelt werden.
Klicken Sie auf Benutzername -> Einstellungen -> API-Token -> Neues Token hinzufügen -> Geben Sie einen Namen ein -> Generieren, kopieren Sie dann das Token und verknüpfen Sie es mit der vorherigen Webhook-URL. Die Spleißregel lautet <Schema>://<Benutzer>:<Passwort>@<Host>:<Port>/<Pfad>;<Parameter>?<Abfrage>#<Fragment>. Schließlich können Sie http://ma1:[email protected]:3080/project/gl erhalten.

Du kannst es zunächst speichern. Gehen Sie dann zu Gitlab, um es zu konfigurieren.

4. Gitlab konfiguriert die Webhook-URL
Standardmäßig erlaubt Gitlab nicht die Verwendung lokaler URLs. Verwenden Sie daher entweder einen öffentlichen Domänennamen oder ändern Sie die Datenschutzeinstellungen von Gitlab (wie unten gezeigt).

Öffnen Sie dann das bereitzustellende Projekt -> Einstellungen -> Webhooks, geben Sie die im vorherigen Schritt verknüpfte URL ein, wählen Sie das entsprechende Ereignis aus und klicken Sie auf „Hinzufügen“. Nach dem erfolgreichen Hinzufügen können Sie auf Testen klicken, um zu testen, ob die Hooks reibungslos funktionieren ().

5. Build-Umgebung Front-End-Builds erfordern zwangsläufig die Verwendung von Node, daher müssen Sie hier „Node & npm bin/-Ordner für PATH bereitstellen“ aktivieren (wenn nicht, gehen Sie zum Plugin-Center, um es zu installieren).

6. Bauen

Gehen Sie zum Plugin-Center und installieren Sie ein Plugin namens „Publish Over SSH“, das hauptsächlich zum Senden generierter Dateien an einen Remote-Server verwendet wird.

Sie müssen das Plug-In unter -> Systemverwaltung -> Systemkonfiguration konfigurieren.

2. Registerkarte „Build“, Build-Schritte hinzufügen und „Shell ausführen“ auswählen
Ersetzen Sie „gl“ durch den entsprechenden Projektnamen

# Löschen Sie die vorherige Datei rm -rf /tmp/html.tar.gz

# Führen Sie den Test aus npm run test
# npm build, Paketskript npm run bd

# Wechseln Sie zum Projektverzeichnis cd /var/jenkins_home/workspace/gl
# Packen Sie den Zielordner in eine komprimierte Datei tar -zcvf /tmp/html.tar.gz --exclude .git -C ./dist .
# Stellen Sie sicher, dass Sie die komprimierte Datei im Projektverzeichnis ablegen, sodass beim Veröffentlichen über SSH kein Zugriff auf mv /tmp/html.tar.gz ./ möglich ist.

Registerkarte „Build“, Build-Schritte hinzufügen, Dateien senden auswählen oder Commonads über SSH ausführen

# Löschen Sie zuerst /tmp/html und erstellen Sie dann ein neues. Fehler vermeiden rm -rf /tmp/html
mkdir /tmp/html

# Entpacken Sie die komprimierte Datei nach /tmp/html und löschen Sie dann die komprimierte Datei tar -xvf ~/html/html.tar.gz -C /tmp/html
rm -rf ~/html/html.tar.gz

#Kopieren Sie die entpackten Dateien nach ~/nginx/html (der lokale Pfad, der zuvor von Docker Nginx zugeordnet wurde)
cd /tmp/html
cp -R /tmp/html/* ~/nginx/html

7. Schritte nach dem Build Klicken Sie auf „Schritte nach dem Build hinzufügen“ und wählen Sie „Build-Status in Gitlab veröffentlichen“. Nachdem der Jenkins-Build abgeschlossen ist, kann der Status des Builds auch in Gitlabs CI/CD angezeigt werden.

6. Pushen Sie den Code und lösen Sie den Build aus. Wenn nach dem Pushen des Codes alles gut geht, wird hier der Build-Verlauf angezeigt. Andernfalls überprüfen Sie einfach die Konfiguration.

7. Surfen auf der Website

Nach dem Pushen des Codes werden nur statische Dateien bereitgestellt, sodass nginx nicht neu gestartet werden muss, um den neuen Inhalt anzuzeigen.

Zusammenfassen

• Beim Pushen von Code benachrichtigt Gitlab Jenkins über die Webhook-URL
• Nach dem Empfang der POST-Anforderung löst Jenkins den Build aus, einschließlich Testverpackung usw. Nach Abschluss sendet es die Datei an den Remote-Server und führt die entsprechenden Befehle aus, z. B. das Dekomprimieren der Datei und das Kopieren in das mit Nginx verbundene Verzeichnis. Wenn es sich um eine Node.JS-Anwendung handelt, müssen Sie auch das Node-Skript ausführen .
• Auf dem Remote-Server müssen vorab Docker- und Nginx-Container installiert sein und der Nginx-Dienst muss im Hintergrund ausgeführt werden.
• Wenn Sie nodejs + nginx benötigen, können Sie docker-compose verwenden, um die Befehlsausführung zu vereinfachen, und dann den entsprechenden Befehl zum exec-Befehl von publish über ssh hinzufügen.
  

Dies ist das Ende dieses Artikels über die Front-End-Anwendungsimplementierung der Jenkins+Gitlab+Nginx-Bereitstellung. Weitere relevante Inhalte zur Jenkins-Gitlab-Nginx-Bereitstellung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die folgenden verwandten Artikel weiter. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!