Automated front-end deployment

Original address in my github github address

Since I recently set up Jenkins automatic deployment in the company, I specially summarize the use of front-end automatic deployment. This paper mainly describes the whole process from four aspects

  1. The introduction of docker
  2. Build Jenkins using Docker
  3. Jenkins Automation
  4. Nginx reverse proxy

Docker

1. Basic Concepts:

Docker is an open source software project, which enables the application deployment under the software container to be automated, so as to provide an additional software abstraction layer and automatic management mechanism for the virtualization of the operating system layer on the Linux operating system [1].

2. Core probability:

Docker has two core images and two core containers

Mirror: is a series of read-only layers, each layer corresponding to the declaration in the DockerFile. If you have a Windows operating system, the Docker image is particularly like the “Win7 Clean edition. Rar” file

Container: A container is almost identical to an image, and is a unified view of a bunch of layers. The only difference is that the top layer of the container is readable and writable.

Important: Container = mirror + read/write layer

3. Install the Docker on the server
# yum install docker -y # yum install docker -y # Docker start # 4. Docker stop # 5. Service Docker restartCopy the code
4. Build your own images and containers

Simple through Docker to build a Nginx static server, first we need the following steps

  1. Build a Docker image from a Dockerfile (similar to a package.json declaration file)

    Mkdir docker-nginx && CD docker-nginx touch index.html && echo '<h1> HCC </h1>' >> index.html # 2. Create a Dockerfile to build image FROM nginx # use nginx as a mirror COPY. / index. The HTML/usr/share/nginx/HTML/index. The HTML # Will be hosting the. / index. The HTML file is copied into the container in the/usr/share/nginx/HTML/index. The HTML EXPOSE # 80 container exposed outside port 80. The ├ ─ ─ Dockerfile └ ─ ─ index. The HTML # Create docker image build./ -t docker-nginx:1.0.0 **解 码 ** : based on path./ (current path) package an image, the name of the image is docker-nginx, version number is 1.0.0. This command will automatically find the Dockerfile to package up an imageCopy the code

    A successful run yields the following output

    Step 1/3 : FROM nginx
 ---> 540a289bab6c
Step 2/3 : COPY ./index.html /usr/share/nginx/html/index.html
 ---> Using cache
 ---> 169392a59f9c
Step 3/3 : EXPOSE 80
 ---> Using cache
 ---> f4c34e7f6973
Successfully built f4c34e7f6973
Successfully tagged docker-nginx:1.00
Copy the code

Tips: you can through the docker image ls | docker images to see a mirror image of the machine

  1. Build containers with images

     docker container create -p 9998:80 docker-nginx:1.0. 0
Copy the code

  2. Start the container to build the static server

    Docker container start XXX # XXX docker container start XXX # XXXCopy the code

With the above steps, we can open 127.0.0.1:9998 and see the contents of the index.html.

Conclusion:

  • In step 2, we usedocker container createTo create based onDocker - nginx: 1.0.0Mirror a container, using -p to specify port binding – will container80The port is bound to the host9998Port. After executing this command, a container ID is returned
  • The third step is to start the container. Once started, you can access port 9998 on the local machine to access port 80 in the container

Tips: Use docker Container ls to see what containers are currently running

Development:

  • We can use docker run instead of the second build and start container (docker run -p 9998:80 docker-nginx:1.0.0)

  • Can be mapped Nginx start page to a native folder docker run – p 9999:80 – v/Users/huangchucai/temp/Nginx – demo: / usr/share/Nginx/HTML Docker – nginx: 1.0.0

    -v is a mapping to a local directory: container directory, and then accessing the local 9999 will start the container from the local directory

    I think the Docker run command is similar to the Git pull command. Git pull is a combination of git fetch and git merge. Similarly, docker run is a combination of docker create and docker start. However, docker run will always be stuck in the current process, and Docker start will run in the background of the host, you can use the docker run -d parameter

  • Once the container is running, we can access the container through it (interactive mode), which is equivalent to launching the command line inside the container (/bin/bash), allowing us to interact with the container just like SSH

    /usr/share/nginx/html docker container exec it XXX /bin/bash # XXXCopy the code
5. Common Docker commands

Basic commands for mirroring

The command meaning case
ls View all images docker image ls
search Find the mirror docker search [imageName]
history Finding mirror History docker history [imageName]
inspect Displays one or more mirror details docker inspect [imageName]
pull Pull the mirror docker pull [imageName]
push Push an image to the mirror repository docker push [imageName]
rmi Remove the mirror docker rmi [imageName]
prune Removes an unused image that has not been marked or referenced by any container docker image prune
tag Mark the local image to a repository docker image tag [imageName] [username] [repository]:tag
build Build the image from Dockfile docker

Basic commands for containers

  1. Docker container start Indicates the container IDOpen the container
  2. Docker Container Stop Indicates the id of a containerStop the container
  3. Docker Container exec it Container ID /bin/bashInside the container
  4. Docker Container Port Indicates the container IDViewing container IDS
  5. Docer logs container IDView the process logs inside the access container
  6. Docker Top Container IDLook at the processes inside the container
