Vue JS Web Application Setup

In this segment, we are going to create a sample Vue JS specific configuration steps like how to create a Vue JS Web Application. You can exclude below steps by cloning project from this link

git clone https://github.com/hanu-developer/docker-vuejs.git

Securing Vue JS Application using NGINX

Above created Docker Vue JS Web Application is powerful enough for production usage, but it’s simple and hackable enough to be used for testing, local development and learning.

For complex production use cases it may be wiser to use giants like NGINX or Apache. In our case we are using NGINX to serve our Vue JS Web Application because it is considered as one of the most performant and tested solutions.

 

Step 1: Creating a Dockerfile

Let’s refactor our Dockerfile to use NGINX or Delete the old Dockerfile and create a new one.

# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

 

Step 2: Build a Docker Vue JS image using Dockerfile

➜  docker build -t hanu4u89/docker-vuejs-nginx .
Sending build context to Docker daemon  148.9MB
Step 1/10 : FROM node:lts-alpine as build-stage
 ---> 1c342643aa5c
Step 2/10 : WORKDIR /app
 ---> Running in 85955f5faa4a
Removing intermediate container 85955f5faa4a
 ---> 597534e7f448
Step 3/10 : COPY package*.json ./
 ---> 21c8acaa8351
Step 4/10 : RUN npm install
 ---> Running in c71034cdb324

added 1273 packages from 867 contributors and audited 1279 packages in 22.383s

46 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Removing intermediate container c71034cdb324
 ---> 115c03b5f8be
Step 5/10 : COPY . .
 ---> e3d3f3ba66da
Step 6/10 : RUN npm run build
 ---> Running in df514c99701b

> docker-vuejs@0.1.0 build /app
> vue-cli-service build

-  Building for production...
 DONE  Compiled successfully in 5261ms1:17:05 AM

  File                                 Size               Gzipped
  dist/js/chunk-vendors.f0b6743d.js    89.18 KiB          31.93 KiB
  dist/js/app.b67b4f73.js              2.76 KiB           1.31 KiB
  dist/css/app.d40fc157.css            0.16 KiB           0.14 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

Removing intermediate container df514c99701b
 ---> f7184a45cb6b
Step 7/10 : FROM nginx:stable-alpine as production-stage
stable-alpine: Pulling from library/nginx
cbdbe7a5bc2a: Already exists
6ade829cd166: Pull complete
Digest: sha256:2668e65e1a36a749aa8b3a5297eee45504a4efea423ec2affcbbf85e31a9a571
Status: Downloaded newer image for nginx:stable-alpine
 ---> ab94f84cc474
Step 8/10 : COPY --from=build-stage /app/dist /usr/share/nginx/html
 ---> 8434beddfb05
Step 9/10 : EXPOSE 80
 ---> Running in 09a17a45ba18
Removing intermediate container 09a17a45ba18
 ---> eafd2720389b
Step 10/10 : CMD ["nginx", "-g", "daemon off;"]
 ---> Running in c7596bdcab42
Removing intermediate container c7596bdcab42
 ---> 55339fd8493d
Successfully built 55339fd8493d
Successfully tagged hanu4u89/docker-vuejs-nginx:latest

The command we used to build the Image from the Dockerfile is

docker build -t hanu4u89/docker-vuejs-nginx .

Step 3: Start the container from the image we have created

docker run -it -p 8084:80 -d --name docker-vuejs-nginx hanu4u89/docker-vuejs-nginx

 

Step 4: Validate the Vue JS Web Application running inside the container

You should be able to access the website from the Host machine (mac/windows)  at http://localhost:8080