jenkins deploys vue to docker

Jenkins is a continuous integration (CI) and continuous delivery (CD) tool that plays a vital role in the software development process. Docker is a popular containerization technology that can easily deploy applications.

In this article, we will introduce how to use Jenkins to deploy a Vue application into a Docker container. We'll walk you through this process step by step.

1. Configuring Jenkins

First, you need to install some necessary plugins through the Jenkins interface. Go into "Manage Jenkins" and select "Plugin Management", then select the "Optional Plugins" tab. Install the following plug-ins here:

• Docker plug-in
• NodeJS plug-in
• HTML Publisher plug-in

Restart Jenkins after installation.

2. Create a Jenkins workflow

Next, we will create a Jenkins workflow to build and deploy the Vue application. Follow the steps below:

• Go to the Jenkins homepage and select "New Task".
• Enter the task name and select the "Pipeline" type.
• In the "Advanced Project Options" section, select the "Use Groovy DSL" syntax and enter the following code in the "DSL Script" field:

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'
      ]
    }
  }
}

• This Jenkins script Contains three workflow steps: Build, Dockerize and Release. Here, we first perform the build step using the "node" image and run the "npm install" and "npm run build" commands in that step. This command builds a Vue application and converts it into static HTML, CSS, and JS files.
  In the Dockerize stage, we build a Docker image that uses the static files generated in the previous step. We also label the image with a version using the "BUILD_ID" environment variable.
• Finally, in the "publish" step, we push the Docker image to Docker Hub. In this example, we did not set Docker credentials. In a production environment, you need to set up Docker credentials to connect to the Docker hosting service.

3. Configuring Docker

Before deploying your Vue application to a Docker container, you need to install Docker and docker-compose on the server. Follow these steps:

• Download and install Docker.
• Download and install docker-compose.

After installing Docker and docker-compose, you now need to deploy the Docker image just built in Jenkins to the system. You can use the following docker-compose file to define a service that consumes the image pushed to Docker Hub from the above Jenkins task.

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

Save this file as docker-compose.yml and upload it to the server. Start the service using Docker Compose:

docker-compose up -d

This will start deploying the Vue application. Now you can access the application from your web browser (it is on port 80 by default). In this way, you deployed the Vue application into the Docker container via Jenkins.

Conclusion

In this article, we covered how to deploy a Vue application into a Docker container. Using the Jenkins continuous integration and deployment tool, you can easily build and deploy Vue applications. We also covered how to use Docker Compose to host running containers on a server. Let's start building and deploying a Vue application using Jenkins and Docker.

The above is the detailed content of jenkins deploys vue to docker. For more information, please follow other related articles on the PHP Chinese website!