DockerでLaravel 11とViteを使った最新開発環境を構築完全ガイド

sass laravel docker vite fontawesome

2024/10/13

Nextman

本記事では、Dockerを使用してLaravel、Vite、SASSを組み合わせた開発環境を構築する方法を初心者向けに解説します。

リアルタイムでCSSやJSをホットリロードできる開発環境をゼロから構築し、素早い開発が可能な環境を整えます。

1. 環境構築に必要な準備

必要なツール

Docker：コンテナ技術で開発環境を管理
Node.js & npm：フロントエンドビルドのためのツール
Laravel：PHPフレームワーク
Vite：CSS/JSのホットリロードができる最新ビルドツール

2. プロジェクトセットアップ

まずLaravelのプロジェクトをDockerでセットアップします。

ディレクトリ構造

/
|── docker/nginx/
|   └── default.conf
│── docker-compose.yml
│── Dockerfile
│── app
│   └── resources/
│       │── views
|       |   ├── app.blade.php
│       |   └── welcome.blade.php
│       ├── sass/
│       │   └── app.scss
│       └── js/
│           └── app.js

docker-compose.ymlの内容

Dockerでサービスを管理するための設定ファイルです。

services:
  app:
    build:
      context: .
    container_name: laravel_app
    working_dir: /var/www
    volumes:
      - ./app:/var/www
    ports:
      - "5173:5173" # Viteの開発サーバー用ポート
    networks:
      - laravel
    depends_on:
      - db

  webserver:
    image: nginx:alpine
    container_name: laravel_webserver
    working_dir: /var/www
    volumes:
      - ./app:/var/www
      - ./docker/nginx:/etc/nginx/conf.d
    ports:
      - "80:80"
    networks:
      - laravel
    depends_on:
      - app

  db:
    image: mysql:5.7
    container_name: laravel_db
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: laravel
      MYSQL_USER: laravel
      MYSQL_PASSWORD: secret
    ports:
      - "3306:3306"
    networks:
      - laravel
    volumes:
      - dbdata:/var/lib/mysql

volumes:
  dbdata:

networks:
  laravel:
    driver: bridge

default.conf

server {
    listen 80;
    index index.php index.html;
    root /var/www/public;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {
        fastcgi_pass app:9000;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
}

3. Dockerfileの作成

PHP、Node.js、Composerを使うためのDocker設定です。

# PHPの公式イメージを使用
FROM php:8.2-fpm

# Node.jsとnpmのインストール
RUN apt-get update && apt-get install -y \
  curl \
  git \
  unzip \
  libpng-dev \
  nodejs \
  npm

# 必要な拡張機能をインストール
RUN apt-get update && apt-get install -y \
  libpng-dev \
  libjpeg-dev \
  libfreetype6-dev \
  locales \
  zip \
  unzip \
  git \
  && docker-php-ext-configure gd --with-freetype --with-jpeg \
  && docker-php-ext-install pdo pdo_mysql gd

# Composerのインストール
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer

# 作業ディレクトリの設定
WORKDIR /var/www

4. Laravelのインストール

## Docker起動
docker compose up -d --build

## appコンテナに入る
docker compose exec app sh

## composerのインストール
composer install

## Laravelのインストール
composer create-project --prefer-dist laravel/laravel .

Laravelの.env設定

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

ターミナルに戻りマイグレーションを実行

php artisan migrate

npmもインストールしておきます。

npm install

4. Viteの設定

LaravelとViteを連携するための設定を行います。

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/sass/app.scss', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    server: {
        host: '0.0.0.0',
        port: 5173,
    },
});

5. CSSとJSの準備

SASSファイルの作成（`resources/sass/app.scss`）

$primary-color: #3490dc;

body {
    background-color: $primary-color;
}

JavaScriptファイルの作成（`resources/js/app.js`）

import './bootstrap';
console.log('JavaScript Loaded');

6. Laravel Bladeテンプレートでの設定

Bladeテンプレート（`app.blade.php`）

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Laravel App')</title>
    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head>
<body>
    @yield('content')
</body>
</html>

welcome.blade.php

@extends('app')

@section('title', 'ダッシュボード')

@section('content')
    <h1>ダッシュボードへようこそ</h1>
    <p>ここでは管理画面の内容が表示されます。</p>
@endsection

7. 開発サーバーの起動と確認

開発用サーバーを起動します。

# Laravelアプリの起動
docker compose up -d

# appコンテナに入る
docker compose exec app sh

# sassのインストール
npm install sass sass-loader

# Viteの開発サーバーを起動
npm run dev

ブラウザでhttp://localhostにアクセスし、変更が即座に反映されるか確認します。

8. Font Awesomeの導入

npm install @fortawesome/fontawesome-free

SASSファイルでのインポート

// app.scss
@import "@fortawesome/fontawesome-free/css/all.css";

アイコンの使用例

<i class="fas fa-home"></i>

9. まとめ

これで、Laravel、Docker、Vite、SASSを使用した開発環境が整いました。

この環境を使うことで、リアルタイムでのホットリロードが可能になり、効率的なWeb開発が進められます。