Build and Run Vue.js Application with Docker
In this article, I’m going to dockerize Vue application. We know that Docker is a set of platform-as-a-service (PaaS) products that use OS-level virtualization to deliver software in packages called containers. Let’s build and run app with Docker.You can take a look at basic docker commands.
Table of Contents
Step 1 : Create a Vue Project
You need to install Vue CLI if not installed on your PC.
npm install -g @vue/cli
Then run this command to create a Vue app:
# create project vue create hellovue # go to project folder cd hellovue
Step 2 : Create Dockerfile
A Dockerfile is a text document that contains all the commands a user could call on the command line to assemble an image. Create a file named Dockerfile at the root of your project. Now we’re are going to write some commands in the Dockerfile to run our project.
# develop stage FROM node:alpine as develop-stage WORKDIR /app COPY package*.json ./ RUN npm install COPY . . # build stage FROM develop-stage as build-stage RUN npm run build # production stage FROM nginx:alpine as production-stage COPY --from=build-stage /app/dist /usr/share/nginx/html EXPOSE 90 CMD ["nginx", "-g", "daemon off;"]
FROM node:alpine means, Docker will pull nodejs alpine version from Docker Hub. Alpine makes a great docker container, because it is so small and optimized to be run in RAM.
Step 3 : Make .dockerignore File
.dockerignore is to prevent files from being added to the initial build context that is sent to the Docker daemon when we do docker build. Here’s an example:
.git .DS_Store node_modules dist
Step 4 : Build and Run Container
We’ll build the project as a Docker container with this command:
docker build -t hellovue .
Now let’s run the container at port 90:
docker run -p 90:80 hellovue
http://localhost:90 and see the output like this:
We can also run the container with some attributes. Have a look at this page.The tutorial is over. You can download this project from GitHub. Thank you. ?
Preview may take a few seconds to load.
Below you will find some common used markdown syntax. For a deeper dive in Markdown check out this Cheat Sheet
Bold & Italic
Bold **double asterisks**
Three back ticks and then enter your code blocks here.
# This is a Heading 1
## This is a Heading 2
### This is a Heading 3
> type a greater than sign and start typing your quote.
You can add links by adding text inside of  and the link inside of (), like so:
To add a numbered list you can simply start with a number and a ., like so:
1. The first item in my list
For an unordered list, you can add a dash -, like so:
- The start of my list
You can add images by selecting the image icon, which will upload and add an image to the editor, or you can manually add the image by adding an exclamation !, followed by the alt text inside of , and the image URL inside of (), like so:
To add a divider you can add three dashes or three asterisks:
--- or ***