Shulou(Shulou.com)06/02 Report--

1. Write at the front:

As a lightweight virtualization technology, Docker has the advantages of continuous integration, version control, portability, isolation and security. This paper uses Docker to deploy a front-end application of vue, and introduces the implementation ideas and specific steps in as much detail as possible, in order to facilitate the reference of students with similar needs.

Docker is an open source application container engine that allows developers to package their applications and dependency packages into a portable container that contains the application's code, running environment, dependent libraries, configuration files and other necessary resources. Through the container, you can achieve automated deployment that is convenient, fast and decoupled from the platform, regardless of the environment in which you deploy. The applications in the container will all run in the same environment. (for more details, please go to docker's official website to check docker.)

Docker,@vue/cli has been installed by default

Related version:

Docker version 18.09.2, build 6247962vue cli-- version 3.3.0macOS Mojave Verison 10.14.1

The running environment is macOS. If there is any difference between the operating system and the reader, please adjust it yourself.

Related images:

Nginx:latestnode:latest

two。 Specific implementation:

Create a vue project with vue cli, modify the created project, write a front-end API request on the page, build a version of online resources, build a front-end project image based on nginx docker image, and then start a container vuenginxcontainer based on this front-end project image. Start a container nodewebserver based on node image and provide a back-end interface. Modify the nginx configuration of the vuenginxcontainer so that the interface request of the front-end page is forwarded to the nodewebserver. Make some optimization and improvement.

3. Create vue application

3.1 vue cli create a vue project

Run command

Yarn serve / npm run serve

Visit http://localhost:8081

3.2 rewriting

Rewrite the page slightly, change the msg in the HelloWorld component to Hello Docker in App.vue, and add an interface request in the created life cycle

Import axios from 'axios';. Axios.get ('/ api/json', {params: {}}). Then (res = > {console.log (res);}). Catch (error = > {console.log (error);}).

At this point, you will see an error message on the page console:

/ api/json interface 404, of course, this interface does not exist at this time, write here for the time being, and then adjust this interface later.

3. Build vue project

Run command

Yarn build / npm run build

At this point, there is an extra dist in the project root directory.

Folder

If the entire dist directory is uploaded to the server, the project can be accessed directly by deployment as a static resource site.

The next step is to build such a static resource site.

4. Build vue application image

Nginx is a high-performance HTTP and reverse proxy server. Here we choose the nginx image as the basis to build our vue application image.

4.1 obtain nginx image

Docker pull nginxdocker image (Image) is a special file system. Docker image is a special file system, which not only provides programs, libraries, resources, configuration and other files needed by the container, but also contains some configuration parameters (such as anonymous volumes, environment variables, users, etc.) prepared for the runtime. The mirror does not contain any dynamic data, and its content will not be changed after it is built. Operations related to docker images include: search for image docker search [REPOSITORY [: TAG]], pull image docker pull [REPOSITORY [: TAG]], view image list docker image ls, delete image: docker image rm [: TAG]] / docker rmi [REPOSITORY [: TAG]], and so on. The docker image name consists of REPOSITORY and TAG [REPOSITORY [: TAG]]. Tag defaults to latest.

4.2 create a nginx config profile

Create a nginx folder under the root of the project, and create a new file default.conf under this folder

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

The configuration file defines the direction of the home page as / usr/share/nginx/html/index.html, so we can put the built index.html file and related static resources in the / usr/share/nginx/html directory later.

4.3 create a Dockerfile file

FROM nginxCOPY dist/ / usr/share/nginx/html/COPY nginx/default.conf / etc/nginx/conf.d/default.conf Custom builds the image based on Dockerfile. The FROM nginx command means that the image is based on the nginx:latest image. The COPY dist/ / usr/share/nginx/html/ command means to copy all files under the dist folder in the root directory of the project to the mirror / usr/share/nginx/html/ directory. The COPY nginx/default.conf / etc/nginx/conf.d/default.conf command means to copy the default.conf in the nginx directory to etc/nginx/conf.d/default.conf and replace the default configuration in the nginx image with the local default.conf configuration.

4.4 build a vue application image based on this Dockerfile

Run the command (be careful not to lose the last ".")

Docker build-t vuenginxcontainer.

-t is a name for the image. The image is built based on the Dockerfile of the current directory

View the local image and run the command

Docker image ls | grep vuenginxcontainer

At this point, our vue application image vuenginxcontainer has been created successfully. Next, we start a docker based on the image

The container.

4.5 start the vue app container

Docker container Container: the entity that mirrors the runtime. The relationship between Image and Container is like classes and instances in object-oriented programming. Mirrors are static definitions and containers are entities that mirror runtime. Containers can be created, started, stopped, deleted, paused, and so on.

Start the container based on the vuenginxcontainer image and run the command:

Docker run\-p 3000 vuenginxcontainer 80\-d-name vueApp\ vuenginxcontainer

Docker run starts a container based on the image

-p 3000Plus 80 port mapping, mapping host port 3000 to container port 80

-d running in background mode

-- name container name to view the docker process

Docker ps

You can see that the container named vueApp is already running. Visit http://localhost:3000 at this time

You should be able to access the vue application:

So far, a static resource service has been deployed through the docker container to access static resource files. There is also no data for the interface / api/json. Next, let's solve this problem.

5 interface service

Deploy a node container to provide interface services

5.1 express Service

Write a service with the node web framework express and register a routing server.js that returns the json data format:

'use strict';const express = require (' express'); const PORT = 8080 Boston Const HOST = '0.0.0.0potential Const app = express (); app.get (' /', (req, res) = > {res.send ('Hello world\ n');}); app.get (' / json', (req, res) = > {res.json ({code: 0, data: 'This is message from node container'})}); app.listen (PORT, HOST) Console.log (`Running on http://${HOST}:${PORT}`);

