Jenkins stellt Vue für Docker bereit

Jenkins ist ein Tool für kontinuierliche Integration (CI) und kontinuierliche Bereitstellung (CD), das eine wichtige Rolle im Softwareentwicklungsprozess spielt. Docker ist eine beliebte Containerisierungstechnologie, mit der Anwendungen einfach bereitgestellt werden können.

In diesem Artikel erklären wir, wie man mit Jenkins eine Vue-Anwendung in einem Docker-Container bereitstellt. Wir werden diesen Prozess Schritt für Schritt behandeln.

1. Jenkins konfigurieren

Zuerst müssen Sie einige notwendige Plugins über die Jenkins-Schnittstelle installieren. Gehen Sie zu „Jenkins verwalten“ und wählen Sie „Plugin-Verwaltung“ und dann die Registerkarte „Optionale Plugins“. Installieren Sie hier die folgenden Plugins:

• Docker-Plugin
• NodeJS-Plugin
• HTML Publisher-Plugin

Starten Sie Jenkins nach der Installation neu.

2. Erstellen Sie einen Jenkins-Workflow.

Als Nächstes erstellen wir einen Jenkins-Workflow zum Erstellen und Bereitstellen der Vue-Anwendung. Befolgen Sie die folgenden Schritte:

• Gehen Sie zur Jenkins-Homepage und wählen Sie „Neue Aufgabe“.
• Geben Sie den Aufgabennamen ein und wählen Sie den Typ „Pipeline“.
• Wählen Sie im Abschnitt „Erweiterte Projektoptionen“ die Syntax „Use Groovy DSL“ und geben Sie den folgenden Code in das Feld „DSL-Skript“ ein:

def app

pipeline {
  agent {
    docker {
      image 'node'
    }
  }
  stages {
    stage('Build') {
      steps {
        sh 'npm install'
        sh 'npm run build'
      }
    }
    stage('Dockerize') {
      steps {
        sh 'docker build -t my-vue-app .'
        script {
          app = docker.build("my-vue-app:${env.BUILD_ID}")
        }
      }
    }
    stage('Publish') {
      steps {
        script {
          app.push()
        }
      }
    }
  }
  post {
    always {
      htmlpublisher target : [
        allowMissing : false,
        alwaysLinkToLastBuild : true,
        keepAll : true,
        reportDir : 'dist',
        reportFiles : 'index.html',
        reportName : 'HTML Report'
      ]
    }
  }
}

• Dieses Jenkins-Skript enthält drei Workflow-Schritte: Build, Dockerize und Freigeben . Hier führen wir zunächst den Build-Schritt mit dem „node“-Image durch und führen in diesem Schritt die Befehle „npm install“ und „npm run build“ aus. Dieser Befehl erstellt eine Vue-Anwendung und konvertiert sie in statische HTML-, CSS- und JS-Dateien.
  In der Dockerize-Phase erstellen wir ein Docker-Image, das die im vorherigen Schritt generierten statischen Dateien verwendet. Wir kennzeichnen das Bild auch mit einer Version, indem wir die Umgebungsvariable „BUILD_ID“ verwenden.
• Abschließend pushen wir im Schritt „Veröffentlichen“ das Docker-Image in den Docker Hub. In diesem Beispiel haben wir keine Docker-Anmeldeinformationen festgelegt. In einer Produktionsumgebung müssen Sie Docker-Anmeldeinformationen einrichten, um eine Verbindung zum Docker-Hosting-Dienst herzustellen.

3. Docker konfigurieren

Bevor Sie Ihre Vue-Anwendung in einem Docker-Container bereitstellen, müssen Sie Docker und Docker-Compose auf Ihrem Server installieren. Befolgen Sie diese Schritte:

• Laden Sie Docker herunter und installieren Sie es.
• Laden Sie Docker-Compose herunter und installieren Sie es.

Nach der Installation von Docker und Docker-Compose müssen Sie nun das gerade in Jenkins erstellte Docker-Image auf dem System bereitstellen. Sie können die folgende Docker-Compose-Datei verwenden, um einen Dienst zu definieren, der das von der oben genannten Jenkins-Aufgabe an Docker Hub übertragene Image nutzt.

version: '3'
services:
  web:
    image: my-vue-app
    ports:
      - "80:80"
    restart: always

Speichern Sie diese Datei als docker-compose.yml und laden Sie sie auf den Server hoch. Starten Sie den Dienst mit Docker Compose:

docker-compose up -d

Dadurch wird mit der Bereitstellung der Vue-Anwendung begonnen. Jetzt können Sie über Ihren Webbrowser auf die Anwendung zugreifen (standardmäßig befindet sie sich auf Port 80). Auf diese Weise haben Sie die Vue-Anwendung über Jenkins im Docker-Container bereitgestellt.

Fazit

In diesem Artikel haben wir behandelt, wie man eine Vue-Anwendung in einem Docker-Container bereitstellt. Mit dem kontinuierlichen Integrations- und Bereitstellungstool von Jenkins können Sie Vue-Anwendungen einfach erstellen und bereitstellen. Wir haben auch erläutert, wie Sie Docker Compose verwenden, um laufende Container auf einem Server zu hosten. Beginnen wir mit dem Erstellen und Bereitstellen einer Vue-Anwendung mit Jenkins und Docker.

Das obige ist der detaillierte Inhalt vonJenkins stellt Vue für Docker bereit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!