introduce

This series focuses on how to automate the deployment of our front-end and back-end projects

How to automate the deployment of a VUE project

Next, how to automate nodeJS project deployment

This is A MAC OS, so if you’re using Linux you’re not going to run into a lot of these problems.

Related applications

  • jenkins
  • docker

The whole process

First, let’s think of our computer as a server. Of course, if you have a server, you can also do the following directly on the server

I’m using my MAC as a server for convenience, which turns out to be a lot of trouble!!

Note the following distinction between local and server, in fact, we here are our computers

  1. We install Docker on the server (in this case, our MAC)

  2. We installed Jenkins on the server (in this case, our MAC) using Docker

  3. We create a new Vue project locally and push it to Github

  4. We will access Jenkins on the server locally, that is, open the url http://localhost:8081 (if it is a server here, change localhost to the IP address of your server)

  5. We used Jenkins to pull the Github project into the Workspace/directory in Jenkins’ installation directory

  6. Jenkins ran the command using the execution shell

npm install
npm run build
Copy the code

Here we need to install the NodeJS plug-in for Jenkins

  1. We use Jenkins SSH to connect to our server

Here we need to install the Publish Over SSH plug-in and configure the server

  1. Do the following on the server (in this case, our MAC)

Package our Vue project as a mirror vuenginxApp

Use this image to create a container, VuenginxApp

Install the docker

Please refer to www.runoob.com/docker/maco…

Here is a MAC, after the successful installation, there is a Docker icon in the status bar

Enter docker -v on the command line

The installation is successful

Docker installation Jenkins

As an aside: You can also install without Docker, see my other article about Installing Jenkins on Mac

Search Jenkins image

Hub.docker.com/ is where Docker stores images. The interface is as follows:

Let’s search for the Jenkins image to install

Note: Although the first version is officially maintained by Docker, it has not been updated for a long time and is an outdated version. So here we’re going to install the second one, which Jenkins is maintaining

Ps: We can also search through the command line, the command is Docker search Jenkins

Docker installation Jenkins

Create a new directory jenkins_home, like I have here

Execute the command

docker run --name jenkins_node -d -v /Users/isaacho/Documents/application/docker/jenkins_home:/var/jenkins_home -p 8081:8080 -p 50000:50000 jenkins/jenkins:lts
Copy the code

Note: do not directly copy the above command here, need to/Users/isaacho/Documents/application/docker/jenkins_home replace your new catalogue. Under the same if/Users/isaacho/Documents/application/docker/jenkins_home need into your directory

Wait for the installation process… If http://localhost:8081 can be opened, the installation is successful

At the same time, we can see/Users/isaacho/Documents/application/docker/jenkins_home directory laying into many files

Command explanation:

–name jenkins_node indicates that your container is named Jenkins_node

-d indicates running in the background

-v /Users/isaacho/Documents/application/docker/jenkins_home:/var/jenkins_home To map our new jenkins_home directory to the /var/jenkins_home directory of the container

-P is a port mapping

Configuration Jenkins

The browser opens http://localhost:8081. The interface is as follows:

The following command is used to obtain the administrator password

cat /Users/isaacho/Documents/application/docker/jenkins_home/secrets/initialAdminPassword
Copy the code

Click to continue

Select the recommended plug-in, install the plug-in, and wait…

Creating an Administrator User

Click Save and finish

Click to start using Jenkins

Installing the SSH Plug-in

Click System Management

Publish Over SSH

Configure SSH

System management = “configure System =” pull to the bottom

Click Test Configuration. If SUCCESS is displayed, the Configuration is successful. Click Save

If this does not work, our computer does not have remote login enabled

Solution:

Choose System Preferences > Share > Remote Login

Hostname is your IP address

Installing the Node Plug-in

The Node plug-in is required when running a Node project, and is installed here

Click System Management

Waiting for installation

Select the nodeJS version to install

Prepare a VUE project

The project has been uploaded to Github

Vue CLI Creates a Vue project

We create a vUE project directly with vue-cli3

Note: This requires that you have a node version of 8.9 or higher