Running the express application requires a node environment. We build a new image based on the node image.

5.2 obtain node image

Docker pull node

5.3 write Dockerfile to docker express applications

FROM nodeWORKDIR / usr/src/appCOPY package*.json. / RUN npm installCOPY. .EXPOSE 8080CMD ["npm", "start"]

When building an image, the dependency of node_modules is installed directly through RUN npm install. Create a .dockerkeeper file in the project to ignore some files that are skipped directly:

Node_modulesnpm-debug.log

5.4 build a nodewebserver image

Run the build command:

Docker build-t nodewebserver.

5.5 start the nodeserver container

Start a container named nodeserver based on the nodewebserver image you just built to provide interface service port 8080 and map the host port 5000

Docker run\-p 5000 8080\-d-- name nodeserver\ nodewebserver

View the current docker process

Docker ps

You can find that the nodeserver container is also running normally. Visit the following http://localhost:5000/json

Can access the json data written earlier

So far, the back-end interface service has also started normally. You only need to forward the interface requested by the page to the back-end interface service to get through the interface.

6. Cross-domain forwarding

You want to forward the request on the vueApp container to the nodeserver container. First of all, you need to know the ip address and port of the nodeserver container. It is known that the internal service of the nodeserver container listens on port 8080, and you also need to know ip.

6.1View the ip address of the nodeserver container:

There are several ways to view the ip inside the container. Here are two ways:

Go inside the container to check

Docker exect-it 02277acc3efc bashcat / etc/hosts

Docker inspect [containerId] directly view container information:

Docker inspect 02277acc3efc

Find Networks-related configuration information here:

Record the ip corresponding to the node service container, which will be used later when configuring nginx forwarding.

6.2 modify nginx configuration

The Nginx configuration location points to the node service default.conf (the Nginx that the frontend wants to know about the configuration of Nginx can be described in location (understand the location matching of Nginx in one article))

Add a rewrite rule to transfer / api/ {path} to the / {path} interface of the target service. Add to the previous nginx/default.conf file:

Location / api/ {rewrite / api/ (. *) / $1 break; proxy_pass http://172.17.0.2:8080;}

After the modification, I realized a problem: the vueApp container runs based on the image of vuenginxcontainer, and the nginx configuration default.conf is built directly when the image is built. So if you need to modify the default.conf, you have to rebuild a new image and run the new container based on the new image.

7. Improve

Can you restart the container directly after each modification of the configuration file to make the new configuration take effect? of course, the answer is yes.

When building an image, the Nginx configuration is not copied into the image, but is mounted directly to the host. After each configuration modification, the container can be restarted directly.

7.1 modify Dockerfile Fil

Modify the Dockerfile under the vueclidemo project

FROM nginxCOPY dist/ / usr/share/nginx/html/COPY nginx/default.conf / etc/nginx/conf.d/default.conf

Delete the COPY nginx/default.conf / etc/nginx/conf.d/default.conf command, and the nginx configuration is mounted on the host through the mount command. Let's take a look at the COPY dist/ / usr/share/nginx/html/ command. If the content changes under the dist/ of the built project need to be redone to build a new image and then start the new container, this command can also be deleted and the container can be started by mounting.

7.2 rerun the vue application container

Start the container vuenginxnew directly based on the nginx image and run the command:

Docker run\-p 3000 mount type=bind,source=$HOME/SelfWork/docker/vueclidemo/nginx,target=/etc/nginx/conf.d 80\-d-name vuenginxnew\-mount type=bind,source=$HOME/SelfWork/docker/vueclidemo/nginx,target=/etc/nginx/conf.d\-mount type=bind,source=$HOME/SelfWork/docker/vueclidemo/dist,target=/usr/share/nginx/html\ nginx--mount type=bind,source= {sourceDir}, target= {targetDir} mounts the sourceDir of the host to the targetDir directory of the container. The commands run here are long, and if you can't avoid the trouble of re-typing each time, we can save the complete command to a shell file, vueapp.sh, and then execute sh vueapp.sh directly.

In this way, every time you modify the nginx configuration or rebuild the vue application, you only need to restart the container to take effect immediately. At this point, when we visit the http://localhost:3000/api/json, we can see that the API can return normally, indicating that the forwarding has taken effect.

At this point, the forwarding of the interface service is also enabled.

7.3 configure load balancer

Back-end services are generally dual-machine or multi-machine to ensure the stability of the service. We can start another backend service container and modify the configuration of nginx to optimize resource utilization, maximize throughput, reduce latency, and ensure fault-tolerant configuration.

Based on the similar operation in section 4.5 above, a new container is started, and based on the similar operation in section 5.1, you can see the IP of the new container (172.17.0.3)

Modify nginx/default.conf (add upstream, modify proxy_pass in location / api/):

Upstream backend {server 172.17.0.2 server 8080; server 172.17.0.3 virtual 8080; Location / api/ {rewrite / api/ (. *) / $1 break; proxy_pass backend;}

8. Write at the back

Students who are not used to the command line can choose Kitematic to manage the status, data directory and network of the docker container. All the operations on the capacity can be visualized, so there is no need to introduce too much here. Students who are interested can experience it on their own.

9 Summary

Docker provides a very powerful automated deployment mode and flexibility, decoupling between multiple applications, and provides development agility, controllability and portability. This paper takes the vue project as an example to implement a complete step of deploying a front-and-back separation project using docker, hoping to give some help to students who want to embrace docker.

Reference resources

Docker official website

Nginx official website

Docker from beginner to practice

Kitematic user guide

The Nginx that the front end wants to know

Understand the location match of Nginx in one article

The above is the whole content of this article, I hope it will be helpful to your study, and I also hope that you will support it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.