In the recent project, we had to upload various commands to the server for deployment after finishing the package at the front and back ends, which was not very good in terms of time and late maintenance. After spending some time studying Jenkins platform, I felt it was suitable for lazy people like us, so I decided to try it on MAC, but it turned out to be full of holes. After reading some other people’s articles, there were also errors in various formats, so I decided to organize a basic deployment scheme based on Jenkins+ Docker + Vue by myself. On the one hand to facilitate their own later view, on the other hand also for everyone’s daily reference, the wrong place to write please you pointed out, thank you!

It’s a good idea to know the following before deploying

  • Common Linux Commands
  • Common docker commands

Docker

referencewww.runoob.com/dockerDocker icon in the status bar

The console enters the name docker -v

In addition, you need to configure domestic mirroring

Docker Docker

University of Science and Technology of China: https://registry.docker-cn.com netease: http://hub-mirror.c.163.com Ali cloud: https://docker.mirrors.ustc.edu.cn https://pee6w651.mirror.aliyuncs.comCopy the code

Jenkins

Search Jenkins image hub.docker.com/ and select Jenkinsci/BlueOcean

Since Jenkins needs to be started through Docker and docker command is run in Jenkins, some errors will appear when Jenkins is run directly

Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?

This is mainly because docker Client is installed on Jenkinsci/BlueOcean image, not on the daemon. Docker adopts the Client/Server architecture, and the docker XXX command tool we commonly use is just the docker Client. When we execute commands from this command line, we are actually communicating with the Docker Engine through the client. Docker clients require a Docker daemon to work, Docker clients will use the daemon (by default via socket Unix :// /var/run/docker.sock), resolved using a Docker-in-docker (DinD) image

You can choose Link Docker-dind

docker run --name docker-dind --privileged -d docker:stable-dind
docker run --name jenkins --link=docker-dind -d jenkinsci/blueocean
// You need to configure the -h option for listening on network TCP sockets or other sockets
docker exec jenkins docker -H docker-dind images
Copy the code

Because the Docker daemon listens for Unix domain sockets, you can set the DOCKER_HOST ENV

docker run -d -p 8080:8080 -p 50000:50000
	-v ${yourpath}:/var/jenkins_home \
	-v /var/run/docker.sock:/var/run/docker.sock \ 
	-v /usr/local/bin/docker:/usr/bin/docker \
	--name ${containerName} ${imageName}
Copy the code

ContainerName indicates the name of the container that you defined

ImageName represents the Jenkins image you generated

–name XXX indicates the container name

-d indicates running in the background

– v/Users/zhongjiafeng/Downloads/docker/Jenkins: / var/jenkins_home said the new to the container/var/Jenkins directory mapping jenkins_home directory, Later modifications by the host machine can be mapped to the inside of the container

-p is port mapping

Then open the http://localhost:8080/ port to see

  1. throughdocker exec -it containerName /bin/bashInto the container and throughcat /var/jenkins_home/secrets/initialAdminPasswordTo get the password

2. Select the recommended plug-in

3. Wait for a few minutes and save the configuration

4. Jenkins page

Github account configuration

1. Go to Github and set developer Settings

2. Select Personal Access Tokens and configure some of the warehouse

3. Log in to Jenkins Workbench, and add Jenkins to GitHub under System Configuration

4. Select Secret Text and enter the token access key to test whether the connection is correct

5. If you want to automate builds while pushing

This project also needs to be configured within the Jenkins platform

* PS: To configure webhook, you need to configure the IP address exposed to the external, if the test on the local machine, recommended to usenatappFor mapping, download natApp client filesConfigure the port number for your Jenkins accessThen enter the following command to enable

Chmod a+x natapp./natapp - AuthToken = Your AuthToken valueCopy the code

Vue file configuration

Build the Vue project with vue Create VueApp and push it to github nginx.conf

server { listen 80; server_name localhost; #charset koi8-r; access_log /var/log/nginx/host.access.log main; error_log /var/log/nginx/error.log error; location / { root /usr/share/nginx/html; index index.html index.htm; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; }}Copy the code

Dockerfile

FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/conf.d/default.conf
Copy the code

The Node configuration

Select System Management Plug-in Management Optional plug-ins

Manage Jenkins Global Tool Configuration NodeJS takes an alias

To create the ITEM

  1. The new item

2. Select Freestyle Project

3.General Select the Github project

4. Source code management is written into the warehouse

5. Build environment Select node

6. Build select shell statement configuration

echo $PATH
node -v
npm -v
npm cache clean --force
npm install
npm run build
Copy the code
echo $PWD docker stop vueappcontainer || true \ && docker rm vueappcontainer || true \ && docker rmi vueapp || true \ &&  docker build -t vueapp .Copy the code
docker run -d -p 8083:80 --name vueappcontainer vueapp
Copy the code

7. Build

An error message appears for the build

  • This may occur during NPM

Unexpected end of JSON input while parsing near

  • You can forcibly clear the cache: NPM cache clean –force

  • Or reduce the NPM version to NPM -g I npm@x

node not found

Docker exec -u 0 it

bash apk add –no-cache nodejs It is found that the size of blueOcean image is 100M smaller than that of normal Jenkins image, which may result in some simplification and node dependency cannot be found. Mirror Jenkins/Jenkins image can be replaced.

8. The configuration is successful

conclusion

Automated deployment will be the future trend, the overall process is probably (www.jianshu.com/p/c45c2b871)…

  • The developer submits the code, and GitLab triggers the Webhook, pushing the message to Jenkins

  • Jenkins performs the corresponding job based on the information pushed

  • The clone branch of the script in Job calls the build tool to build the code

  • Deploy the results of build completion to the test/production server using operations scripts

  • Deployment is complete

subsequent

Combining gitlab

pipeline

Cross domain forwarding

Deployment of Jenkins+ Docker in unbuntu system

reference

about-docker-sock

docker in docker

Jenkins+Docker Automated deployment VUE project

Making up

node not found

npm error

Cross domain forwarding