DEV Community

Zane
Zane

Posted on

Building an Efficient Jenkins + Docker + Vue Project Automated Deployment Environment

#vue #jenkins #docker #devops

Highlights

  • Custom Shell scripts make controlling the integrated deployment environment more convenient and flexible.
  • If the server is replaced, the workload for redeployment is relatively small.

Preparations

First, you need to have a server. I used an Alibaba Cloud ECS instance in the East China region. There are plenty of tutorials online for purchasing a server. After the purchase, you will have a public IP and a password to log into the server via SSH.

If you are not familiar with Docker, I recommend checking out its documentation first. Docker containers are like shipping containers on a cargo ship. Each container holds its own goods and doesn’t affect the others. For example, a Redis service and a MongoDB service can each be placed in their own container. These containers rely on an execution environment, which Docker calls an Image. Each container manages its own lifecycle.

Jenkins is an open-source software project developed in Java, mainly used for continuous integration. Essentially, it allows you to pre-write scripts, and once these scripts are successfully debugged, they can be automatically executed for future deployments without modification.

Installing Docker

Reference Documentation

Uninstalling Old Versions 

$ sudo apt-get remove docker docker-engine docker.io
Enter fullscreen mode Exit fullscreen mode

Installing via APT

Since APT sources use HTTPS to ensure that software is not tampered with during download, we need to add the HTTPS transport package and CA certificates first.

$ sudo apt-get update
Enter fullscreen mode Exit fullscreen mode 
$ sudo apt-get install 
    apt-transport-https \
    ca-certificates \
    curl \
    software-properties-common
Enter fullscreen mode Exit fullscreen mode

Given the network issues in China, it is strongly recommended to use domestic sources. For official sources, see the comments.

To verify the legitimacy of the downloaded packages, add the GPG key for the software source.

$ curl -fsSL https://mirrors.ustc.edu.cn/docker-ce/linux/ubuntu/gpg | sudo apt-key add -

# Official Source
# $ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
Enter fullscreen mode Exit fullscreen mode

Next, add the Docker software source to source.list:

$ sudo add-apt-repository \
    "deb [arch=amd64] https://mirrors.ustc.edu.cn/docker-ce/linux/ubuntu \
    $(lsb_release -cs) \
    stable"

# Official Source
# $ sudo add-apt-repository \
    # "deb [arch=amd64] https://download.docker.com/linux/ubuntu \
    # $(lsb_release -cs) \
    # stable"
Enter fullscreen mode Exit fullscreen mode

The above command adds the stable version of the Docker CE APT source. If you need the test or nightly build versions, change stable to test or nightly.

Installing Docker CE

Update the APT package cache and install Docker CE:

$ sudo apt-get update

$ sudo apt-get install docker-ce
Enter fullscreen mode Exit fullscreen mode

Installing Automatically via Script

For testing or development environments, Docker provides a convenient installation script to simplify the process. On Ubuntu systems, you can use this script:

$ curl -fsSL get.docker.com -o get-docker.sh

$ sudo sh get-docker.sh --mirror Aliyun
Enter fullscreen mode Exit fullscreen mode

Running this command will automatically prepare everything and install the Edge version of Docker CE on your system.

Starting Docker CE 

$ sudo systemctl enable docker

$ sudo systemctl start docker
Enter fullscreen mode Exit fullscreen mode

Creating the Docker User Group

By default, Docker commands communicate with the Docker engine using a Unix socket. Only the root user and users in the Docker group can access the Docker engine's Unix socket. For security reasons, it is generally not recommended to use the root user directly on a Linux system. A better approach is to add users who need to use Docker to the Docker user group.

Create the Docker group:

$ sudo groupadd docker
Enter fullscreen mode Exit fullscreen mode

Add the current user to the Docker group:

$ sudo usermod -aG docker $USER
Enter fullscreen mode Exit fullscreen mode

Log out and log back in, then test Docker.

Testing Docker Installation 

$ docker run hello-world

Unable to find image 'hello-world:latest' locally
latest: Pulling from library/hello-world
d1725b59e92d: Pull complete
Digest: sha256:0add3ace90ecb4adbf7777e9aacf18357296e799f81cabc9fde470971e499788
Status: Downloaded newer image for hello-world:latest

Hello from Docker!
This message shows that your installation appears to be working correctly.

To generate this message, Docker took the following steps:
 1. The Docker client contacted the Docker daemon.
 2. The Docker daemon pulled the "hello-world" image from Docker Hub.
    (amd64)
 3. The Docker daemon created a new container from that image, which runs the
    executable that produces the output you are currently reading.
 4. The Docker daemon streamed that output to the Docker client, which sent it
    to your terminal.

To try something more ambitious, you can run an Ubuntu container with:
 $ docker run -it ubuntu bash

Share images, automate workflows, and more with a free Docker ID:
 https://hub.docker.com/

For more examples and ideas, visit:
 https://docs.docker.com/get-started/
Enter fullscreen mode Exit fullscreen mode

If you see the above output, the installation was successful.

Image Acceleration

If you find that pulling Docker images is very slow, you can configure Docker's domestic image acceleration.

Alibaba Cloud Mirror Acceleration

Installing Docker Compose

Reference Documentation

Run this command to download the latest stable version of Docker Compose: 

$ sudo curl -L "https://github.com/docker/compose/releases/download/1.25.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
Enter fullscreen mode Exit fullscreen mode

Apply executable permissions to the binary: 

$ sudo chmod +x /usr/local/bin/docker-compose
Enter fullscreen mode Exit fullscreen mode

Check the version: 

$ docker-compose --version
Enter fullscreen mode Exit fullscreen mode

Installing Jenkins

To install Jenkins, I chose to use Docker Compose. Docker Compose automates Docker operations, allowing you to complete all complex Docker operations with a single command.

