Automated front-end deployment based on Docker, Nginx and Jenkins

Preliminary preparation

• A cloud server based on CentOS 7 system.
• The Vue-CLI based project is deployed on GitLab.

Deployment Target

Build a Docker+Nginx+Jenkins environment to implement the front-end automated deployment process. The specific implementation effect is that developers develop locally, push and submit code to the specified branch, and automatically trigger Jenkins for continuous integration and automated deployment. You can set up an email notification after the deployment is completed, indicating whether the deployment is successful or not. If successful, the packaged files will be uploaded to the server and the page will be displayed through the nginx reverse proxy. If it fails, the relevant error log will be printed.

Friendly reminder: Try to choose Alibaba Cloud or Tencent Cloud servers. Jenkins may not start normally when deployed on other servers!

Docker environment construction

Connect to cloud server

You can choose the online terminal provided by Alibaba Cloud or Tencent Cloud (which may sometimes get stuck), but it is recommended to use a local computer to connect. Enter the connection command in the terminal:

ssh root@your server public network address

After that, enter the cloud server password, and the command displays the following results:

Docker has two branch versions: Docker CE and Docker EE, namely community edition and enterprise edition. This tutorial is based on installing Docker CE on CentOS 7.

Install Docker Environment

1. Install Docker's dependency libraries.

yum install -y yum-utils device-mapper-persistent-data lvm2

2. Add the software source information of Docker CE.

sudo yum-config-manager --add-repo \ https://download.docker.com/linux/centos/docker-ce.repo

3. Install Docker CE.

sudo yum install docker-ce

4. Start the Docker service.

sudo systemctl enable docker // Set to start automatically at boot sudo systemctl start docker // Start docker

Docker Install Docker Compose

Docker Compose is a tool for defining and running multi-container Docker applications. With Compose, you use a YML file to configure all the services your application needs. Then, using a single command, you can create and start all services from the YML file configuration. Download docker-compose:

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

After the installation is complete, elevate permissions:

sudo chmod +x /usr/local/bin/docker-compose

Enter docker-compose -v to display the following page:

Docker installs Nginx and Jenkins services

Install Nginx and Jenkins

The Docker image pulls the Nginx and Jenkins environment commands as follows:

docker pull nginx
docker pull jenkins/jenkins:lts

After the installation is complete, execute docker images to clearly see the images currently under Docker.

docker images 

Nginx and Jenkins directory writing

For ease of management, we aggregate Nginx and Jenkins into one file directory under Docker. The directory structure is as follows:

+ compose
- docker-compose.yml // docker-compose execution file + nginx 
+ conf.d
- nginx.conf // Nginx configuration + jenkins
- jenkins_home // Jenkins mount volume + webserver 
-static //Store the dist file after front-end packaging

The web server directory is generated later and will not be discussed here. What needs to be created manually are the Compose, Nginx, and Jenkins directories and their subordinate files, the most important of which are the configurations of the docker-compose.yml file and the nginx.conf file. It is recommended that the above folders be placed under the root directory. You can place them under the home folder or create a new folder separately.

docker-compose.yml file configuration

version: '3'
services: # Collection docker_jenkins:
user: root # To avoid some permission issues, I use root here
restart: always # Restart mode image: jenkins/jenkins:lts # Specify the image used by the service. Here I chose LTS (Long Term Support)
container_name: jenkins #Container name ports: #Exposed port definition - 8080:8080
  - 50000:50000
volumes: # Volume mount path - /home/jenkins/jenkins_home/:/var/jenkins_home # This is the directory we created at the beginning mounted to the jenkins_home directory in the container - /var/run/docker.sock:/var/run/docker.sock
  - /usr/bin/docker:/usr/bin/docker # This is so that we can use the docker command in 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/dist:/usr/share/nginx/html

nginx.conf file configuration

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

After the above two files are configured, you need to enter the /home/compose directory and enter the following command to start the environment:

docker-compose up -d

Enter docker ps -a to view the status of the container:

The status is displayed as up, and the port number behind it is displayed as above, which is a normal status. Enter the public IP address of your cloud server plus the port number 8080 in the browser to display the following page:

Note:

• Before this step, remember to open the cloud server's port 80 security group (you can refer to the one-click activation function provided), but in addition to this, it is recommended to manually add the security group for port 8080.
• Port 80: It is the port opened for HTTP (HyperText Transport Protocol).
• Port 8080: is used for WWW proxy service, which enables web browsing.
  

The password required in the above figure is in /home/jenkins/jenkins_home/secrets/initAdminPassword in volumes in docker-compose.yml. It can be obtained by the following command:

cat /home/jenkins/jenkins_home/secrets/initialAdminPassword

Install Jenkins plugin

After entering the page, select Recommended Installation.

After the installation is complete, select the Manage Jenkins option on the left. As shown in the following figure:

In Jenkins, search Manage Plugins for the following plugins: GitLab, Publish Over SSH, Nodejs, and install them.

After the installation is complete, configure the Nodejs environment and SSH parameters. On the homepage, select global tool Configuration>NodeJS, select automatic installation and the corresponding Nodejs version number. After the selection is successful, click Save.

Configure SSH information, Manage Jenkins>configure System fill in the relevant information of the server:

Connecting Jenkins and GitLab

Generate Keys

Execute the following command in the root directory:

ssh-keygen -t rsa

Generally, the default is to enter twice, as shown in the following figure:

Use cd ~/.ssh to view the generated file. Copy the generated key id_rsa and paste it into the credentials in Jenkins. As shown in the figure:

Log in to GitLab and configure the id_rsa.pub public key in GitLab:

New Project

After preparation, start a new task and select New item>Freestyle project to build a free-style project.

Source code management

After the creation is completed, configure the Git information in the source code management, and select the credentials we just added in credentials.

Build Triggers

In the build trigger, select the time to trigger the build. You can choose your teammates' hooks, such as when pushing code or when merging requests:

Click Advanced Options to find secret token>Generate to generate a token value:

After successful configuration, you also need to add the corresponding hook in GitLab. Note the webhookURL (outlined in red) and secret token value in the above image, and configure them in GitLab.

Build environment and build configuration

After completing the above configuration, Jenkins is associated with GitLab. When you push files locally, it will be automatically built. You can access the modified project by accessing the public IP address of the cloud server. You can also build it manually on Jenkins, as shown in the figure:

Conclusion

Finally, the simple online deployment project is over. Students who have domain names can use cloud resolution to map the public IP address, so that they can use more recognizable domain names for project development and launch.

This is the end of this article about front-end automated deployment based on Docker, Nginx and Jenkins. For more information about automated deployment of Docker, Nginx and Jenkins, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!