Wie Sie mit React und Jenkins Front-End-Anwendungen für kontinuierliche Integration und kontinuierliche Bereitstellung erstellen

Wie man mit React und Jenkins Front-End-Anwendungen mit kontinuierlicher Integration und kontinuierlicher Bereitstellung erstellt

Einführung:
In der heutigen Internetentwicklung sind kontinuierliche Integration und kontinuierliche Bereitstellung zu wichtigen Mitteln für Entwicklungsteams geworden, um die Effizienz zu verbessern und das Produkt sicherzustellen Qualität. Als beliebtes Front-End-Framework kann React uns in Kombination mit Jenkins, einem leistungsstarken Tool für die kontinuierliche Integration, eine praktische und effiziente Lösung für die Erstellung von Front-End-Anwendungen für kontinuierliche Integration und kontinuierliche Bereitstellung bieten. In diesem Artikel wird detailliert beschrieben, wie React und Jenkins für die kontinuierliche Integration verwendet werden, wie die automatische Bereitstellung über Jenkins implementiert wird, und entsprechende Codebeispiele werden angegeben.

1. Schritte der kontinuierlichen Integration

1. Installieren Sie Jenkins
   Laden Sie Jenkins herunter und installieren Sie es, wählen Sie die geeignete Installationsmethode entsprechend der Plattform und stellen Sie sicher, dass Jenkins erfolgreich ausgeführt wird.
2. Jenkins-Job erstellen
   Erstellen Sie einen neuen Job in Jenkins, wählen Sie „Ein Free Style-Softwareprojekt erstellen“ und geben Sie den Namen des Jobs ein.
3. Quellcodeverwaltung konfigurieren
   Wählen Sie auf der Jobkonfigurationsseite das entsprechende Quellcodeverwaltungstool wie Git oder SVN aus und konfigurieren Sie die Warehouse-Adresse, den Benutzernamen und das Passwort usw.
4. Konfigurieren Sie den Build-Trigger
   Konfigurieren Sie auf der Jobkonfigurationsseite den Build-Trigger. Sie können wählen, ob der Build regelmäßig oder bei Codeänderungen ausgelöst werden soll.
5. Build-Schritte konfigurieren
   Konfigurieren Sie auf der Jobkonfigurationsseite die Build-Schritte. Für React-Anwendungen können wir zum Erstellen Tools wie npm oder Yarn verwenden. Fügen Sie im Abschnitt „Build“ Schritte zum Ausführen von Befehlen hinzu, z. B. das Ausführen der Befehle „yarn install“ und „yarn build“ in der Shell.
6. Speichern Sie den Job und führen Sie ihn aus
   Nachdem die Konfiguration abgeschlossen ist, speichern Sie den Job und führen Sie ihn aus. Jenkins ruft dann automatisch den Code ab, installiert Abhängigkeiten und erstellt das Projekt.

2. Schritte der kontinuierlichen Bereitstellung

1. Installieren Sie das Jenkins-Plug-in
   Installieren Sie das entsprechende Plug-in in Jenkins, z. B. „Publish Over SSH“, um die Remote-Bereitstellung zu unterstützen.
2. Serverinformationen konfigurieren
   Konfigurieren Sie in der globalen Konfiguration von Jenkins die relevanten Informationen des Remote-Servers, einschließlich Hostname, Benutzername, Passwort usw.
3. Ändern Sie die Build-Schritte
   Ändern Sie auf der Jobkonfigurationsseite die Build-Schritte und fügen Sie einen Bereitstellungsschritt hinzu. Verwenden Sie das Plug-in „Publish Over SSH“, um den Pfad zum Remote-Server und die Datei-Upload-Methode zu konfigurieren. Sie können beispielsweise den SCP-Befehl verwenden, um das Build-Produkt in ein angegebenes Verzeichnis auf dem Server hochzuladen.
4. Speichern und führen Sie den Job aus
   Nachdem die Konfiguration abgeschlossen ist, speichern Sie den Job und führen Sie ihn aus. Jenkins erstellt automatisch das Projekt und stellt das Build-Produkt auf dem Remote-Server bereit.

3. Codebeispiel
Das Folgende ist ein Beispielcode für eine Front-End-Anwendung mit kontinuierlicher Integration und kontinuierlicher Bereitstellung, die mit React und Jenkins erstellt wurde:

// .jenkinsfile

pipeline {
    agent any
    stages {
        stage('Clone') {
            steps {
                git 'https://github.com/your-repo.git'
            }
        }
        stage('Build') {
            steps {
                sh 'yarn install'
                sh 'yarn build'
            }
        }
        stage('Deploy') {
            steps {
                publishOverSSH server: 'your-server', 
                               credentialsId: 'your-credential', 
                               transfers: [transferSet(sourceFiles: 'dist/*', 
                               removePrefix: 'dist', remoteDirectory: '/var/www/html')]
            }
        }
    }
}

Im obigen Code wird ein dreistufiger Prozess mithilfe von definiert Jenkins-Pipeline-Plug-in. Die Pipelines klonen Code, erstellen und stellen ihn bereit. In der Build-Phase wird Garn zum Installieren und Erstellen von Abhängigkeiten verwendet, und in der Bereitstellungsphase wird das Plug-In „Publish Over SSH“ verwendet, um das Build-Produkt auf den angegebenen Serverpfad hochzuladen.

Fazit:
Durch die Einleitung dieses Artikels haben wir gelernt, wie man mit React und Jenkins Front-End-Anwendungen für kontinuierliche Integration und kontinuierliche Bereitstellung erstellt. Bei der kontinuierlichen Integration können wir Jenkins Job so konfigurieren, dass er den Code automatisch abruft, Abhängigkeiten installiert und das Projekt erstellt. Bei der kontinuierlichen Bereitstellung können wir das Jenkins-Plug-in verwenden, um das Build-Produkt automatisch auf dem Remote-Server bereitzustellen. Auf diese Weise können wir die Effizienz und Qualität der Front-End-Entwicklung erheblich verbessern, sodass sich das Team stärker auf die Geschäftsentwicklung konzentrieren kann, gleichzeitig schnell auf Probleme reagieren und diese beheben und ein besseres Benutzererlebnis bieten kann.

Das obige ist der detaillierte Inhalt vonWie Sie mit React und Jenkins Front-End-Anwendungen für kontinuierliche Integration und kontinuierliche Bereitstellung erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!