Dockerを使ってLaravel/Blade環境構築からscss導入まで

Docker と Docker Compose を使って、Laravel・Blade・MySQL の開発環境を構築し、scss をコンパイルできるようにするまでを解説します。

結論から書くと、Dockerfile と docker-compose.yml を自分で書く方法と、Laravel 公式の Laravel Sail を使う方法の2つがあります。仕組みを理解したいならこの記事の手順、すぐ動かしたいなら Sail です。

この記事は2021年に公開したあと、2026年9月に見直しました。当時使っていた Laravel Mix は、Laravel 9.2 以降 Vite に置き換わっています。scss のコンパイル手順は Vite での書き方に差し替え、Laravel Mix が残っている既存プロジェクト向けの説明も残しました。

本記事のDocker環境は、@ucan-lab様の環境をお借りしております。Docker環境の詳しい使い方はぜひこちらの記事を読んでみてください。

自分で組むか、Laravel Sailを使うか

結論：Laravel には Sail という公式の Docker 開発環境があります。コンテナの中身を理解する必要がなければ、Sail のほうが圧倒的に速く始められます。

Laravel Sail は、Laravel が標準で用意している Docker 環境を操作するためのコマンドラインツールです。compose.yaml と sail スクリプトの2つが実体で、PHP・MySQL・Redis が最初から組まれた状態で立ち上がります。

▼2つの方法の比較

	この記事の手順（自分で組む）	Laravel Sail
用意するファイル	Dockerfile / docker-compose.yml を自分で書く	`compose.yaml` が自動生成される
構成の理解	中身が全部見える	中身を知らなくても動く
PHPバージョン	自分で指定する	既定は PHP 8.5（8.0〜8.5から選択）
サービスの追加	yml を自分で書く	`sail:add` コマンド
向いている人	構成を把握して調整したい	とにかく早く開発を始めたい

Sail で始める場合のコマンドは次の3つだけです。

composer require laravel/sail --dev
php artisan sail:install
./vendor/bin/sail up

起動後は http://localhost でアプリにアクセスできます。MySQL・Redis・Mailpit（メール確認用）などが同時に立ち上がり、Node も既定で24が入ります。

vendor/bin/sail を毎回打つのが面倒なら、シェルにエイリアスを設定しておきます。

alias sail='sh $([ -f sail ] && echo sail || echo vendor/bin/sail)'

以降は sail up -d や sail artisan migrate のように短く書けます。

この記事では、Sail を使わず自分で組む手順を解説します。コンテナの構成を把握しておくと、本番環境に持っていくときや、Sail の想定外の構成が必要になったときに困りません。

Docker Desktop for Mac のインストール

インストーラー「Docker.dmg」をダウンロードしましょう。

インテルの方は「Mac with Intel Chip」、M1チップの方は「Mac with Apple Chip」をクリックします。

Docker Desktop

MacBookマシンへインストールする

次にインストールを行います。

ダウンロードした「Docker.dmg」をダブルクリックして、インストーラーを実行します。

Dockerを起動

アプリケーションから「Docker.app」をクリックして起動します。

ネットワークコンポーネントへのアクセスを問われるウィンドウが表示されたら「OK」を押します。

初回起動時は、チュートリアルが表示されます。
必要がなければ「Skip tutorial」をクリックしましょう。

下記がDocker Dashboardの画面です。

Dockerの動作確認

Dockerのバージョンを確認してみます。

ターミナルを起動して、「docker version」コマンドを叩くとバージョン情報が表示されます。Dockerのバージョン情報が表示されれば、無事、動作できてます。

Docker Desktopのバージョン確認

メニュー「Docker Desktop」 > 「About Docker Desktop」
で開きます。

インテルであれば最新のバージョンで動作できます。
M1チップの方は3.4.1以上で動作できないため、「version 3.3.1」にダウングレードしましょう。
※2021/7/10時点

Dockerを使ってLaravel環境を構築

MacでHomebrewをインストールしていない方は、下記のURLにアクセスして、パッケージマネージャーをインストールしましょう。

Homebrew 公式ページ