Docker Image accelerator

Ali Cloud accelerator address

7. Docker
  1. Write a Dockfile file to create the image
  2. usedocker image buildtoDockfilePack as mirror image
  3. usedocker container createTo create a container based on the image
  4. usedocker container startTo start a created container

Docker build Jenkins

1. Query Jenkins imagesThe official documentation
Docker Search Jenkins # The Jenkins image has been abolished, please use Jenkins/JenkinsCopy the code

2. Pull the latest mirror
docker pull jenkins/jenkins:lts
Copy the code
3. Enable Jenkins mirroring
docker run -d -u 0 --privileged --name jenkins-node -p 49003:8080 -v / Users/huangchucai/temp/Jenkins - data: / var/jenkins_home Jenkins/Jenkins: LTS # run a mirror for Jenkins: latest container, named jenkins_node1, Map /var/jenkins_home to /root/jenkins_node1 on host. Map port 8080 on host to port 49003 on host. Docker # -u: to allow users inside the docker to access the host mapping directory (-v) Will docker containers within the directory/var/jenkins_home mapped to hosting/Users/huangchucai/temp/Jenkins - data in # - name: the name of the container # - p: Map port 8080 of the container to # -- Privileged 49003 of the host machineCopy the code
4. Visit the Jenkins

After more than 1 minute, after the Jenkins container starts, type localhost:49003 in the browser to view the Jenkins startup page. After initialization, you will be asked to enter a password to start.

cat /Users/huangchucai/temp/jenkins-data/secrets/initialAdminPassword
Copy the code

After entering the password, click Continue to enter the plug-in installation page.

And I’m gonna hit Install

After the installation is complete, the page for creating an administrator account is displayed

Then click Finish. Return to home page. Click System Management => Plug-in Management

Then select the SSH plug-in (optional plug-in) and install it directly

After the installation is complete, go to System Administration -> System Settings

Select Publish over SSH, configure user name, password (server password), server IP, and click Test Configuration. Success will be displayed.

Create a new project and enter a project name

Choose source management, use Git management, enter github repository address, add Github user

Click to add Jenkins credentials

Here you can choose the account name and password, or you can choose SSH login, I chose SSH login

Ssh-keygen -t rsa -b 4096 -c "[email protected]" #2. CD ~/. SSH cat id_rsa.pub #3. Place the output public key in github's SSH Keys #4. Place the generated private key in the Jenkins credentials belowCopy the code

Possible problems (skip if not encountered)

Git Clone or SSH will pop up a box asking you to confirm the identity of the host. 2. The key step in SSH authentication is that you must manually confirm the identity of the host. Yes # If it's docker, use docker execit.... SSH /known_hosts: "Git clone" : "yes" : "~/.ssh/known_hosts" : "Yes" Therefore, you do not need to check host key host * StrictHostKeyChecking no in ~/. SSH /configCopy the code

After configuring the source code, select the Build environment

Enter the following code

sudo docker stop nodeapp || true \
 && sudo docker rm nodeapp || true \
 && cd /root/jenkins_node1/workspace/node  \
 && sudo docker build --rm --no-cache=true  -t node  - < Dockerfile \
 && sudo docker run -d --privileged=true --name nodeapp -p A 3000-3000 -v /root/jenkins_node1/workspace/node:/home/project node
Copy the code

After saving, click Build Now

After the build is successful, you can see your project files under the host directory /root/jenkins_node1/workspace/node

Enter the docker server address localhost:3000 in the browser to access the page information

Docker logs nodeapp failed to build

Jenkins + Github automatic deployment

Jenkins automatically pulls up the latest code and redeploys it if you want local code to be pushed to Github

1. Go back to the home page and click on the user list

2. Click Settings in the left bar and show Token

3. Copy the VALUES in the API Token
4. Go back to the home page -> Node -> Configure -> Build trigger paste into the authentication token

5. Log in to your Github project and open Setting -> Webhooks -> Add Webhooks

6. Add webhooks

7. Remove Jenkins’ security policy

Validation: When we push to the warehouse,

At this point, after git push is complete, Jenkins automatically builds automatically deploy. Why cancel the security policy

Nginx reverse proxy

After the above series of configuration, we can access the server port 49003, you can see Jenkins page, such as my: http://122.51.225.116:49003/

But we want to unset this port when accessing it, so we configure an Nginx static server on the server for conversion.

Here we start an Nginx on the server, let it take full possession of port 80 of the server, and then it distributes according to different domain names

Log in to the server, and then switch to the Nginx profile
CD /etc/nginx/conf.d Touch nginx-docker.conf && vim nginx-docker.conf # 3. Server {listen 80; server_name www.huangchucai.cn; // Different distributed domain name location / {proxy_pass http://127.0.0.1:49003; }} # 4. Restart the Nginx service systemctl reload nginx.serviceCopy the code

After configuration, we can visit http://www.huangchucai.cn/ to access our server has just started

Refer to the link

10 images take you deep into Docker containers and images

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

Docker for the front-end combat tutorial