はじめに
こんにちは、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"