DockerでLaravel + React環境構築してAPI連携までやった【初心者向け・コピペOK】

⚠️ 本記事について
本記事はAIの補助を受けて作成しています。
内容の正確性には注意していますが、環境差異やバージョン違いにより動作しない可能性があります。
実行する際はご自身の環境に合わせてご確認ください。

DockerでLaravel + React環境構築してAPI連携までやる【コピペOK】

■この記事でできること

• LaravelをDockerで起動
• MySQLと接続
• ReactからAPI通信

👉 フルスタック開発のスタートラインに立てる

---

■完成イメージ

my-app/
 ├ docker-compose.yml
 ├ backend/（Laravel）
 └ frontend/（React）

---

■手順（この通りやればOK）

■① フォルダ作成

mkdir my-app
cd my-app
mkdir backend frontend

■② Laravel作成（Docker）

cd backend
docker run --rm -v ${PWD}:/app composer create-project laravel/laravel .
cd ..

■③ Dockerfile作成

touch backend/Dockerfile

FROM php:8.2-cli

WORKDIR /var/www

RUN apt-get update && apt-get install -y \
    unzip \
    git \
    curl \
    libzip-dev \
    && docker-php-ext-install pdo_mysql zip

COPY --from=composer:latest /usr/bin/composer /usr/bin/composer

CMD php -S 0.0.0.0:8000 -t public

■④ docker-compose.yml作成

touch docker-compose.yml

version: '3.8'

services:
  app:
    build: ./backend
    container_name: laravel_app
    ports:
      - "8000:8000"
    volumes:
      - ./backend:/var/www
    depends_on:
      - db

  db:
    image: mysql:8.0
    container_name: mysql_db
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: app_db
      MYSQL_USER: user
      MYSQL_PASSWORD: password
    ports:
      - "3307:3306"
    volumes:
      - db_data:/var/lib/mysql

volumes:
  db_data:

■⑤ DB設定（Laravel）

backend/.env

DB_CONNECTION=mysql
DB_HOST=db
DB_PORT=3306
DB_DATABASE=app_db
DB_USERNAME=user
DB_PASSWORD=password

■⑥ 起動

docker compose up -d --build

■⑦ 動作確認

ブラウザで👇

http://localhost:8000

DB接続確認👇

docker exec -it laravel_app bash
php artisan migrate

👉 エラーが出なければOK

■フロント（React）

■⑧ React作成

cd frontend
npm create vite@latest .
npm install
npm run dev

■⑨ API作成（Laravel）

routes/api.php

Route::get('/test', function () {
    return response()->json([
        'message' => 'ok'
    ]);
});

■⑩ API確認

http://localhost:8000/api/test

👉 JSONが出ればOK

■⑪ React → API疎通

import { useEffect, useState } from 'react';

function App() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    fetch('http://localhost:8000/api/test')
      .then(res => res.json())
      .then(data => setMessage(data.message));
  }, []);

  return (
    <div>
      <h1>API Test</h1>
      <p>{message}</p>
    </div>
  );
}

export default App;

👉 「ok」と表示されれば成功

■詰まりやすいポイント

■ポート競合

→ 3307に変更している

■Docker動かない

→ Docker Desktop起動

■CORSエラー

'paths' => ['api/*'],
'allowed_origins' => ['*'],

■まとめ

• Dockerで環境構築すれば再現性が高い
• API疎通が最初のゴール
• ここまでできれば開発に集中できる

👉 フルスタック開発のスタートライン完成