Laravel + Vue 3 Docker 開発環境構築手順

■ はじめに

Social Databank Advent Calendar 2025 の 18 日目です。

こんにちは。エンジニアの西崎です。

今回は laravel・vue3 の開発環境を作る手順を記事にまとめていきたいと思います。

---

1. ディレクトリ作成

ディレクトリ構成

laravel-vue-app/
├─ backend/          # PHP（Laravelなど）
│   ├─ Dockerfile
│   └─ ...
├─ frontend/         # Vue3 + TS
│   ├─ Dockerfile
│   ├─ package.json
│   └─ ...
├─ docker-compose.yml
└─ .env

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

mkdir laravel-vue-app

cd laravel-vue-app

mkdir backend frontend
touch docker-compose.yml

2. Backend: Laravel プロジェクト作成

cd backend

docker run --rm -v $(pwd):/app -w /app composer:2.7 create-project laravel/laravel:^12.0 .

3. Frontend: Vue 3 プロジェクト作成

cd ../frontend

npm create vue@latest .

対話形式でいくつか質問されるので以下を参考に設定する

質問	推奨
Package name	frontend
Select features	TypeScript, Router, Pinia, Vitest, ESLint, Prettier
Experimental features	None
Skip example code	Yes

作成後、必要に応じて追加

npm install axios zod vee-validate

4. backend/Dockerfile を作成（PHP 8.4）

backend/Dockerfile

FROM php:8.4-fpm

RUN apt-get update && apt-get install -y \
    git unzip libpng-dev libonig-dev libxml2-dev zip curl \
 && docker-php-ext-install pdo_mysql mbstring exif pcntl bcmath gd

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

WORKDIR /var/www/html

RUN useradd -m www && chown -R www:www /var/www/html
USER www

EXPOSE 8000

5. frontend/Dockerfile を作成（Vue3 + TS + Vite）

frontend/Dockerfile

FROM node:20-alpine

WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .

EXPOSE 5173

6. docker-compose.yml を作成

laravel-vue-app/docker-compose.yml

services:
  app:
    build: ./backend
    container_name: php-app
    volumes:
      - ./backend:/var/www/html
    ports:
      - "8000:8000"
    environment:
      DB_HOST: db
      DB_DATABASE: laravel-vue-app
      DB_USERNAME: root
      DB_PASSWORD: password
    depends_on:
      - db
    working_dir: /var/www/html
    command: php artisan serve --host=0.0.0.0 --port=8000

  db:
    image: mysql:8.0
    container_name: mysql-db
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: laravel-vue-app
      TZ: Asia/Tokyo
    volumes:
      - db_data:/var/lib/mysql
    ports:
      - "3306:3306"

  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    container_name: vue-frontend
    ports:
      - "5173:5173"
    volumes:
      - ./frontend:/app
      - /app/node_modules
    working_dir: /app
    command: npm run dev -- --host
    environment:
      - CHOKIDAR_USEPOLLING=true

volumes:
  db_data:

7. Docker 起動

cd laravel-vue-app

docker compose build
docker compose up -d

8. 動作確認

Laravel: http://localhost:8000 → Welcome ページ
Vue: http://localhost:5173 → Hello World

9. Laravel API と Vue の連携

Laravel 側

DB の設定

backend/.env

DB_CONNECTION=mysql
DB_HOST=db
DB_PORT=3306
DB_DATABASE=laravel-vue-app
DB_USERNAME=root
DB_PASSWORD=password

API ルートを作成

cd laravel-vue-app

docker compose exec app bash
php artisan install:api

backend/routes/api.php

use Illuminate\Support\Facades\Route;

Route::get('/hello', function () {
    return ['message' => 'Hello from Laravel API!'];
});

確認

http://localhost:8000/api/hello をブラウザで叩いて、
"message": "Hello from Laravel API!" が帰ってくれば OK！

Vue 側

axios 通信を確認

frontend/src/App.vue

<script setup lang="ts">
  import axios from 'axios';
  import { ref, onMounted } from 'vue';

  const message = ref('Loading...');

  onMounted(async () => {
    const res = await axios.get('http://localhost:8000/api/hello');
    message.value = res.data.message;
  });
</script>

<template>
  <h1>{{ message }}</h1>
</template>

再読み込みして Hello from Laravel API! と出れば、
バックエンドとフロントエンドの接続成功！

10. DB の確認

cd laravel-vue-app

docker compose exec db bash

> mysql -u root -ppassword laravel-vue-app

> show tables

+------------------------+
| Tables_in_app          |
+------------------------+
| cache                  |
| cache_locks            |
| failed_jobs            |
| job_batches            |
| jobs                   |
| migrations             |
| password_reset_tokens  |
| personal_access_tokens |
| sessions               |
| users                  |
+------------------------+

11. 開発環境の起動と停止

# 起動
docker compose up -d

# 停止
docker compose down

12. その他設定

MySQL Workbench の接続設定

項目	入力する値	備考
Connection Name	任意の名前	例：laravel-vue-app
Hostname	127.0.0.1	または localhost
Port	3306	docker-compose.yml に設定している値 services.db.ports
Username	root	docker-compose.yml に設定している値 services.db.environment.MYSQL_ROOT_PASSWORD
Password	password	Store in Keychain を押す

まとめ

この記事では、Laravel + Vue 3 の開発環境をDocker を使ってローカルに構築する手順を解説しました。

• Docker / docker-compose による環境構築
• Laravel と Vue 3 の役割分離
• ローカルでの動作確認方法

を一通り押さえることで、誰でも同じ環境を再現できる状態になっているはずです。

環境構築でつまずいたときは、docker-compose.yml や .env の設定を改めて確認すると原因を切り分けやすくなります。

あとはこの環境をベースに、

• API 実装（Laravel）
• フロントエンド開発（Vue 3）
• 認証や外部 API 連携

など、実際の開発を進めてみてください。