Dockerizing Laravel Backend and Ionic Frontend: A Step-by-Step Guide
Tags: docker, webdev, laravel, containers
Published: 2023-07-11 12:22:15

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;

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lg1eseh6wjbwuz2oz9iv.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1umt9kj7q4w6m0mvpemc.png)






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:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmtdisadzx4mma826bjw.png)

Dockerfile Content : 

```javascript
# 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 : 

```javascript
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 : 

```javascript
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

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1s160kohpb7r6h4ax59u.png)



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mlmefhor0nlkjz5h7unk.png)




```javascript
docker-compose up -d
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zd7znqct951bpmalvo79.png)



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a3cpq55ldexnhmga9zj2.png)

Result should look like this after runing the previous Command : 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oxrs3x9pz32sxlvjjrwb.png)



checking database if exists with two methods : 

first with command in console : 

```javascript
docker exec -it LPS_mysql_stayfit sh

```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/psrqvonk1l3b1oezgcz1.png)

second method with docker desktop (open in terminal ) : 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36v0401cbiwr8dcsf7s5.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t0946v4sn0s14l9nkzpk.png)

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

```javascript
docker exec -it LPS_php_stayfit sh 
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ctpxv3iqcv6ncwqeufev.png)

run composer install 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a3dcaw1544d7fdhnuacb.png)

```javascript
php artisan migrate 

php artisan seed:db
```

and finally let run our project : 

```javascript
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.

```javascript 
# 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:


```javascript
docker build -t ionic-1 .
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/blypemww27gjdjeevz91.png)


Step 3: Run the Docker container

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


```javascript
docker run -p 8080:80 ionic-1
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y6hogjqejbjak3qwk0b1.png)


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ghc2ggbxwff0o49h2m4.png)