Docker + daocloud to realize automatic construction and deployment of front-end projects

Time:2020-6-24

The automation deployment of the project is more used in large companies or unicorns, which is more efficient than the manual deployment of the project. So this paper combines the knowledge points of docker and nginx learned before to simply realize the automatic deployment of vuejs project, which is similar to other projects.

Operating environment

  1. First, you need to install docker, nginx, node, etc. on the server. It is convenient for subsequent operation.
  2. Pull nginx image through docker and command docker pull nginx

Initializing a project through Vue cli

ThroughVue init webpack project nameInitialize a project. Assume that the project name is docker Vue, and then create a dockerfile file in the root directory of the project. The approximate content is as follows:

FROM nginx:latest
#Copy the HTML of the current package project to the virtual address
COPY dist/ /usr/share/nginx/html/
#Use custom nginx.conf Configure ports and listening
RUN rm /etc/nginx/conf.d/default.conf
ADD default.conf /etc/nginx/conf.d/

RUN /bin/bash -c 'echo init ok!!!'

And create a new one default.conf The contents of the document are as follows:

server {
#Port number defined in project
listen       8080;
server_name  localhost;

#charset koi8-r;
#access_log  /var/log/nginx/log/host.access.log  main;

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   html;
}
}

Docker + daocloud to realize automatic construction and deployment of front-end projects
Since then, the basic work has been completed, and the next step is to daocloud.io Basic configuration operation of

daocloud.io Basic configuration operation

If there is no account, you can register first daocloud.io 。
The next operations are as follows:

  • Create project
  • Cluster management
  • Create image warehouse

Create project

Docker + daocloud to realize automatic construction and deployment of front-end projects
Here you need to add the project name, set the code source (can be GitHub, gitlab) and so on, and then select the project you need to build. Here I choose my own GitHub repository docker Vue, and then click Start creation.
Docker + daocloud to realize automatic construction and deployment of front-end projects

Cluster management

The main purpose of cluster management is to link the remote server and implement it by command daocloud.io Creation of the image.
Docker + daocloud to realize automatic construction and deployment of front-end projects
Select new host
Docker + daocloud to realize automatic construction and deployment of front-end projects

Since I purchased Alibaba cloud server and the system is Ubuntu, I chose this configuration and ran it on the server:

curl -sSL https://get.daocloud.io/daomonit/install.sh | sh -s e2fa03ebead51076411388c26dff2257dae89768 

To build a docker image, for example:

Docker + daocloud to realize automatic construction and deployment of front-end projects
The host is created successfully, as shown in the following figure:

Docker + daocloud to realize automatic construction and deployment of front-end projects

Create image warehouse

Enter image warehouse, select the image you just manually built, and deploy the latest version to the free host or cloud test environment

Docker + daocloud to realize automatic construction and deployment of front-end projects
Docker + daocloud to realize automatic construction and deployment of front-end projects
Then make the following application settings:

Docker + daocloud to realize automatic construction and deployment of front-end projects

Docker + daocloud to realize automatic construction and deployment of front-end projects

After deployment, it can be accessed through the container port number just set by server IP +.
Docker + daocloud to realize automatic construction and deployment of front-end projects
In this way, we have completed most of the operations. By looking at the container of docker, we can see that after we have successfully created the image warehouse, we have automatically created a container:
Docker + daocloud to realize automatic construction and deployment of front-end projects
Disadvantages:
Use daocloud and docker to realize automatic deployment. Each deployment will increase a docker container, which will lead to the increase of related containers and is not convenient for later troubleshooting. Moreover, some configurations need to be operated on daocloud, which also takes time.

Project test address: https://github.com/huangche00…