This is the first day of my participation in the August Challenge. For details, see:August is more challenging

preface

As for the front-end automation deployment, in fact, I have written a previous Jenkins front-end automation deployment, which is implemented by fully manual configuration of nginx, Jenkins, and various tool environment configuration. Recently, I plan to learn Docker, so THIS time I will use Docker to practice front-end automatic deployment.

Environment preparation and introduction

  • Server: CentOS 7.6
  • docker
  • docker-compose
  • Nginx mirror
  • Jenkins mirror
  • Gitee remote project: Easy to test, this time using code cloud

Install the Docker environment

  1. Install the Docker CE
sudo yum install docker-ce
Copy the code
  1. Start the Docker service
Sudo systemctl start docker // Start dockerCopy the code
  1. Check whether the installation is successful

docker -vViewing the version number

Install the docker – compose

Compose is a tool for defining and running multi-container Docker applications. With Compose, you can configure your application’s services using a YAML file. All services are then created and started from the configuration using a single command

Docker Compose an overview

  1. The installation
$sudo curl - L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname - s) - $(uname -m)" - o /usr/local/bin/docker-composeCopy the code
  1. Apply executable permissions to binary files
$ sudo chmod +x /usr/local/bin/docker-compose
Copy the code

3. Check whether the configuration is successful

Install the Nginx and Jenkins images

Install the Nginx image

docker pull nginx
Copy the code

Install Jenkins image

Viewing the Mirror List

docker search jenkins
Copy the code

The mirrorjenkinsci/blueocean(bon)

docker pull jenkinsci/blueocean
Copy the code

Look at mirror

After the installation, run the Docker images command to view the installed images

Configure directory writing

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

// docker-compose compose // docker-compose compose // nginx + conf.d - nginx.conf // nginx + jenkins_home // Jenkins mount volume + webserver-static // Store front-end packaged dist fileCopy the code

File configuration and create containers

docker-compose.yml

cd /home/compose
vim docker-compose.yml
Copy the code

nginx.conf

cd /home/nginx/conf.d
vim nginx.conf
Copy the code

Create a container

Create the container by running the command in the directory where the docker-compose. Yml file resides

Docker-compose up -d docker-compose stopCopy the code

Run Docker Ps to view the container

Associated gitee

Jenkins configuration

After the container starts, enter server IP address :8080 in the browser to access the Jenkins management page. Initialization work is ignored, as explained in the previous article.

The plug-in configuration

Enter plug-in Management

  1. Install Publish Over SSH Function: Publish the compiled output of the build to the server

  2. Install the Generic Webhook Trigger Plugin

Configure SSH Serve globally

The global tool configures Node.js

Create a Jenkins task and configure it

A new task

Task configuration – Source code management

Task configuration – Build triggers

  1. Select Generic Webhook Trigger in mode

  1. Configuration token

  1. Associated gitee

Add Webhook in the Gitee Project Management menu.

Task configuration – Build environment

Select node.js as configured in the global tool

Task configuration – Build

  1. Build selection executes the shell
  2. Tar the compiled product and save it for post-build operations

Task configuration – Post-build operations

  1. Put the tar package in the specified directory on the server
  2. Decompress the tar package and place the material in the nginx working directory

Test

Finally, select the application and save it in the local Git project to push the master branch, and you will find that the remote Jenkins has triggered automatic deployment

At the end

At this point, a set of simple docker front-end automation deployment is complete.

Compared with the traditional configuration of NGINx and Jenkins, using Docker can not only implement quickly, but also isolate the environment and avoid environmental dependence.

Technical reference: juejin.cn/post/684490…