Dockerを使って、Laravelプロジェクトを作成します。

ターミナルから、任意のディレクトリに移動し、下記3ステップのコマンドを実行していきましょう。

git clone https://github.com/ucan-lab/docker-laravel.git
cd docker-laravel
make create-project

上記3ステップを実行すると「backend」フォルダが生成され、フォルダ配下が下記画像のようになります。

また、Docker Desktopの「docker-laravel」に3つのコンテナが動作している状態になります。

最後に動作確認をします。
Docker Desktopで、「docker-laravel_web_1」の「OPEN IN BROWSER」をクリックします。下記画像のページが開けば、Laravelの環境構築は完了です。

BladeでViewページを表示する

scss環境を導入する前に、Bladeでテストページの表示までやってみます。

backend > resources > views
に「test.blade.php」を作成します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>test</h1>
    
</body>
</html>

backend > routes
の「web.php」に下記コードを追記します。

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});

Route::get('/test', function () {
    return view('test');
});

ブラウザで「localhost/test」を開いて、Hello,Worldが表示されればViewページの表示は完了です。

Laravelにscss環境を導入する

結論：scss のコンパイルには Vite を使います。Laravel 9.2 以降、公式のアセットバンドラーが Laravel Mix から Vite に変わりました。新規プロジェクトには最初から Vite が入っています。

Vite は、変更したファイルだけを即座にブラウザへ反映する仕組み（HMR）を持っています。ビルド全体を待たずに済むので、Laravel Mix より体感がかなり速くなります。

▼Laravel MixとViteの違い

	Laravel Mix（旧）	Vite（現在）
設定ファイル	`webpack.mix.js`	`vite.config.js`
読み込み方	`asset()` ヘルパー	`@vite()` ディレクティブ
出力先	`public/css` など任意	`public/build`（自動でバージョン付与）
開発時	都度ビルド	変更分だけ即反映（HMR）
導入状況	既存プロジェクトに残る	Laravel 9.2以降の標準

Node.jsとnpmをインストール

Node.js を公式ページからダウンロードします。ターミナルで次のコマンドを実行し、バージョンが表示されればインストールは完了です。

node -v
npm -v

Node のバージョンが古いとビルドが通らないことがあります。エラーが出たときの確認と更新手順はnpm runでエラーが出るときの解決方法にまとめました。

依存パッケージをインストール

ターミナルでディレクトリ「backend」まで移動します。

cd backend

package.json に記載されたパッケージをまとめてインストールします。

npm install

scss を扱うには sass のコンパイラが必要です。入っていなければ追加します。

npm install -D sass

vite.config.jsを設定する

プロジェクト直下の vite.config.js に、コンパイル対象のファイル（エントリーポイント）を指定します。

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

export default defineConfig({
    plugins: [
        laravel([
            'resources/sass/test.scss',
            'resources/js/app.js',
        ]),
    ],
});

Laravel Mix の webpack.mix.js と違い、出力先の指定は不要です。Vite が public/build にハッシュ付きのファイル名で出力し、読み込み側は自動で解決されます。

Laravel Mix にあった browserSync の設定も要りません。@vite() ディレクティブが開発サーバーを検出して、自動でリロードの仕組みを差し込みます。

scssファイルを作成

resources/sass/test.scss を作成して、次の記述をします。

h1 {
    color: red;
}

bladeファイルを更新

resources/views/test.blade.php を更新します。読み込みは asset() ではなく @vite() を使います。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    @vite(['resources/sass/test.scss'])
</head>
<body>
    <h1>test</h1>
</body>
</html>

@vite() は、開発中は開発サーバーのURLを、本番ビルド後はハッシュ付きのファイルを、それぞれ自動で出し分けます。asset('css/test.css') のようにパスを手で書く必要はありません。

コンパイルを実行

開発中は開発サーバーを起動したままにします。

npm run dev

本番用にビルドする場合はこちらです。

npm run build

npm run dev を起動したまま scss を保存すると、ブラウザが自動で更新されます。ビルドを待つ必要はありません。

ブラウザに表示してみる

別のターミナルでサーバーを起動します。

