はじめに

こんにちは、Webエンジニアの岩田史門(@SI_Monxy)です！
今回はDocker、Laravel、Reactを用いたSPA開発のハンズオンについて記事を書いてみました！
改善点や修正点があれば、コメントにて優しくご指導いただけると嬉しいです！

概要

本記事では、Dockerを使用してLaravelバックエンドとReactフロントエンドの環境を構築し、SPA（Single Page Application）を開発する手法を解説します。Docker Composeを使用して複数のサービスを簡単に管理し、効率的な開発環境を整えます。

前提条件

以下のツールがインストールされていることを前提とします：

Docker
Docker Compose
Node.js
npm または yarn

環境構築

プロジェクトディレクトリの作成

まず、新しいディレクトリを作成し、プロジェクトのルートディレクトリとします。

mkdir laravel-react-spa
cd laravel-react-spa

Docker Composeファイルの作成

次に、docker-compose.yml ファイルを作成し、LaravelとReactのサービスを定義します。

version: '3.8'

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: laravel-app
    ports:
      - "8000:8000"
    volumes:
      - .:/var/www/html
    environment:
      - APP_ENV=local
      - APP_DEBUG=true
      - APP_KEY=base64:1pPeU6fFLFQgk9FkSi9uT2Rpe92cD7gHFkLktYHZ1I8=

  node:
    image: node:14
    container_name: react-app
    working_dir: /usr/src/app
    volumes:
      - ./frontend:/usr/src/app
    ports:
      - "3000:3000"
    command: sh -c "npm install && npm start"

  db:
    image: mysql:5.7
    container_name: mysql
    ports:
      - "3306:3306"
    environment:
      MYSQL_ROOT_PASSWORD: secret
      MYSQL_DATABASE: laravel
      MYSQL_USER: user
      MYSQL_PASSWORD: secret

Laravelの設定

Laravelプロジェクトの作成

次に、Laravelプロジェクトを作成します。プロジェクトルートで以下のコマンドを実行してください。

docker-compose run --rm app composer create-project --prefer-dist laravel/laravel backend

Dockerfileの作成

Dockerfileを作成し、Laravelアプリケーションのための環境を定義します。

FROM php:7.4-fpm

WORKDIR /var/www/html

RUN apt-get update && apt-get install -y \
    build-essential \
    libpng-dev \
    libjpeg-dev \
    libfreetype6-dev \
    locales \
    zip \
    jpegoptim optipng pngquant gifsicle \
    vim \
    unzip \
    git \
    curl

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

COPY . .

RUN composer install

EXPOSE 8000

CMD php artisan serve --host=0.0.0.0 --port=8000

Laravelの設定ファイル

Laravelの環境設定ファイル .env を編集し、データベース接続情報を設定します。

DB_CONNECTION=mysql
DB_HOST=db
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=user
DB_PASSWORD=secret

Reactの設定

Reactプロジェクトの作成

フロントエンド用のReactプロジェクトを作成します。プロジェクトルートで以下のコマンドを実行してください。

docker-compose run --rm node npx create-react-app frontend

Reactの設定ファイル

frontend ディレクトリ内の package.json に以下のスクリプトを追加します。

"proxy": "http://localhost:8000"

参考