I. Introduction
This article describes how to use the Docker deploy Vue program.
Second, install Nginx
We deploy Vue program relies on Nginx, first pull Nginx mirroring, mirrored here with the latest Nginx
docker pull nginx
as the picture shows
We view mirror
Nginx has been mirrored.
We run container according to nginx Mirror
docker run --name=nginx -d -p 4030:80 nginx
as the picture shows
Then visit the port in 4030 inside the browser, verify that the vessel is operating properly
Screenshot above appears, indicating that the vessel is operating normally.
Third, create a program Vue
1. Create a project
We use the following command to create a Vue program, created here using PowerShell
view create docker-view
Creation process is omitted, created
Use VSCode open the project, then run command
npm run serve
as the picture shows
Access in the browser
2. Compile project
After the project is created, we compile the project
npm run build
as the picture shows
After the completion of the translation, in the root directory of the project will generate a dist folder, which is compiled project
3, add Dockerfile file
We want to build a mirror, we must rely Dockerfile file, we create a Dockerfile file in the root directory of the project, there is no extension, the file contents are as follows
# Set the base image here using the latest nginx mirror, as already pulled over FROM nginx #Define of Edison MAINTAINER Edison # Dist copy the contents of the file to / usr / share / nginx / html / directory below COPY dist/ /usr/share/nginx/html/
4, upload files
We created under vue folder in Linux demo folder, then upload dist folders and files to that directory Dockerfile
5, mirror Construction
After the file upload, we constructed mirror Vue program
docker build -t dockervue .
as the picture shows
You can see the image build success.
6, run container
We went to run a mirror image constructed according to the step
docker run --name=dockervue -d -p 9020:80 dockervue
as the picture shows
Container can be seen running, we visited the port in 9020 inside the browser
Vue uses Docker can see the deployment is successful.