How to deploy vue app with docker (Base on Nginx Image)

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.

Pull and configure the Nginx image

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
nginx                              Official build of Nginx.                        13374               [OK]
jwilder/nginx-proxy                Automated Nginx reverse proxy for docker con…   1828                                    [OK]
richarvey/nginx-php-fpm            Container running Nginx + PHP-FPM capable of…   778                                     [OK]
linuxserver/nginx                  An Nginx container, brought to you by LinuxS…   117
bitnami/nginx                      Bitnami nginx Docker Image                      85                                      [OK]
tiangolo/nginx-rtmp                Docker image with Nginx using the nginx-rtmp…   78                                      [OK]
.....

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.

Package the Vue app

Go to the project directory of the Vue app and execute:

npm build

Or

yarn build

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

Deploy vue app with docker

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:

FROM nginx

COPY dist/ /usr/share/nginx/html/

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:

http://localhost:80990/

You can see the result of the vue app running.