Build a SPA for Laravel 6.2 / Vue.js / Nginx / Mysql / Redis with Docker

What is Docker

It has been a long time since the usefulness of Docker and the usefulness of SPA (Single Page Application) have been emphasized, and I think that Docker / SPA has become quite popular these days. Docker creates a virtual environment for running web applications such as Laravel, and this Docker environment can also be deployed in production. This time, let's create a PHP + Vue.js SPA with Laravel on Docker.

Docker-comppse is a so-called orchestration tool that creates and manages multiple Docker images.

Docker installation

First, install Docker.

1. Windows users should use Docker for Windows. If you are using Windows 7 or something, you may be able to use Docker toolbox (note that toolbox is Deprecated)
2. Mac users should use Docker for Mac.
3. An Ubuntu 18 user like me installs as follows: First, erase the old Docker.

$ sudo apt-get remove docker docker-engine docker.io

Then install from the official repository.

$ sudo apt-get update
# To enable https connection.
$ sudo apt-get install apt-transport-https ca-certificates curl software-properties-common
# To download GPG key.
$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
# Install the docker repository.
$ sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu  $(lsb_release -cs)  stable" 
$ sudo apt-get update
# Install Docker.
$ sudo apt-get install docker-ce

Check if Docker was installed successfully

Let's check if Docker has been installed successfully. If you type the following command on the terminal and the version is displayed, it is successful.

docker --version
#Docker version 19.03.5, build 633a0ea838

It is OK if the version can be displayed like this.

Also check Docker-compose

Docker-compose should have been installed along with the Docker installation. Check with the following command. If the version is displayed, it is successful.

docker-compose -v
#docker-compose version 1.24.1, build 4667896b

Try using Docker and Docker-compose

Drop the docker-compose file from my git repository and run it with the following command.

$ git clone https://github.com/lechatthecat/laravel-coreuivue-integration
$ cd laravel-coreuivue-integration
$ docker-compose up -d --build
$ docker-compose exec laravel ash
$ ash ./laravel_build.sh

Then you can see that Core UI vue is running locally. http://localhost:10080/

However, since it was troublesome, I only made the dashboard and login pages properly. Click here for a proper demo page. https://coreui.io/vue/demo/3.1.0/#/dashboard

Since it is an MIT license, it can be used for commercial purposes if the rights are properly displayed.

docker compose config file

The docker-compose file dropped from Git has these settings. You can see that you are using Nginx / Mysql / Redis properly.

version: "3.5"
#Used when sharing volume between containers
x-services-volume:
  &laravel-volume
  type: bind
  source: ./laravel-coreui
  target: /laravel-coreui

services:
  laravel:
    container_name: laravel
    depends_on:
      - mydb
      - myredis
    build:
      context: .
      dockerfile: docker/laravel/Dockerfile
      args:
        - TZ=${TZ}
    # bind mount
    volumes:
      - <<: *laravel-volume
      - ./docker/laravel/laravel_build.sh:/laravel-coreui/laravel_build.sh
      - ./logs:/var/log/php
      - ./docker/laravel/php.ini:/usr/local/etc/php/php.ini
    working_dir: /laravel-coreui
    environment:
      - DB_CONNECTION=mysql
      - DB_HOST=db
      - DB_DATABASE=${DB_NAME}
      - DB_USERNAME=${DB_USER}
      - DB_PASSWORD=${DB_PASSWORD}
      - TZ=${TZ}
    networks:
      - app_net
  # nginx 1.17
  web:
    container_name: my_nginx
    image: nginx:1.17-alpine
    depends_on:
      - laravel
    ports:
      - 10080:80
    volumes:
      - *laravel-volume
      - ./logs:/var/log/nginx
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf:z
    environment:
      - TZ=${TZ}
    networks:
      - app_net
  # MySQL 8.0
  mydb:
    container_name: mydb
    image: mysql:8.0
    volumes:
      - db-store:/var/lib/mysql
      - ./logs:/var/log/mysql:z
      - ./docker/mysql/my.cnf:/etc/mysql/conf.d/my.cnf:z
    ports:
      - 13306:3306
    environment:
      - MYSQL_DATABASE=${DB_NAME}
      - MYSQL_ROOT_PASSWORD=${DB_PASSWORD}
      - MYSQL_USER=${DB_USER}
      - MYSQL_PASSWORD=${DB_PASSWORD}
      - TZ=${TZ}
    networks:
      - app_net
  # redis 5.0.5 
  myredis:
    container_name: myredis
    image: redis:5.0.5-alpine
    # bind mount
    volumes:
      - redis-store:/data
      - ./logs:/var/log/redis.log:z
      - ./docker/redis/my.conf:/etc/redis/my.conf:z
    ports:
      - 16379:6379
    command: redis-server /etc/redis/my.conf
    networks:
      - app_net
networks:
    # Containers in same network can access each other by using its container name as host name
    app_net:
        driver: "bridge"
volumes:
  db-store:
  redis-store: