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

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

Automated project deployment is more commonly used in large companies or unicorns, and is more efficient than manual deployment of projects. Then this article combines the previously learned docker knowledge points and nginx to simply implement the automatic deployment of the VueJs project. Of course, it is similar for other projects.

Operating Environment

First, you need to install docker, nginx, node, etc. on the server. It is convenient for subsequent operations.

Pull the nginx image through docker, command docker pull nginx

Initialize a project through vue-cli

You can initialize a project through vue init webpack project name. Here, we assume that the project name is docker-vue, and then create a new Dockerfile file in the root directory of the project. The general content is as follows:

FROM nginx:latest
#Copy the html of the current packaged project to the virtual address COPY dist/ /usr/share/nginx/html/
#Use custom nginx.conf to configure ports and listeners 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 default.conf file with the following content:

server {
# The port number defined in the project is 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;
}
}


Since then, the basic work has been completed. The next step is the basic configuration operation of daocloud.io

daocloud.io basic configuration operations

If you don't have an account, you can register at daocloud.io first.

The following operations are divided into:

  • Create a project
  • Cluster Management
  • Create a mirror repository

Create a project


Here you need to add the project name, set the code source (can be github, gitlab), etc., and then select the project you need to build. I chose my own github repository docker-vue here, and then click Start Creating.

Cluster Management

The main purpose of cluster management is to connect to remote servers and create daocloud.io images through commands.


Select New Host

Since I purchased an Alibaba Cloud server myself 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, such as:


The host is created successfully, as shown in the following figure:

Create a mirror repository

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



Then make the following application settings:

After the deployment is complete, you can access it through the server IP + the container port number just set.


In this way, we have completed most of the operations. By looking at the docker container, we can see that after we successfully created the image repository, a container was automatically created:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • How to build docker+jenkins+node.js automated deployment environment from scratch
  • .Net Core automated deployment: How to deploy dotnetcore applications using docker version of Jenkins
  • Implementation of Centos7+Docker+Jenkins+ASP.NET Core 2.0 automated release and deployment
  • How to automatically deploy Apache Tomcat with Docker
  • Steps to automatically deploy war packages to docker using docker -v and Publish over SSH plugins
  • Detailed explanation of Docker automatic deployment of tomcat
  • Tutorial on Automating Ruby on Rails Deployment in Docker

<<:  Detailed explanation of outfile, dumpfile, load_file functions in MySQL injection

>>:  Vue implements pull-down to load more

Recommend

Teach you to implement a simple promise step by step

Table of contents Step 1: Build the framework Ste...

Detailed explanation of mysql exists and not exists examples

Detailed explanation of mysql exists and not exis...

Detailed explanation of MySql slow query analysis and opening slow query log

I have also been researching MySQL performance op...

Problems encountered by MySQL nested transactions

MySQL supports nested transactions, but not many ...

An article to understand the advanced features of K8S

Table of contents K8S Advanced Features Advanced ...

CSS imitates Apple's smooth switch button effect

Table of contents 1. Code analysis 2. Source code...

How to use css overflow: hidden (overflow hiding and clearing floats)

Overflow Hide It means hiding text or image infor...

Detailed explanation of mixins in Vue.js

Mixins provide distributed reusable functionality...

CSS3 text animation effects

Effect html <div class="sp-container"...

Quickly master how to get started with Vuex state management in Vue3.0

Vuex is a state management pattern developed spec...

jQuery implements the function of adding and deleting employee information

This article shares the specific code of jQuery t...

Create a virtual environment using venv in python3 in Ubuntu

1. Virtual environment follows the project, creat...

Simple comparison of meta tags in html

The meta tag is used to define file information an...

Quick understanding and example application of Vuex state machine

Table of contents 1. Quick understanding of conce...