This article simply demonstrates how to deploy a Vue-developed front-end app using Docker.
A Vue application is made up of a set of static files, so we only need to publish it as a static resource to a web server.
In this case, we chose to use Nginx as a static web server and publish the Vue app to Nginx as static content.
Execute in the terminal
docker search nginx
You can see that there are many images associated with nginx, you can also search Nginx image in Docker Hub Website. In Docker Hub, you can more details of image, such as: Use Guide, Quick reference and Tag, etc.
NAME DESCRIPTION STARS OFFICIAL AUTOMATED
We select the official docker image, execute:
docker pull nginx
Once the pull is complete, it can be viewed through docker images, it is about 132M in size.
After the pull is complete, you can execute the following command to start the nginx container:
docker run --name nginx -d -p 80:80 nginx
After execution is complete, you can use a browser to browse localhost, and the default page of nginx can be displayed.
Next, let’s log in to the docker container to check some of the default configurations of the nginx image. Execute the following command:
docker exec -it nginx /bin/bash
After execution, the current terminal immediately enters the nginx container environment, in /etc/nginx you can find the corresponding configuration file of nginx, open the /etc/nginx/conf.d/default.conf file, you can see that the current default root directory is /uar/share/nginx/html.
You can change this configuration or even add a new web host (web).
In this exercise we use the default configuration and do not modify it.
Go to the project directory of the Vue app and execute:
vue-cli starts helping us build the final front-end app distribution package.If the front-end application needs to access the API services of the backend, modify the relevant configuration information in the application mainly before building
After the execution is completed, all the resources related to the application distribution are packaged and placed in the dist directory.
For more details about deployment with vue-cli, you can see the Vue-Cli Guide
After the above steps, we are ready to build a Docker image of the front-end application.
First, prepare the Dockerfile file.
Create a new file named Dockerfile in the project directory of vue, which reads as follows:
The file is as simple as starting with the nginx image and copying the contents of the dist directory to the /usr/share/nginx/html/ directory of the new image.
After saving, execute the following command to build the image:
docker build -t vue-web-app:1.0.0 .
Notice: the “.” sign at the end of the command (representing the current directory)
After the build, you can see the new image we created through the docker images.
To start the container, you can execute:
docker run --name vue-app -d -p 8090:80 vue-web-app:1.0.0
It can then be accessed through a browser:
You can see the result of the vue app running.