Last updated at 2023-10-22

Dockerize and Deploy Vue Application

AI Status
Last Edit By
Last edited time
Oct 22, 2023 08:44 AM
Oct 22, 2023
In this article, we will explore how to Dockerize a Vue application.
Dockerizing your application allows for easy deployment, scalability, and reproducibility across different environments.
We will cover the necessary steps to containerize a Vue app using Docker.


Before proceeding, ensure that you have the following prerequisites installed:

Step 1: Create a Vue App

First, let's create a new Vue application using the Vue CLI. Open your terminal and run the following command:
vue create dockerized-vue-app
This will create a new Vue app named dockerized-vue-app in a directory with the same name. Enter the directory by running:
cd dockerized-vue-app

Step 2: Create a Dockerfile

To Dockerize our Vue app, we need to create a Dockerfile in the root directory of our project. This file will contain instructions for building the Docker image.
Create a new file named Dockerfile and add the following content:
# Base image FROM node:14 as build # Set working directory WORKDIR /app # Copy package.json and package-lock.json COPY package*.json ./ # Install dependencies RUN npm install # Copy the rest of the app's code COPY . . # Build the app RUN npm run build # Production image FROM nginx:1.21 # Copy built app from previous stage COPY --from=build /app/dist /usr/share/nginx/html # Expose port 80 EXPOSE 80 # Start Nginx server CMD ["nginx", "-g", "daemon off;"]
This Dockerfile defines a multi-stage build. In the first stage, it uses the node:14 base image, copies the necessary files, installs dependencies, and builds the Vue app. In the second stage, it uses the nginx:1.21 base image and copies the built app from the previous stage. Finally, it exposes port 80 and starts the Nginx server.

Step 3: Build the Docker Image

To build the Docker image of our Vue app, run the following command in the terminal:
docker build -t dockerized-vue-app .
This command builds the Docker image with the tag dockerized-vue-app. Make sure to include the . at the end, as it specifies the build context as the current directory.

Step 4: Run the Docker Container

Once the Docker image is built, we can run a Docker container based on that image. Execute the following command:
docker run -p 8080:80 dockerized-vue-app
This command runs a Docker container based on the dockerized-vue-app image and maps port 8080 of the host machine to port 80 of the container.
Now, if you visit http://localhost:8080 in your browser, you should see your Vue app running inside the Docker container!


In this article, we learned how to Dockerize a Vue application. We went through the steps of creating a Vue app, writing a Dockerfile, building a Docker image, and running a Docker container. Dockerizing your Vue app enables easy deployment and scalability, making it a valuable skill for seasoned developers.


Happy Dockerizing!
Rather than using http-server, use serve

Discussion (0)

Related Posts