Teach you how to deploy Vue project with Docker

1.Write in front:

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

Docker is an open source application container engine that allows developers to package their applications and dependent packages into a portable container. The container contains the application code, runtime environment, dependent libraries, configuration files and other necessary resources. The container can be used to implement a convenient, fast and platform-decoupled automated deployment method. No matter what the environment is when you deploy, the application in the container will run in the same environment. (For more details, please visit Docker's official website)

Docker and @vue/cli are installed by default.

Related versions:

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

The operating environment is macOS. If there is a difference between your operating system and the reader's, please adjust it yourself

Related images:

• nginx:latest
• node:latest

2. Specific implementation:

• Use vue cli to create a vue project, modify the created project, write a front-end interface request on the page, build a version of online resources, build a front-end engineering image based on the nginx docker image, and then start a container vuenginxcontainer based on this front-end engineering image.
• Start a container nodewebserver based on the node image to provide a backend interface.
• Modify the nginx configuration of vuenginxcontainer to forward the interface request of the front-end page to nodewebserver.
• Minor optimizations and improvements.

3. Create a Vue application

3.1 vue cli creates a vue project

Run Command

yarn serve / npm run serve 

Visit http://localhost:8081

3.2 Rewrite

Slightly rewrite the page, change the msg passed into the HelloWorld component in App.vue to Hello Docker; add an interface request to the created lifecycle

import axios from 'axios';

…

axios.get('/api/json', {
 params: {}
}).then(
 res => {
 console.log(res);
 }
).catch(
 error => {
  console.log(error);
 }
)

…

At this time, you will see an error message in the page console:

/api/json interface 404. Of course, this interface does not exist at this time. I will write it here for now and call this interface later.

3.3 Building a Vue Project

Run Command

yarn build / npm run build 

At this time, there is an additional dist in the project root directory

Folders

If you transfer the entire dist directory to the server and deploy it as a static resource site, you can directly access the project.

Next, let's build such a static resource site.

4 Build the vue application image

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

4.1 Get the nginx image

docker pull nginx

• docker image (Image) is a special file system. A Docker image is a special file system that, in addition to providing the programs, libraries, resources, configurations, and other files required for the container to run, also contains some configuration parameters prepared for runtime (such as anonymous volumes, environment variables, users, etc.). Images do not contain any dynamic data, and their contents will not be changed after they are built.
• Docker image related operations include: searching for images docker search [REPOSITORY[:TAG]] , pulling images docker pull [REPOSITORY[:TAG]] , viewing image lists docker image ls , deleting images: docker image rm [REPOSITORY[:TAG]] / docker rmi [REPOSITORY[:TAG]] , etc.
• The docker image name consists of REPOSITORY and TAG [REPOSITORY[:TAG]] , and TAG defaults to latest.

4.2 Create nginx config configuration file

Create an nginx folder in the project root directory and create a new file default.conf in the 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;
 }
}

This configuration file defines the home page to point to /usr/share/nginx/html/index.html , so we can put the constructed index.html file and related static resources in the /usr/share/nginx/html directory later.

4.3 Create a Dockerfile

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

• When custom building an image, it is built based on Dockerfile.
• The FROM nginx command means that the image is built based on the nginx:latest image.
• The COPY dist/ /usr/share/nginx/html/ command means to copy all files in the dist folder in the project root directory to the /usr/share/nginx/html/ directory in the image.
• 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 the Dockerfile

Run the command (note that the final “.” is missing)

docker build -t vuenginxcontainer .

-t is to name the image . It is based on the Dockerfile in the current directory to build the image

View the local image and run the command

docker image ls | grep vuenginxcontainer

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

container.

4.5 Start the vue app container

Docker container: The entity at the runtime of the image. The relationship between an image and a container is like that between a class and an instance in object-oriented programming. An image is a static definition, and a container is an entity at the runtime of the image. Containers can be created, started, stopped, deleted, paused, etc.

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

docker run \
-p 3000:80 \
-d --name vueApp \
vuenginxcontainer

docker run starts a container based on an image
-p 3000:80 port mapping, mapping the host's port 3000 to the container's port 80
-d Run in background mode
--name container name to view docker process

docker ps

You can find that the container named vueApp is already running. Now visit http://localhost:3000

You should be able to access the vue application:

