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
-
We install Docker on the server (in this case, our MAC)
-
We installed Jenkins on the server (in this case, our MAC) using Docker
-
We create a new Vue project locally and push it to Github
-
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)
-
We used Jenkins to pull the Github project into the Workspace/directory in Jenkins’ installation directory
-
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
- We use Jenkins SSH to connect to our server
Here we need to install the Publish Over SSH plug-in and configure the server
- 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)