Home > Article > Web Front-end > 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.
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:
Restart Jenkins after installation.
Next, we will create a Jenkins workflow to build and deploy the Vue application. Follow the steps below:
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' ] } } }
Before deploying your Vue application to a Docker container, you need to install Docker and docker-compose on the server. Follow these steps:
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!