php artisan serve

ブラウザで「http://localhost:8000/test」を開き、「test」の文字が赤く表示されていればコンパイル成功です。

スタイルが当たらないときは、npm run dev が起動しているかを最初に確認してください。Vite は開発中、コンパイル済みファイルを public に置きません。開発サーバーが落ちていると、@vite() が読み込むURLの先に何も無い状態になります。

Laravel Mixが残っているプロジェクトの場合

既存のプロジェクトに webpack.mix.js がある場合は、Laravel Mix で動いています。Mix は今も動作しますが、公式の更新は Vite 側に移っているため、新しく書き足すなら Vite への移行を検討してください。

Mix のままコンパイルする場合のコマンドは次のとおりです。

npm run dev

webpack.mix.js に出力先を書き、blade 側は asset() ヘルパーで読み込みます。

<link rel="stylesheet" href="{{ asset('css/test.css') }}">

まとめ

この記事では、Docker と Docker Compose で Laravel・Blade・MySQL の開発環境を構築し、Vite で scss をコンパイルするところまでを解説しました。

構成を自分で把握しておきたい場合はこの手順が向いています。すぐ動かしたいだけなら、記事の前半で触れた Laravel Sail を使うほうが早く済みます。どちらも Docker である点は同じなので、後から乗り換えることもできます。

Laravel Mix が入った既存プロジェクトを触るときは、webpack.mix.js があるかどうかで判断してください。あれば Mix、vite.config.js があれば Vite です。両方の設定が残っていると、どちらでビルドされたか分からないファイルが public に混ざります。

作った Laravel プロジェクトを本番サーバーに載せる手順はDockerで開発したLaravelのWebサイトをgitでXserverにデプロイするにまとめています。ローカルで動いたあとの流れはこちらへ。

記事投稿機能のようにリッチテキスト編集が必要になったら、Laravelにリッチテキストエディタ『Quill』を実装するもあわせてどうぞ。

▼Laravelプロジェクトをサーバーにデプロイした方はこちらの記事をどうぞ

Web Design2021.09.12LaravelをgitでXserverにデプロイする手順9ステップDockerで開発したLaravelのサイトをXserverにSSHとgitでデプロイする手順を9ステップで解説します。つまずきやすいPHPのバージョン設定（サーバーパネルとSSHで別管理）、Composer・Node.jsの導入、.htaccessの設置まで画像付きでまとめました。

リンク

▼HTML/CSS/JavaScriptの学習本を探してる方はこちらの記事をどうぞ

Book2023.03.01Webコーディングにオススメの学習本4冊【HTML/CSS/JavaScript】WebコーディングのおすすめHTML/CSS/JavaScript学習本4冊を、著者・出版社・刊行年まで明記して紹介。HTML Living Standard準拠かどうかを基準に選ぶ理由と、floatだけで段組みを説明する古い本を避ける判断方法もまとめました。

自分で組むか、Laravel Sailを使うか

Docker Desktop for Mac のインストール

MacBookマシンへインストールする

Dockerを起動

Dockerの動作確認

Docker Desktopのバージョン確認

Dockerを使ってLaravel環境を構築

BladeでViewページを表示する

Laravelにscss環境を導入する

Node.jsとnpmをインストール

依存パッケージをインストール

vite.config.jsを設定する

scssファイルを作成

bladeファイルを更新

コンパイルを実行

ブラウザに表示してみる

Laravel Mixが残っているプロジェクトの場合

まとめ

関連記事

Three.jsの影に同心円の縞が出る原因｜シャドウアクネの直し方

画像のqualityはいくつにすべきか｜JPEGとWebPで10刻みに実測した折り返し点

JPEG・WebP・AVIFを同じ画質に揃えて実測した｜ブログ写真はどれで保存すべきか

ブラウザで遊べる3Dチンチロ、Three.js＆Ammo.jsで作ったサイコロゲーム

リペリングエフェクトの仕組み 基本・応用実装例

Swapyでカンバンボードやタスク管理に実装できるUI実装【JavaScript】

リペリングエフェクトの仕組み基本・応用実装例