Docker with VueJs

Comprehensive guide: Docker configuration with the VueJs application

Let’s have a look at how to dockerize the Vue application, what a compose file is, and its use cases.

Table of contents:

1. What is docker?
2. What is container?
3. Difference between virtual machine and docker
4. Application of docker.
5. installation
    5.1. Ubantu installation
    5.2. Windows installation
6. Docker basic commands 
7. Create Vue project 
    7.1. Create docker file for that project
    7.2. build and run the docker container
8. What is docker compose file
    8.1. Create a docker compose file
    8.2. Explenation of that docker compose file

What is Docker?

Docker is a platform for creating, deploying, and managing applications inside self-contained, portable containers. It ensures consistency and scalability across different environments.

What are containers?

Containers isolate software from its surroundings, making it easy to deploy and run consistently across different computing environments.

They provide a standardized way to package, distribute, and manage applications, improving efficiency and reliability in software development and deployment processes.

Given that Docker and virtual machines do the same task, you may be wondering how they differ.

Difference between virtual machines vs Docker containers:

Key applications of Docker

1. Consistent development environment: Docker eliminates the age-old problem of “it works on my machine” by providing a consistent environment for developers across different platforms. Developers can package their applications along with all dependencies into Docker containers, ensuring that the application behaves the same regardless of where it’s run.
2. Microservices architecture: Docker facilitates the adoption of micro-services architecture, where applications are broken down into smaller, loosely coupled services. Each service can be packaged into its own container, making it easier to scale, update, and maintain them independently.
3. Continuous integration and continuous deployment (CI/CD): Docker plays an important role in modern CI/CD pipelines. Developers can build, test, and deploy their applications using Docker containers, streamlining the process and ensuring that the application behaves consistently across different stages of the pipeline.

Installation of Docker

Follow the instructions in the Docker documentation https://docs.docker.com/engine/install/ to install docker on your machine.

Ubuntu

Method 1: To install Docker desktop with Docker engine

1. Download the deb file for the Linux OS. File Link.
2. Run the command npm install apt-get ‘your_deb_file_path’ -y .

Method 2: To install Docker automatically with the Docker engine

sudo apt-get install docker docker.io

Windows

1. Download the executable file to install Docker desktop in Windows. (Link)
2. Verify the version in the command window.

To find out whether Docker is installed, run the following command: docker — version

Docker basic commands

Git quick notes: List of commands that are frequently used.

Creating our first Docker application with VueJs

Let say we have a Vue application and want to deploy it to our staging or production server. First, we make sure we have Docker configuration script included in the root directory of the application.

1. Create a project with vite vue-template:

2. Create a Docker file in your application:

Create a file with the name Dockerfileat the root of your application without any extension. Include the code below to tell Docker what to do when running in the production or staging environment:

3. Now, execute these commands to create a Docker container:

docker build -t my-vue-app .
docker run -it -p 3000:3000 - rm my-vue-app

After this, you can access the output on localhost:3000.

Docker Compose

Docker Compose is a tool that helps you define, configure, and run multi-container Docker applications. With Docker Compose, you can use a simple YAML file to specify all the services your application needs, like databases, web servers, and other components. Once defined, you can easily start and manage these services with a single command.

Key oints:

1. YAML File: You write a docker-compose.yml file to describe your application's services, networks, and volumes.
2. Multi-Container: It helps you manage multiple Docker containers as a single application.
3. Commands: You can use simple commands like docker-compose up to start all the services defined in the YAML file and docker-compose down to stop them.

An example of a docker-compose.yml file

Below is an example docker-compose.yml file for a web application with three services: frontend, backend, and nginx.

services:
  frontend:
    container_name: vueFrontendApp
    build: 
      context: ./vite-vuejs
      dockerfile: Dockerfile.dev
    # volumes:
    # - ./vite-vuejs/src:/app/src
    volumes:
    - type: bind
      source: ./vite-vuejs/src
      target: /app/src
    - type: volume
      target: /app/node_modules
    env_file:
    - ./vite-vuejs/.env.development
    # environment:
    #   - name=value
    #   - VITE_APP_PORT=2525
    depends_on:
      - backend
    ports:
      - "2525:2525"  
    restart: always
  backend:
    container_name: nodeBackend
    build: 
      context: ./node-backend
      dockerfile: Dockerfile.dev
    # volumes:
    #   - ./node-backend:/app
    #   - /app/node_modules 
    volumes:
    - type: bind
      source: ./node-backend
      target: /app
    - type: volume
      target: /app/node_modules
    ports:
      - "3000:3000"  
    restart: always
  nginx: 
    image: nginx
    volumes: 
    - ./conf.d:/etc/ngnix/conf.d
    depends_on:
      - frontend
    ports: 
    - 8012:80

Services

The services keyword is used to define different containers that make up your application. Each service runs in its own container.

Service: Frontend

• container_name: Names the container vueFrontendApp.
• build: Specifies build configuration:
• context: The path to the build context (./vite-vuejs).
• dockerfile: The Dockerfile to use (Dockerfile.dev).
• volumes: Mounts directories from the host to the container:
• bind mount: ./vite-vuejs/src to /app/src, allowing local changes to be reflected in the container.
• volume: A Docker-managed volume for node_modules, keeping dependencies consistent.
• env_file: Loads environment variables from ./vite-vuejs/.env.development.
• depends_on: Ensures the backend service starts before this one.
• ports: Maps port 2525 on the host to port 2525 in the container.
• restart: Always restarts the container if it stops (always).

Service: Backend

• container_name: Names the container nodeBackend.
• build: Specifies build configuration:
• context: The path to the build context (./node-backend).
• dockerfile: The Dockerfile to use (Dockerfile.dev).
• volumes: Mounts directories from the host to the container:
• bind mount: ./node-backend to /app, for real-time code updates.
• volume: A Docker-managed volume for node_modules.
• ports: Maps port 3000 on the host to port 3000 in the container.
• restart: Always restarts the container if it stops (always).

Service: nginx

• image: Uses the nginx image from Docker Hub.
• volumes: Mounts ./conf.d from the host to /etc/nginx/conf.d in the container for custom NGINX configuration.
• depends_on: Ensures the frontend service starts before this one.
• ports: Maps port 8012 on the host to port 80 in the container.

Compose file summary

This docker-compose.yml file describes an application with three main services:

1. Frontend: A Vue.js application built from a Dockerfile.
2. Backend: A Node.js application built from a Dockerfile.
3. nginx: An nginx web server.

Each service has specific configurations for building the container, mounting volumes, exposing ports, and setting dependencies. Using this file, Docker Compose can start and manage all services with a single command:

docker-compose up

If necessary, this command will build the images, create the containers, and start the application.

Output of docker compose up:

Running “docker-compose up” starts the frontend and backend containers. The output looks like this in the docker-desktop:

After running “docker-compose up,” the frontend and backend containers will be up and running. You will see the following output in your browser on the exposed ports.

Summary

In this article, we explored the process of creating a Vue application and containerizing it using Docker. We also covered how to configure it and demonstrated how to run multiple containers using a Docker Compose file, which can simplify developers’ daily workflows.

For more updates on the latest tools and technologies, follow the Simform Engineering blog.

Follow us: Twitter | LinkedIn