This article was originally published at: github.com/mcuking/blo…

Practice project: github.com/mcuking/mob…

First of all, I would like to declare that this article is not original, but the author has recently studied the knowledge of front-end deployment, read some articles on Nuggets, and realized the automatic deployment of Github + Jenkins + Docker according to the actual operation of the article, and want to record the whole process, which will be copied from part of the following article.

Docker for the front-end combat tutorial

Docker Deployment Vue project

Jenkins+Docker Automated Deployment VUE project

Build docker+ Jenkins + Node.js automatic deployment environment from zero

The specific uses of Jenkins and Docker will not be described here, but if you want to know more about them, you can also read the recommended articles above.

Based on CentOS 7.6 system, the author introduces how to use Github + Jenkins + Docker to realize automatic package deployment of projects.

Docker installation

1. Install Docker and start Docker

Yum yum install docker -y yum install docker -y yum install docker -y Docker restart // Stop the docker service service docker stopCopy the code

2. Install the Docker-compose plug-in for orchestrating images

Docker-compose (docker-compose is currently 1.24.1, Readers can be modified according to the actual situation the latest version) curl -l https://github.com/docker/compose/releases/download/1.24.1/docker-compose- ` uname-s`-`uname -m` > /usr/local/bin/docker-compose // set permissions to chmod +x /usr/local/bin/docker-compose // Check the docker-compose version after installationCopy the code

Jenkins installation and configuration

1. The search for Jenkins

docker search jenkins
Copy the code

Note: Although the first one in the image above is an officially maintained version of Docker, it hasn’t been updated in a long time and is an outdated version. So here we’re going to install the second one, which is officially maintained by Jenkins.

2. Install the Jenkins

sudo docker run -d -u 0 --privileged --name jenkins -p 49003:8080 -v /root/jenkins_home:/var/jenkins_home jenkins/jenkins:latest
Copy the code

-d indicates running in the background. -u 0 indicates that the root account ID is passed to override the built-in account in the container. -v /root/jenkins_home:/var/jenkins_home maps the /var/jenkins_home directory in the docker container to the /root/jenkins_home directory on the host. — Name Jenkins –name Jenkins –name Jenkins –name Jenkins –name Jenkins –name Jenkins –name Jenkins –name Jenkins -P 49003:8080 maps port 8080 of the container to port 49003 of the host. — Privileged means to have the highest authority.

The entire command means: Run a Jenkins/Jenkins :latest container and name it jenkins_HOME. Overwrite the account in the container with root and grant the highest permissions. Map /var/jenkins_home of the container to /root/jenkins_home of the host, and map port 8080 of the container to port 49003 of the host

After execution is complete, wait for a few tens of seconds for the Jenkins container to start initialization. Enter http://your IP :49003 in your browser to check whether Jenkins has started successfully

If the following information is displayed, the startup is successful:

Run the following command to obtain the password and copy it to the input box in the preceding figure

cat /root/jenkins_home/secrets/initialAdminPassword
Copy the code

Go to the next page and select “Install recommended plug-ins”.

Jenkins’ default download address needs to be changed due to wall issues. In your browser on another TAB page, enter the IP http://your: 49003 / pluginManager/advanced, Modify the update site URL below for http://mirror.esuni.jp/jenkins/updates/update-center.json

Then restart the container and go to the initialization page again, which usually speeds up the download.

docker restart [docker container id]
Copy the code

Then create an administrator account.

In automatic deployment, you need to log in to the server using SSH to execute commands and the Node environment. Therefore, you need to download the Publish Over SSH and NodeJS plug-ins. You can choose System > Management Plug-ins > Optional Plug-ins to access the plug-ins, select them, and install them directly. As shown below:

Publish Over SSH: Publish Over SSH: Publish Over SSH: Publish Over SSH: Publish Over SSH: Publish Over SSH: Publish Over SSH: Publish Over SSH: Publish Over SSH As shown below:

Then click Test Configuration to verify login.

At this point Jenkins has completed the global configuration.

Connect Jenkins to Github

Create a project on GitHub. Using this project as an example, create nginx.conf and docker-comemess. yml files in the project root directory

nginx.conf

#user nobody;
worker_processes 1;
events {
  worker_connections 1024;
}
http {
  include    mime.types;
  default_type application/octet-stream;
  sendfile    on;
  #tcp_nopush on;
  #keepalive_timeout 0;
  keepalive_timeout 65;
  Use for gzip compression of front-end resources
  #gzip on;
  gzip on;
  gzip_min_length 5k;
  gzip_buffers   4 16k;
  # gzip_http_version 1.0;
  gzip_comp_level 3;
  gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
  gzip_vary on;
  server {
    listen 80;
    server_name localhost;
    # Front-end projects
    location / {
      index index.html index.htm;  # Add attributes.
      root /usr/share/nginx/html;  # site directory
      All static resources point to /index.html
      try_files $uri $uri/ /index.html;
    }

    error_page  500 502 503 504 /50x.html;
    location = /50x.html {
      root/usr/share/nginx/html; }}}Copy the code

docker-compose.yml

version: '3'
services:
  mobile-web-best-practice: The service name of the project
    container_name: 'mobile-web-best-practice-container' # container name
    image: nginx # select mirror
    restart: always
    ports:
      - 80: 80
    volumes:
      #~./nginx.conf is the host directory and /etc/nginx is the container directory
      - ./nginx.conf:/etc/nginx/nginx.conf # Mount nginx configuration
      Dist = /usr/ SRC /app = /usr/ SRC /app
      - ./dist:/usr/share/nginx/html/ # Mount the project
    privileged: true
Copy the code

If you copy nginx.conf and dist directly to the Docker image, you will need to repackage the image every time you modify the related files. You can use volumes to map a file on the host to a file on the container. If you need to change the related files, you don’t need to repackage the image.

Then create a new task in Jenkins, select build a Free Style software Project, and set the configuration as shown below.

The meanings of the two commands in the third figure are as follows:

The first part of the shell command is the build front-end project, which generates the dist directory under the project root

echo $PATH
node -v
npm -v
npm install
npm run build
Copy the code

The second part of the shell command is to log in to the server through SSH, construct the Docker image and run the container through docker-compose. Compared to using Docker directly, there is no need to stop deleting containers and rebuild new images when updating code.

cd /root/jenkins_home/workspace/mobile-web-best-practice \
&& docker-compose up -d
Copy the code

Finally, go back to the task page and click “Build Now” to build our project.

Implement automatic trigger packaging

One problem, however, is that when pushing code to the GitHub remote repository, you need to be able to trigger the build automatically, as follows.

1. Modify Jenkins security policy

Choose System Management > Global Security Configuration and perform the following operations

2. Generate Jenkins API Token

From the user list -> Administrator Users -> Settings, click Add New Token, and then copy the authentication token token

3. Configure [Build trigger] in the Settings of the corresponding task of Jenkins project and paste the token just copied into it, as shown below:

4. In the Github project, open Setting -> Webhooks -> Add Webhooks and type the URL in the following format:

// The Jenkins service address is mobile-web-best-practice, and the Jenkins service address is mobile-web-best-practice. Token refers to the access Token of http://12x.xxx.xxx.xxx:xxxx/job/mobile-web-best-practice/build? token=TokenCopy the code

In this way, we realized that after pushing the new code, Jenkins was automatically triggered to package the project code, package the Docker image and create a container to run it.