First, create a directory structure on the server (this is just a demo): 

/home/jenkins
     - docker-compose.yml
     - jenkins-home
Enter fullscreen mode Exit fullscreen mode

Next, write a docker-compose.yml file to install Jenkins: 

version: '3'    # Specifies the format of the docker-compose.yml file
services:       # Collection of multiple containers
  docker_jenkins: 
    user: root  # Using root to avoid some permission issues
    restart: always # Restart policy
    image: jenkins/jenkins:lts  # Specifies the image to use, in this case, LTS (Long-Term Support)
    container_name: jenkins # Container name
    ports:      # Exposed ports
      - '8080:8080'
      - '50000:50000'
    volumes:    # Volume mount paths
      - /home/jenkins/jenkins_home/:/var/jenkins_home  # Mounts the directory we created to Jenkins's home directory inside the container
      - /var/run/docker.sock:/var/run/docker.sock
      - /usr/bin/docker:/usr/bin/docker     # Allows the use of Docker commands inside the container
      - /usr/local/bin/docker-compose:/usr/local/bin/docker-compose # Allows the use of Docker Compose commands inside the container
Enter fullscreen mode Exit fullscreen mode

Navigate to the Jenkins directory and execute:

$ docker-compose up -d
Enter fullscreen mode Exit fullscreen mode

This command will automatically pull the image and configure everything.

If everything goes well, you can now access your server at http://your-server-address:port and see the following interface:

Open the Jenkins directory you created and navigate to jenkins-home:

/home/jenkins/jenkins-home
Enter fullscreen mode Exit fullscreen mode

Enter the secrets directory:

$ cat initialAdminPassword
Enter fullscreen mode Exit fullscreen mode

Copy the content from this file and paste it into the administrator password field.

Next, install two plugins:

NodeJS Plugin
Publish Over SSH
Enter fullscreen mode Exit fullscreen mode


Scroll down to the bottom.




Start Creating Project Deployment

Official Reference

1. First, create an nginx.conf file in the root directory of your project: 

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
  worker_connections  1024;
}
http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;
  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
  '$status $body_bytes_sent "$http_referer" '
  '"$http_user_agent" "$http_x_forwarded_for"';
  access_log  /var/log/nginx/access.log  main;
  sendfile        on;
  keepalive_timeout  65;
  server {
    listen       80;
    server_name  www.lovelp.xin;  # Domain name
    location / {
      root   /app;  # Directory location
      index  index.html;
      try_files $uri $uri/ /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

2. Create a Dockerfile in the root directory of your project: 

FROM node
WORKDIR /app

COPY package*.json ./
RUN npm install -g cnpm --registry=https://registry.npm.taobao.org
RUN cnpm install
COPY ./ /app
RUN npm run build:prod

FROM nginx
RUN mkdir /app
COPY --from=0 /app/dist /app
COPY nginx.conf /etc/nginx/nginx.conf
Enter fullscreen mode Exit fullscreen mode

3. Create a setup.sh script in the root directory of your project to help execute commands: 

#!/usr/bin/env bash
image_version=`date +%Y%m%d%H%M`;
# Stop the shop_admin container
docker stop shop_admin || true;
# Remove the shop_admin container
docker rm shop_admin || true;
# Remove the shop/admin image
docker rmi --force $(docker images | grep shop/admin | awk '{print $3}')
# Build the shop/admin:$image_version image
docker build . -t shop/admin:$image_version;
# List the images
docker images;
# Create a container named shop_admin from the shop/admin image
docker run -p 9527:80 -d --name shop_admin shop/admin:$image_version;
# View logs
docker logs shop_admin;
# Remove images generated during the build process
docker rmi $(docker images -f "dangling=true" -q)
# Automatically clean up space
docker system prune -a -f
Enter fullscreen mode Exit fullscreen mode

4. Finally, create a project on Jenkins:

Finally, you can happily click on Build Now.

Top comments (9)

Collapse
 
denys_bochko profile image
Denys Bochko •

I am just curious why to use jenkins? I think it is an old tech. Gitlab offers pipelines that work very well for deployments of back-end and front-end apps. One less app to install/configure and maintain.
The setup is one yml file in the project that tells gitlab what to do. I deploy one of my vue projects that way.

Collapse
 
zand profile image
Zane •

For simpler projects with fewer requirements, using GitLab CI/CD directly is often more convenient and faster. However, we opt for Jenkins because its extensive plugin ecosystem and compatibility with our architecture make it a better fit for our needs.

Collapse
 
denys_bochko profile image
Denys Bochko •

The reason I asked is that a lot of teams use it because that is the only thing they know. But in your case, it seems that it's all been thought through.
Which cloud are you using with that setup, if you don't mind me asking?

Collapse
 
martinbaun profile image
Martin Baun •

This is great! What's your tech-stack?

Collapse
 
zand profile image
Zane •

As for the front-end technology stack, there are many.

Collapse
 
zand profile image
Zane •

Our current deploy technology stack is gitlab + jenkins + k8s.

Collapse
 
martinbaun profile image
Martin Baun •

Pretty cool :)

Collapse
 
vkinsane profile image
Vishal Khandate •

Fantastic guide on setting up an automated deployment pipeline with Jenkins, Docker, and Vue! This is a must-read for anyone looking to streamline their DevOps workflow.

Collapse
 
zand profile image
Zane •

Thank you for your recognition.

Read next

code42cate profile image

Day 6: Docker Image Layers

Jonas Scholz -

haroldo89 profile image

Comandos Básicos de Vagrant

Andres C -

allhandsondeck profile image

An opinionated testing approach for VueJS

allhandsondeck -

yutee_okon profile image

Docker to the Rescue: Deploying React And FastAPI App With Monitoring

Utibe -