Effortlessly Dockerize Your Laravel & Vue Application: A Step-by-Step Guide

In today’s fast-paced development world, the ability to quickly set up, share, and deploy applications is invaluable. Docker offers a seamless solution, but integrating it with a Laravel & Vue stack can seem daunting. Fear not! This guide will walk you through dockerizing your Laravel 10, Vite, Vue 3 application, complete with MySQL, ensuring a smooth development process that’s easy to share with your team.

Prerequisites

• A Laravel application to containerize.
• Docker installed.
• Docker Compose installed.

Why Use Docker for Laravel?

Utilizing Docker with Laravel brings several key benefits, enhancing the development and deployment lifecycle:

• Environment Consistency: Docker guarantees that your Laravel application runs in the same environment everywhere, reducing deployment issues and streamlining development.
• Ease of Deployment: Deploying your Laravel application becomes straightforward with Docker, as it packages your application with all its dependencies.
• **Isolation of Services: **Docker separates your application’s components into different containers, improving security and scalability while making updates easier.
• Rapid Development: Docker enables quick setup and tear-down of environments for testing, speeding up the development cycle.
• **Streamlined Collaboration: **By ensuring all team members work in identical environments, Docker simplifies collaboration and onboarding.

How to Deploy Laravel/Vue App with Docker?

Step 1: Configure .env File

• Navigate to the main app directory:

cd [project_dir]

2. Open .env file & setup DB configuration for development.

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:yMcxhIy0bg9R3OnKXiceUhkp/V2RRnfjtJmHo9NlZ38=
APP_DEBUG=true
APP_URL=http://localhost:8000
VITE_CLIENT_URL=http://localhost:3000


LOG_CHANNEL=daily
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug

DB_CONNECTION=mysql
DB_HOST=db
DB_PORT=3306
DB_DATABASE=laravel_local
DB_USERNAME=username
DB_PASSWORD=password

Step 2: Crafting the Dockerfile:

Create a Dockerfile for your Laravel application in the project root directory. This file instructs Docker on how to build the image of your Laravel app, installing PHP dependencies, Composer, and setting up the working directory.

# Set the base image for subsequent instructions
FROM php:8.2-fpm

# Install dependencies
RUN apt-get update && apt-get install -y \
    build-essential \
    libpng-dev \
    libonig-dev \
    libxml2-dev \
    zip \
    curl \
    unzip \
    git \
    libzip-dev \
    libfreetype6-dev \
    libjpeg62-turbo-dev \
    libpng-dev && \
    docker-php-ext-install pdo_mysql mbstring exif pcntl bcmath gd zip

# Clear cache
RUN apt-get clean && rm -rf /var/lib/apt/lists/*

# Install Composer
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer

# Set working directory
WORKDIR /var/www

# Remove default server definition
RUN rm -rf /var/www/html

# Copy existing application directory contents
COPY . /var/www

# Copy existing application directory permissions
COPY --chown=www-data:www-data . /var/www

# Change current user to www
USER www-data

# Expose port 9000 and start php-fpm server
EXPOSE 9000
CMD ["php-fpm"]

3. Nginx Configuration:

An nginx.conf file configures Nginx to serve your Laravel app, ensuring requests are properly routed and static files served efficiently.

server {
    listen 80;
    index index.php index.html;
    error_log  /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
    root /var/www/public;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {
        fastcgi_pass app:9000; #name of the sevice that runs the laravel app in docker-compose.yml file
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }

    location ~ /\.ht {
        deny all;
    }
}

4. Dockerfile.node for Vue with Vite:

Create a separate file Dockerfile.nodein the project root directory for your Vue frontend. This includes installing Node.js, your project dependencies, and setting up Vite for hot module replacement (HMR).

# Set the base image
FROM node:20

# Set working directory
WORKDIR /var/www

# Copy `package.json` and `package-lock.json`
COPY package*.json ./

# Install project dependencies
RUN npm install

# Copy project files into the docker image
COPY . .

# Expose the port Vite runs on
EXPOSE 3000

# Start the Vite server
CMD ["npm", "run", "dev"]

Step 5: Create docker-compose.yml

In the project root directory create docker-compose.yml file. This file defines how your Docker containers interact, linking your Laravel application, Vue frontend, Nginx server, and MySQL database.

version: '3.8'

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    image: my-laravel-app
    container_name: my-laravel-app
    restart: unless-stopped
    working_dir: /var/www
    volumes:
      - ./:/var/www
      - ./.env:/var/www/.env
    environment:
      - APP_ENV=local
    networks:
      - app-network

  nginx:
    image: nginx:alpine
    container_name: my-nginx
    ports:
      - "8000:80"
    volumes:
      - ./:/var/www
      - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro
    depends_on:
      - app
    networks:
      - app-network        

  node:
    platform: linux/arm64/v8 #this line is optional if you are using Mac Silicon chip (M1/M2/M3)
    build:
      context: .
      dockerfile: Dockerfile.node
    image: my-laravel-node
    container_name: my-laravel-node
    ports:
    - "3000:3000"
    restart: unless-stopped
    working_dir: /var/www
    volumes:
      - ./:/var/www
      - /var/www/node_modules
    networks:
      - app-network

  db:
    platform: linux/x86_64 #this line is optional if you are using Mac Silicon chip (M1/M2/M3)
    image: mysql:8.0
    container_name: my-mysql
    restart: unless-stopped
    environment:
      MYSQL_DATABASE: ${DB_DATABASE}
      MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
      MYSQL_PASSWORD: ${DB_PASSWORD}
      MYSQL_USER: ${DB_USERNAME}
    volumes:
      - dbdata:/var/lib/mysql
    networks:
      - app-network
    ports:
      - "3306:3306"

networks:
  app-network:
    driver: bridge

volumes:
  dbdata:
    driver: local

Step 6: Modify vite.config.js file for Hot Reloading:

Configure Vite for hot reloading by adjusting vite.config.js, ensuring a smooth development experience with real-time updates in your Dockerized environment.

server: {
        hmr: {
            host: "0.0.0.0",
        },
        port: 3000,
        host: true,
    },


//My vite.config.js will becomes like this

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
    server: {
        hmr: {
            host: "0.0.0.0",
        },
        port: 3000,
        host: true,
    },
    plugins: [
        vue(),
        laravel({
            input: ["resources/css/app.css", "resources/js/app.js"],
            refresh: true,
        }),
    ],
});

Step 7: Build Application using docker-compose:

With the Docker Compose file complete, proceed to create the Docker image for the app. Type the command below while in the main app directory:

docker-compose build

Wait for the procedure to finish. If there are no errors, Docker Compose outputs the list of created containers.

Step 8: Start Application

The final step involves using Docker Compose to start the containers for all defined services in docker-compose.yml Execute the following command to start the procedure:

docker-compose up -d

Finally, navigate to the following address in a browser:

localhost:8000

Your deployed app should now be visible in the browser window.

With the Vite configuration tailored for our Docker environment, any changes made to the frontend code during development will be reflected instantly in your browser without the need for manual reloading or refreshing. This setup enhances your development workflow by providing immediate feedback on changes, making it easier to iterate and debug.

Congratulations! You’ve successfully dockerized your Laravel & Vue application for development env. This setup not only streamlines your development process but also ensures that your team can collaborate efficiently, regardless of their local development environments. With Docker, you’re one step closer to achieving a seamless development and deployment workflow. Dive in, experiment, and feel the difference in your development lifecycle.

Embrace this guide as a starting point. Docker offers vast possibilities to optimize and secure your development environments further. Engage with the community, share your insights, and let’s innovate together. Happy Dockerizing!