background

In the process of deploying a project, it was always deployed locally and then uploaded the packaged files to the server via XFTP, which was too cumbersome. The company that I’m working with now uses an automated deployment approach, where after the functionality is developed, the functional branch is merged into the master branch, and the server automatically builds the code. Hence the idea of learning to automate deployment.

Some concepts and steps in this article may not be explained very clearly or have errors, please correct any problems or ideas 🙂 for some concepts and commands, it is better to find them in the document, so there is no detailed explanation of the commands here.

The body of the

Front-end projects often have various problems according to different environments, and in most cases, it is very troublesome to configure the environment, so Docker is used as the environment for project operation.

concept

Docker only needs to understand the concepts of image and container at the beginning.

  • Mirroring: Mirroring is made up of file systems and parameters used at run time. We can think of it as a miniature system with the required environment.
  • Container: A container can be thought of as an instance of a mirror run. You can simply think of the mirror-container relationship as a class and instance relationship.

The installation

I was installed in ubuntu16.04 environment, according to the docker document installation steps are as follows

$ sudo apt-get update $ sudo apt-get install apt-transport-https ca-certificates curl gnupg-agent software-properties-common $ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add - $ sudo apt-key  fingerprint 0EBFCD88 $ sudo add-apt-repository"deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
$ sudo apt-get update
$ sudo apt-get install docker-ce docker-ce-cli containerd.io
Copy the code

In curl and add warehouse step, you can change it to Ali cloud source, otherwise it will be slow to install and download the image

$ curl -fsSL http://mirrors.aliyun.com/docker-ce/linux/ubuntu/gpg | sudo apt-key add -
$ sudo add-apt-repository "deb [arch=amd64] http://mirrors.aliyun.com/docker-ce/linux/ubuntu $(lsb_release -cs) stable"
Copy the code

After the installation is successful, run the following command to check whether the installation is successful

$ sudo docker run hello-world
Copy the code

If hello from Docker is displayed, the installation is successful.

Understand Docker operations

Here’s a practical example of building a Docker container and running it on the server

Let’s use an nginx image as an example. First, download the Nginx image

$ docker pull nginx
Copy the code

After downloading the image successfully, you can view the information about the existing image in the system

$ docker image ls
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
nginx               latest              53f3fd8007f7        2 weeks ago         109MB
Copy the code

At this point we have an nginx image that we use to create and run a container and then view the effect in the browser.

$ docker run -d -p 8081:80 --name mynginx nginx
Copy the code

Where,-d refers to running the container in the background, and -p refers to port mapping, mapping port 8081 of the server to port 80 of the container. After successful creation, a string of characters will be output to indicate the success of creation. We can check whether the container is running through docker ps command

$ docker ps CONTAINER ID IMAGE ... PORTS NAMES 6dd4380ba708 nginx ... 0.0.0.0:8081 - > 80 / TCP mynginxCopy the code

After seeing the container information, we access port 8081 of the server and see the nginx welcome screen.

If the access fails, check the firewall of the leased server to check whether port 8081 is enabled

In actual combat

Next, we use the Nginx image as a base, modify the image and create a container to run a Vue application.

First, we create a VUE application, do not modify at first, package the folder named dist, then create a working directory on the server for testing, put the packaged files in the working directory.

Second, we will modify the nginx image. There are two ways to modify an image in Docker:

Use this command to enter the container
$ docker run -it --name mynginx nginx /bin/bash
-m = 'username'; -m = 'username'
$ docker commit -m "update the nginx" [username]/nginx:v2
Copy the code

This is simple, but it’s not good for teams because they don’t know what you’re doing to the image, so let’s use the second solution to change the image, okay

  1. Use Dockerfile to execute a series of commands to modify the image. First we create a Dockerfile and write it
# FROM keyword: depend on what image is built based on
FROM nginx

Copy the packaged files to this path in the container
COPY dist/ /usr/share/nginx/html/

# Replace the nginx configuration in the container with the modified file
COPY default.conf /etc/nginx/conf.d/default.conf
Copy the code

Default. conf contains the following contents

  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

With all the files ready, we build the image and create and run the container

# To run this command in the path where the Dockerfile is located, note the "."
$ docker build -t="[username]/mynginx" .
After a successful build, we use this image to run the container
$ docker run -it -d -p 3000:80 [username]/mynginx 
Copy the code

Iv. After the successful operation, we can enter “Server IP address :3000” in the browser, and then we can see the welcome interface of vUE project.

conclusion

In Docker, we learned how to deploy an application using Docker. The advantage of using Docker to deploy applications is that whether you write Docker on Windows or MAC, the application is running in the same environment, you do not need to redeploy the environment on the server, reducing our workload.

In the next article, I’ll show you how to use Git’s Webhook functionality to automate the steps we just did after submitting code.

Finally, if there are any mistakes in this article, please correct them.