preface

With the development of DevOPS, front-end deployment becomes simpler and more controllable. In this paper, docker🐳+ Nginx + Jenkins is used to realize front-end automatic deployment process. The specific implementation effect is that developers develop locally, develop push and submit codes to specified branches. 😊 automatically triggers Jenkins for continuous integration and automated deployment. When the deployment is complete, you will receive an email notification, and when the build is successful, you will upload the packaged file to the server and display the page through the Nginx reverse proxy. An error log is printed if the build fails. Docker 🐳 is a very important part of our entire deployment scheme. Docker constructs the image to ensure the unification of the environment 🐂🍺.

Deployment target

  • Build docker🐳, nginx, Jenkins environment
  • Configuration docker – compose. Yaml

Set up the environment

Centos7 cloud server is used in this paper

The docker environment

If everyone the docker, docker – compose have not understand of place, can go to catch up with this knowledge, this is not detailed here.

Everyone interested can have a look at my article xiaobai learning docker as long as this article is enough (suggested collection)

Before installing Docker, we will first understand the version definition of Docker, which is conducive to our later development to choose and use the appropriate version of Docker. For Docker, it is divided into two series:

  • Community edition (ce)
  • Enterprise edition (ee)

The difference between the community edition and the Enterprise edition is that the enterprise edition charges for additional services.

 sudo yum install yum-utils device-mapper-persistent-data lvm2
 sudo yum-config-manager --add-repo \
   https://download.docker.com/linux/centos/docker-ce.repo
 sudo yum install docker-ce
Copy the code

If there is no accident, enter docker -v and the page below will represent success


Sudo systemctl enable docker sudo systemctl start dockerCopy the code

Install the docker – compose

A complete application is usually not composed of a container, but a group of containers through containers. Setting up a container group requires too many commands and, more importantly, too many dependencies between applications and containers. It is a huge operation. Docker-compose is a solution to the problem of managing multiple containers.

Sudo curl - L "https://github.com/docker/compose/releases/download/1.24.0/docker-compose-$(uname - s) - $(uname -m)" - o /usr/local/bin/docker-composeCopy the code

Enter the following command to install docker-compose: docker-compose

sudo chmod +x /usr/local/bin/docker-compose
Copy the code

After executing the preceding command, enter docker-Componse -v. The following page is displayed


Install Jenkins and the Nginx environment

The Jenkins and Nginx environments are fetched from the remote Docker image library

docker pull jenkins/jenkins:lts
docker pull nginx 
Copy the code

It is recommended to install the Jenkins/Jenkins image here. The Jenkins image is officially maintained by Docker and has not been maintained for a long time. Jenkins/Jenkins is officially maintained by Jenkins. Update frequency is very accurate. LTS means long-term support.

Run it after the installation is completedocker imagesYou can clearly see the existing image under the current docker.

Write the docker-compose directory

The directory structure here can be understood as configuration files and mounted volumes required to build an environment, which is similar to building a software development project. It is recommended to gather the components of Docker Compose project into a file directory, which is more conducive to our management and migration. The directory structure is as follows 👉

// docker-compose execution file + nginx + conf.d -nginx. conf // nginx configuration + jenkins_home // Jenkins mount volume + webserver-static // Store dist fileCopy the code

For simplicity, my directory structure is placed directly under home, or you can create a new directory.


Write the docker – compose. Yml

Version: '3' services: # set docker_Jenkins: user: root Jenkins/Jenkins: LTS # Specifies the image used by the service. Here I select LTS (long term support) container_name: Jenkins # Container name ports: Volumes: 8080:8080-505:50000 Jenkins_home :/var/jenkins_home :/var/jenkins_home :/var/jenkins_home The/var/run/docker. The sock: / var/run/docker. The sock - / usr/bin/docker: / usr/bin/docker # in order to we can use the docker command - within the container /usr/local/bin/docker-compose:/usr/local/bin/docker-compose docker_nginx: restart: always image: nginx container_name: nginx ports: - 8090:80 - 80:80 - 433:433 volumes: - /home/nginx/conf.d/:/etc/nginx/conf.d - /home/webserver/static/jenkins/dist/:/usr/share/nginx/htmlCopy the code

Write nginx. Conf

server{
  listen  80;
  root /usr/share/nginx/html;
  index index.html index.htm;
}
Copy the code

Start the docker – compose

Go back to the compose directory

docker-compose up -d
Copy the code

The inputdocker psLook at the containerAs shown in the figure above, up indicates that the browser is enabled, and port 8080 is added to the BROWSER IP address

Watch your step. Your password’s not there/var/jenkins/jenkins_home/Next, in the original configurationdocker-compose.ymIn the lvolumesIn the/home/jenkins/jenkins_home/

Get the password to enter, installRecommended plug-ins

Install Jenkins plugins

To do this, prepare a VUE-CLI-generated VUE project and put the project into gitLab.

  • Jenkins installs the necessary plug-insgitlab,Publish Over SSH,nodejs

Click Direct Install to install the plug-in. Configure the NodeJS environment and SSH parameters on the home pageglobal tool Configuration>NodeJSSelect automatic installation and the nodeJS version number, and click SaveConfigure SSH information.Manage Jenkins>configure SystemEnter the server information

Jenkins is integrated with GitLab

Generate the key

  • Generate an SSH key on the server (not necessary if it already exists)

Generation command

ssh-keygen -t rsa
Copy the code

The private key to be generatedid_rsaAdd to Jenkins credentials

Log on to GitLab, ingitlabIn the configurationid_rsa.pubThe public key


New project

When ready to create a new task, select New Item > Freestyle Project to build a free-style project.


Source code management

When the creation is complete, configure git information in source management, and the credentials we just added are selected


Build trigger

In the build trigger select when we trigger the build, you can select teammates’ hooks, such as push code, Merge Request, etc.

Click on theAdvanced optionsfindsecret token>GenerateGenerates a token value

Once you’re configured here, you need to go togitlabAdd the corresponding hook to. Write down the figure abovewebhookURL(circled in red) andsecret tokenValue to gitLab for configuration.


Build environment

Build environment select node environment

build

Configure the node packaging command, upload the compressed dist file to the remote server after packaging.remote directoryIs removedstaticThe webserver directory over here is the directory I started writing it inAt this point, our configuration is also an end, click Save. Modify the code,git push, you will find that the project has automatically started building 😊


❤️ thank you

1. If the article is helpful to you, please move your little hands to point out a praise 👍, your praise is the power of my creation.

2. Pay attention to the public account “front-end elite”! Push high-quality articles from time to time.