Building a Laravel and Next.js Project with Docker: A Step-by-Step Guide

In modern web development, combining the power of Laravel, a robust PHP framework, with Next.js, a popular React framework, can deliver an exceptional full-stack web application experience. To enhance the development process and facilitate deployment, Docker provides an efficient containerization solution. In this article, we'll explore a step-by-step guide on how to build a Laravel and Next.js project using Docker.

Table of Contents:

1.Prerequisites
2.Setting up Laravel Backend with Docker
2.1 Dockerizing the Laravel Backend
2.2 Defining the Docker Compose File
2.3 Establishing Communication with the Next.js Frontend
3.Building the Next.js Frontend with Docker
3.1 Dockerizing the Next.js Frontend
3.2 Defining the Docker Compose File
3.3 Connecting to the Laravel Backend
4.Deploying the Docker Containers
5.Conclusion

Section 1: Prerequisites

Before diving into the implementation, it's essential to ensure you have the necessary tools installed, including Docker, Composer, and Node.js.

Section 2: Setting up Laravel Backend with Docker

2.1 Dockerizing the Laravel Backend:

Create a Dockerfile in the root directory of your Laravel project with the following content:

FROM php:8.0-fpm

WORKDIR /var/www/html

RUN apt-get update && apt-get install -y \
    curl \
    libpng-dev \
    libonig-dev \
    libxml2-dev \
    libzip-dev \
    zip \
    unzip \
    git \
    nano

RUN docker-php-ext-install pdo_mysql mbstring exif pcntl bcmath gd zip

COPY . /var/www/html

RUN chown -R www-data:www-data /var/www/html/storage

CMD ["php-fpm"]


EXPOSE 9000

2.2 Defining the Docker Compose File:

Create a docker-compose.yml file in the project's root directory with the following content:

version: "3"
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "8000:9000"
    volumes:
      - .:/var/www/html
    depends_on:
      - db

  db:
    image: mariadb:10.6
    ports:
      - "3306:3306"
    environment:
      MYSQL_DATABASE: newsDb
      MYSQL_USER: root
      MYSQL_PASSWORD: secretnewsDb
      MYSQL_ROOT_PASSWORD: secretnewsDb
    volumes:
      - ./mysql:/var/lib/mysql

2.3 Establishing Communication with the Next.js Frontend:

Update your Laravel application's API endpoints to point to the Docker network and the correct Laravel container URL. Make sure to use the appropriate container names or aliases defined in the Docker Compose file (e.g., http://laravel-container:9000/api).

Section 3: Building the Next.js Frontend with Docker

3.1 Dockerizing the Next.js Frontend:

Create a Dockerfile in the root directory of your Next.js project with the following content:

FROM node:16-alpine
RUN mkdir -p /app
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

3.2 Defining the Docker Compose File:

Update the docker-compose.yml file in the project's root directory with the following content:

version: "3"
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    volumes:
      - .:/app
    depends_on:
      - laravel

  laravel:
    # Configuration for Laravel backend service

  db:
    # Configuration for the database service

3.3 Connecting to the Laravel Backend:

Update your Next.js application's API endpoints to point to the Docker network and the correct Laravel container URL. Make sure to use the appropriate container names or aliases defined in the Docker Compose file (e.g., http://laravel-container:9000/api).

Section 4: Deploying the Docker Containers

To deploy the Docker containers, open a terminal in the project's root directory and run the following command:

docker-compose up --build

This command will build the Docker images for both the Laravel backend and Next.js frontend and start the containers. Once the containers are up and running, open another terminal and follow the steps below to set up the database for the Laravel backend.

4.1 Accessing the Laravel Backend Container:

Open a new terminal window and run the following command to access the running Laravel backend container:

docker-compose exec app bash

This command will open a bash session inside the Laravel container.

4.2 Running Database Migrations:

Once you are inside the Laravel container, run the following command to execute the database migrations:

php artisan migrate

This command will create the necessary database tables based on the migration files defined in your Laravel project.

4.3 Verifying the Database Setup:

After running the migrations, you can verify the database setup by accessing the MySQL container. Open another terminal window and run the following command:

docker-compose exec db bash

This command will open a bash session inside the MySQL container. Once inside the container, you can use the MySQL command-line client to connect to the database and perform any necessary checks or queries.

Section 5: Conclusion

In this article, we explored a step-by-step guide on building a Laravel and Next.js project with Docker. By Dockerizing both the Laravel backend and Next.js frontend, establishing communication between the containers, and deploying the application, you can streamline your development and deployment processes. Leveraging Docker's containerization capabilities allows for efficient collaboration and scalability.

Note: This article provides a high-level overview of building a Laravel and Next.js project with Docker. For detailed instructions, code examples, and further exploration, it's recommended to refer to the official documentation of Laravel, Next.js, and Docker.

GitHub Repositories:

Laravel Backend Example: https://github.com/sasithwarnakafonseka/backend-laravel-api
Next.js Frontend Example: https://github.com/sasithwarnakafonseka/react-news-app