So far, a static resource service has been deployed through the docker container, and static resource files can be accessed. There is still no data for the /api/json interface. Let's solve this problem next.

5 Interface Services

Deploy another node container to provide interface services

5.1 Express Service

Use the node web framework express to write a service and register a route server.js that returns json data format:

'use strict';

const express = require('express');

const PORT = 8080;
const HOST = '0.0.0.0';

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 node environment. We build a new image based on node image.

5.2 Get node image

docker pull node

5.3 Write Dockerfile to docker the express application

FROM node

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 8080
CMD [ "npm", "start" ]

When building the image, the node_modules dependencies are installed directly through RUN npm install . Create a .dockerignore file in the project to ignore some files that are directly skipped:

node_modules
npm-debug.log

5.4 Build nodewebserver image

Run the build command:

 docker build -t nodewebserver . 

5.5 Start the nodeserver container

Based on the nodewebserver image just built, start a container named nodeserver to provide interface service port 8080 and map the host's port 5000

docker run \
-p 5000:8080 \
-d --name nodeserver \
nodewebserver

View the current docker process

docker ps 

It can be found that the nodeserver container is also running normally. Visit the following http://localhost:5000/json

Can access the json data written previously

So far, the backend interface service has also started normally. The interface can be called up by simply forwarding the page request interface to the backend interface service.

6. Cross-domain forwarding

I want to forward requests on the vueApp container to the nodeserver container. First, you need to know the ip address and port of the nodeserver container. It is currently known that the internal service of the nodeserver container listens on port 8080, so you only need to know ip .

6.1 View the IP address of the nodeserver container:

There are many ways to view the internal ip of the container. Here are two:

Enter the container to view

docker execute -it 02277acc3efc bash

cat /etc/hosts 

docker inspect [ containerId ] to directly view container information:

docker inspect 02277acc3efc

Find the Networks related configuration information:

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

6.2 Modify nginx configuration

Nginx configures location to point to node service default.conf (For front-end users who want to know more about Nginx, please refer to (Understand Nginx location matching in one article) for details about Nginx configuration and location.)

Add a rewrite rule to redirect /api/{path} to the /{path} interface of the target service. Add the following 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 vuenginxcontainer image, and when the image was first built, the nginx configuration default.conf was directly built into it. Therefore, if you need to modify default.conf, you have to rebuild a new image and then run a new container based on the new image.

7. Improvements

Is it possible to make the new configuration take effect by simply restarting the container every time the configuration file is modified? The answer is of course yes.

When building the image, the Nginx configuration is not copied to the image, but directly mounted on the host. After each configuration change, simply restart the container.

7.1 Modify the Dockerfile

Modify the Dockerfile under the vueclidemo project

FROM nginx
COPY 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. The nginx configuration is mounted on the host machine through the mount command. Let’s look at COPY dist/ /usr/share/nginx/html/ command. If the content under dist/ of the built project changes each time, you need to build a new image and start a new container again. Therefore, this command can also be deleted, and the container can be started by mounting.

7.2 Re-run the Vue application container

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

docker run \
-p 3000: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 host's sourceDir to the container's targetDir directory.
• The command run here is long. If it is troublesome to re-enter it every 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 make it take effect immediately. At this time, when we visit http://localhost:3000/api/json again, we can see that the interface can return normally, indicating that the forwarding is effective.

At this point, the forwarding of the interface service has also been adjusted.

7.3 Configuring Load Balancing

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

Based on the similar operations in Section 4.5, start a new container, and based on the similar operations in Section 5.1, check the IP address 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:8080;
  server 172.17.0.3:8080;
 }

 …

 location /api/ {
  rewrite /api/(.*) /$1 break;
  proxy_pass backend;
 }

8. Write at the end

Students who are not used to the command line can choose Kitematic to manage the status, data directory and network of docker containers. All operations on capacity can be performed visually, so I will not introduce them in detail here. Students who are interested can experience it by themselves.

9 Conclusion

Docker provides a very powerful automated deployment method and flexibility, decoupling multiple applications, and providing development agility, controllability, and portability. This article takes the Vue project as an example to implement the complete steps of deploying a front-end and back-end separated project using Docker. I hope it can bring some help to students who want to embrace Docker.

References

Docker official website
nginx official website
Docker from entry to practice
Kitematic user guide
What the front-end wants to know about Nginx
Understanding Nginx location matching in one article

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.