preface

In recent years, the application of Docker technology has become more and more popular. At present, docker-oriented front-end engineering has been produced. As a front-end developer, I spent several days studying the knowledge points of Docker and realized the Docker local deployment Vue project. I hope I can give some help to the students in need.

What is a Docker?

Docker is an open source application container engine that allows developers to package their applications and dependencies into portable containers and distribute them to any popular Linux machine, as well as virtualization. Containers are completely sandboxed and have no interface with each other. In short, a container that can be mirrored on Linux. Click here to learn more about Docker.

Why does the front-end need to know about Docker

First of all, there is a trend of docker-oriented front-end engineering. Learning and mastering this technology is conducive to improving one’s competitiveness. Secondly, front-end Docker-oriented helps front-end development engineers to focus more on development itself, weaken the software environment and reduce the difficulty of project deployment.

Concrete implementation! Rolled it.

Docker installation

brew cask install docker
Copy the code

I am a MAC, so I would like to introduce the installation method under MAC, Windows or other systems, you can click to see more about other installation methods.

After loading the Docker app, click Next and you may be asked for your macOS login password. A Docker running prompt window pops up, and the status bar also has a little whale icon.

After starting the terminal, you can check the installed Docker version by running commands.

$docker --version docker version 19.03.8, build afacb8bCopy the code

Build the VUE project

First, select a created Vue project (in this case, a single-page Vue project with separate front and back ends). Next, run the NPM run build command to generate a packaged DIST file (ps: the package name depends on the configuration of the project). You will notice that there is a dist folder in the project.

Get the Nginx image

The Vue project of this case is a front and back end separation project. The front end interface on the server only needs to be accessed externally, so it is ok to deploy Nginx Docker directly.

docker pull nginx:alpine
Copy the code

This blogger recommends using the alpine version because of its small size, requiring only 19.7MB compared to the latest version, which requires 127MB.

Use Dockerfile to customize the image

First, create a new file in the project root directory called Dockerfile

Edit the Dockerfile file

FROM nginx:alpine
Copy the code

FROM: Custom images are based on images FROM, and nginx is the base image required for customization. Subsequent operations are based on Nginx.

Packaging image

docker build -t vuetest:v1 .
Copy the code

The Dockerfile in the current directory creates an image. The repository is vuetest and the tag is v1.

Look at mirror

docker images
Copy the code

After the command is executed, you can view mirror information.

Run the container
docker run -P -d vuetest:v1
Copy the code

Viewing Port Information

docker ps
Copy the code

Access localhost: 32770

Dockerfile
nginx

Edit the Dockerfile file twice

FROM nginx:alpine
COPY ./dist/  /usr/share/nginx/html/
Copy the code

COPY dist file to /usr/share/nginx/html/ /usr/share/nginx/html/ is the default nginx file path.

Repackage the image and run the container

docker build -t vuetest:v1 .
docker images
docker run -P -d vuetest:v1
docker ps
Copy the code

When we run localhost: 32782, we find that the access is OK, but when the page is refreshed, nginx 404 is prompted. This is because in the Vue project, we used the History routing pattern. This mode causes the current page to not be found after refreshing. The plan here is to add some configuration to Nginx as officially recommended. Click to learn more and see more solutions.

Create the nginx.conf file

Create and edit the nginx.conf file

server {
    listen       80;
    server_name  localhost;
    # uding gzip
    gzip  on;
    gzip_min_length 1k;
    gzip_buffers 16 64k;
    gzip_http_version 1.1;
    gzip_comp_level 9;
    gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404; }}Copy the code

Try_files $uri $uri/ /index.html =404; This code means that if the current address does not exist, it points to index.html. In addition, to solve the problem of too large resources, gzip compression is used here. Reduce volume.

Edit the Dockerfile file three times

FROM nginx:alpine
COPY ./dist/  /usr/share/nginx/html/
COPY ./nginx.conf /etc/nginx/conf.d/default.conf
Copy the code

COPY/nginx. Conf/etc/nginx/conf. D/default. Conf command means the root directory of the nginx. Conf copied to the/etc/nginx/conf. D/default. Conf, Replace the default configuration in the nginx image with the local nginx.conf configuration.

Repackage the image and run the container

docker build -t vuetest:v1 .
docker images
docker run -P -d vuetest:v1
docker ps
Copy the code

Access terminal generated good port number, refresh OK. Done!!

Tips

  • Problem 1: Too many command lines to remember wow ~ is there another solution?

    A: The Docker we downloaded before has a graphical interface, so we can use it together with the graphical interface. For example, we can click the Little whale -Dashboard to check the running status of the current container and access the configured project page address with one click

  • Question 2: Is the running container name customizable? I don’t want to use the default!!

    A: Of course.

    docker run -P -d vuetest:v1
Copy the code

    Change the above command to the following:

    docker run --name myproject -P -d vuetest:v1
Copy the code

    This command means to run the vuetest:v1 image, set the container name to myProject, run the container in the background, and return the container ID


  • Question 3: Can bloggers provide more common commands? Or advanced applications?

    A: Sure, you can click here to learn more.