Dockerizing Laravel Backend and Ionic Frontend: A Step-by-Step Guide

Introduction:

Briefly explain the benefits of using Docker for containerization.
Highlight the advantages of Dockerizing Laravel and Ionic applications.

before we start we need to install docker Desktop in our machines,
Installing Docker:

we start with a clean tree in docker having no containers or images;

Section 1: Dockerizing the Laravel Backend
1.2 Setting Up a Laravel Project:

Briefly explain Laravel and its benefits for backend development.

Creating a Dockerfile:

Dockerfile Content :

# Set the base image
FROM php:8.1.0-fpm-alpine3.14

# Install Node.js and npm
RUN apk add --no-cache nodejs npm

# Install Composer
RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer

# Install PHP extensions
RUN docker-php-ext-install pdo pdo_mysql
RUN apk add --no-cache libzip-dev && docker-php-ext-install zip
RUN apk add --no-cache freetype-dev libjpeg-turbo-dev libpng-dev \
    && docker-php-ext-configure gd --with-freetype --with-jpeg \
    && docker-php-ext-install gd

# Set working directory
WORKDIR /var/www/html

# Copy files from your project to the container
COPY . .

# Copy environment file
COPY .env.example .env

# Install Composer and npm dependencies
RUN composer install
RUN npm install

docker-compose.yml Content :

version: '2.0'

networks:
  LPS:


services:
  mysql:
    image: mysql:8
    container_name: LPS_mysql_stayfit
    ports:
      - "3306:3306"
    volumes:
      - "./data/mysql:/var/lib/mysql"
    restart: unless-stopped
    tty: true
    environment:
      MYSQL_DATABASE: stayfit
      MYSQL_ROOT_PASSWORD: root
      MYSQL_SERVICE_NAME: mysql
    networks:
      - LPS


  php:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: LPS_php_stayfit
    ports:
      - "8100:8100"
    volumes:
      - "./:/var/www/html"
    networks:
      - LPS

before starting our images, we need to update our .env file :

DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=stayfit
DB_USERNAME=root
DB_PASSWORD=root

1.4 Building and Running the Docker Image

docker-compose build --no-cache --force-rm

docker-compose up -d

Result should look like this after runing the previous Command :

checking database if exists with two methods :

first with command in console :

docker exec -it LPS_mysql_stayfit sh

second method with docker desktop (open in terminal ) :

the same thing for accessing the laravel Envirement ( console ) :

docker exec -it LPS_php_stayfit sh 

run composer install

php artisan migrate 

php artisan seed:db

and finally let run our project :

php artisan serve --host=0.0.0.0 --port=8100

To Dockerize your Ionic project, you can follow these steps:

Step 1: Create a Dockerfile
Create a file named Dockerfile in the root directory of your Ionic project. This file will contain instructions for building a Docker image for your project.

# Stage 1: Build the Ionic app
FROM node:16-alpine as build
WORKDIR /app
COPY package*.json /app/
RUN npm install --legacy-peer-deps
COPY . .
RUN npm run build

# Stage 2: Serve the built app using Nginx
FROM nginx:alpine
RUN rm -rf /usr/share/nginx/html/*
COPY --from=build /app/www/ /usr/share/nginx/html/

# Install Node.js and npm in the Nginx container
RUN apk add --no-cache nodejs npm

CMD ["nginx", "-g", "daemon off;"]

Step 2: Build the Docker image
Open a terminal or command prompt, navigate to the root directory of your Ionic project where the Dockerfile is located, and run the following command to build the Docker image:

docker build -t ionic-1 .

Step 3: Run the Docker container

Once the Docker image is built, you can run a container based on it using the following command:

docker run -p 8080:80 ionic-1

our final result look like this for ionic and laravel containers :