vue create vueclidemoapp
Copy the code

rewrite

Modify the HelloWorld.vue component, rewrite the page, and add axios to send a request

import axios from 'axios';
axios.get('/api', { params: {}, }).then((res) => { console.log(res); }); .Copy the code

The interface is as follows

Create the nginx configuration file

For nginx configuration, see Nginx front-end Want to Know

Create a new nginx.conf file in the project root directory

user nginx; worker_processes 1; error_log /var/log/nginx/error.log warn; pid /var/run/nginx.pid; events { worker_connections 1024; } http { include /etc/nginx/mime.types; default_type application/octet-stream; log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; access_log /var/log/nginx/access.log main; sendfile on; #tcp_nopush on; keepalive_timeout 65; gzip on; gzip_types text/plain application/javascript text/css; Server {# port listen 80; Server_name localhost; server_name localhost; / {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; } } include /etc/nginx/conf.d/*.conf; }Copy the code

Create Dockerfile

Create a new Dockerfile in the project root directory


FROM nginx

EXPOSE 80
Copy the code

So here’s your directory structure

Upload the project to Github

I wouldn’t have demonstrated here, I’m the making of the project address is https://github.com/repototest/vueclidemoapp

Jenkins deployed the VUE project

A new task

The first shell command is to build our vue project, which will generate the dist directory under the project root

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

The second shell command is used to build the Docker image and run the Docker service

It will first SSH a connection to our server

docker stop vuenginxapp || true \
 && docker rm vuenginxapp || true \
 && cd/Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp \ && docker build -t vuenginxapp . \ &&  docker run-d -p 8083:80 --name vuenginxapp -v /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp/dist:/usr/share/nginx/html -v /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp/nginx.conf:/etc/nginx/nginx.conf vuenginxapp

Copy the code

Docker Stop vuenginXApp is used to stop the VuenginXApp container

Sudo docker rm vuenginxapp is used to delete the VuenginxApp container

CD/Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp into our project directory, there needs to be changed to your own directory, Namely (yourpath)/jenkins_home/workspace/vueclidemoapp, yourpath is above our new jenkins_home directory catalog

Docker build-t vuenginxApp. Indicates a build image named vuenginxApp

docker run -d -p 8083:80 –name vuenginxapp -v /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp/dist:/usr/share/nginx/html -v /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp/nginx.conf:/etc/nginx/nginx.conf Vuenginxapp means that our vuengInXApp above generates the container vuengInXApp for the image

-d runs in the background

-p 8083:80 maps the container’s port 80 to the port 8083 we are accessing. Note that port 80 is the default nginx port number

–name VuenginXApp The container name is vuenginXApp

-v /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp/dist:/usr/share/nginx/html Mount our generated dist directory to the container’s /usr/share/nginx/html, which is nginx’s default HTTP directory

-v /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp/nginx.conf:/etc/nginx/nginx.conf Conf to /etc/nginx/nginx.conf, which is the default nginx configuration file

Vuenginxapp is the name of our image

Possible problems

  • Docker is not a command. The reason for this problem is that when we use SSH to connect to the MAC, we can only use /usr/bin on the command line, but our docker command is in /usr/local/bin, so we can’t find it. The solution is to replace the above docker with /usr/local/bin/docker

namely

/usr/local/bin/docker stop vuenginxapp || true \
 && /usr/local/bin/docker rm vuenginxapp || true \
 && cd  /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp  \
 && /usr/local/bin/docker build  -t vuenginxapp  . \
 && /usr/local/bin/docker run -d -p 8083:80 --name vuenginxapp -v  /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp/dist:/usr/share/nginx/html -v  /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp/nginx.conf:/etc/nginx/nginx.conf vuenginxapp
Copy the code

Build the project

Click Build Now

Waiting for deployment…

Click on this little circle to see the console output

You can see that our project is pulled under (yourpath)/jenkins_home/workspace

Go to http://localhost:8083/

So far we have successfully deployed our VUE project

Possible problems

  • Get registry-1.docker.io/v2/: net/http: request canceled while waiting for connection (Client.Timeout exceeded while awaiting headers)