Laravel Sailで開発環境構築【Vite対応】

Laravel

2023/05/12

はじめに

今回は、Laravel Sailを使って環境の構築を行いました。
SailはDockerですので、開発環境を簡単に用意することもできますし、カスタマイズすることも楽です。

Laravel SailはmacOS、Linux、Windowsに対応しています。
今回はWindowsで環境を構築しました。

MacでSailの環境構築方法につきましては、以下の記事をご覧ください。

詳しくは以下のサイトもご覧ください。

Laravel Sail 10.x Laravel

使用するバージョンなど

Windows 11
WSL 2
Docker Desktop
Laravel 8 or 9 or 10

2022/02/09 Laravel9で問題なく動作することを確認しました。
2022/09/27 最新バージョンのLaravelで確認し、Viteに対応しました。
2023/03/11 Laravel10で確認しました。

他にも私のブログで、Laravelについて解説している記事がありますのでご覧ください。

【紹介】個人開発

私の個人開発ですがQuiphaというサービスを開発しました。(Laravel, Vue3など)
良かったら、会員登録して動作を試してみて下さい。

また、Laravel 9 実践入門という書籍を出版しました。
Kindle Unlimitedを契約している方であれば、読み放題で無料でご覧いただくことができます。

是非多くの方に読んでいただき、Laravelの開発に少しでもお役に立てたら幸いです。

Laravelの環境構築について

環境構築について、以下のサイトの「最初のLaravelプロジェクト」に記載があります。

インストール 10.x Laravel

Laravel Sailで開発環境構築

メリットとしては、開発に必要な環境を簡単に用意することができます。
例えば、MySQLやComposer、Node.jsなどを、Windowsに個別にインストールする必要はありません。
その他、開発に便利なツールなどはSailで選択することができます。

また、複数人での開発だったり、後日環境を再構築する際に、同じ環境を作れる点も利点でしょう。

開発に必要な環境を、色々とインストーラをダウンロードして設定していくのは面倒です。
Sailはコマンド一つで開発に必要な環境を構築できます。

デメリットを挙げるとすると、WSL2や、Dockerをそもそも使ったことがない人にとっては、少しハードルが高いかもしれませんね。

Laravel Sailを利用するためには、WSL2とDocker Desktopが必要になります。

Laravelの翻訳ページには、「Dockerの経験がなくても」と書いてありますが、Sailのカスタマイズにはdocker-compose.ymlの編集が必要です。

確かにDockerコマンドを直接実行することはないのですが、それでもDockerの概要くらいは把握しておかないと、理解しづらい部分があると思います。

Composerで開発環境構築

別記事で解説しましたが、「Composerでのインストール」になります。

実際は、ComposerやMySQL(XAMPP)、Node.jsなど、最低限、開発に必要な環境を個別にインストールし、構築しました。

昔ながらのLAMP環境を作ってきたWeb開発者にとっては、分かりやすいのではないでしょうか。

どっちの構築が良いか

基本的にはSailでの構築が良いと思います。
DockerやWSLは覚えておくと良いでしょうし、やはり便利です。

「WSL？Dockerって何？」という方で、とりあえずLaravelを始めたい場合は、「Composerでのインストール」でも良いでしょう。

あくまで開発環境の部分ですので、どちらの場合でもLaravelを使ったコーディングに関しては同じです。

あとからSailへ切り替えることもできます。
まずは、Laravel開発を始めてみましょう。

後からSail環境へ移行する手順は、以下の記事にまとめました。

Laravel Sailが遅い時

最近、Sailの環境で開発を行っていますが、WSL2＋Dockerのメモリ使用量も多く、非力なマシンスペックは辛いかもしれません。

また、ある時Sailの環境が明らかに遅い場合があり調べたところ、以下の記事が参考になりました。
Windows側のフォルダにプロジェクトを配置して、WSLから/mnt/でプロジェクトを読み込んだり、Sailを起動すると非常に遅くなります。（npm installなども）

プロジェクトフォルダについては、WSL側（Ubuntuなど）に配置し開発を行いましょう。

Windows + WSL2 + docker + laravel を 10 倍速くする方法

Windows+docker+WSL2+laravel という開発環境でのHTTPサーバーのレスポンス速度を 10 倍速くする方法

事前準備

Laravel Sailを使用するには以下のインストールが必要です。

WSL2のインストール

WSL2のインストールについては、以下の記事を参考にしてください。

Docker Desktopのインストール

WSL2をバックエンドにしたDocker Desktopが必要です。
詳しくは以下の記事を参考にしてください。

VS Code

VS Codeのインストール方法は、以下の記事にまとめましたのでご覧ください。

設定方法は以下を参考にしてください。

WindowsではWSL2が必要です。macOSはDocker Desktop、LinuxではDockerがあれば使えます。

プロジェクト作成

まずはLaravelプロジェクトを作成しましょう。
Windowsターミナルを起動し、WSL2(Ubuntu)を開きます。

任意の場所にプロジェクトを作成します。
ユーザホームにプロジェクトフォルダを作成しました。

cd ~
mkdir Laravel-Project
cd Laravel-Project

以下のコマンドでLaravelプロジェクトを作成します。
「example-app」の部分はプロジェクト名ですので、任意で指定します。

curl -s https://laravel.build/example-app | bash

途中でUbuntuのパスワードを求められますので、入力します。

続いて、以下のコマンドでLaravel Sailを起動します。

cd example-app
./vendor/bin/sail up

初回時はDockerイメージのビルドのために時間がかかります。

以下のURLにアクセスしましょう。いつものLaravel起動画面が表示されました。

http://localhost/

Sailを停止する場合は、Ctrl + C キーを押します。

利用するサービスを指定することもできますが、指定しない場合は、mysql、redis、meilisearch、mailpit、seleniumが設定されます。

利用可能なサービスが色々あり、mysql、pgsql、mariadb、redis、memcached、meilisearch、minio、selenium、mailpitなど、選択するだけで使用できます。

Meilisearchにつきましては、以下の記事を参考にしてください。

Mailpitにつきましては、以下の記事を参考にしてください。

以前採用されていたMailHogにつきましては、以下の記事を参考にしてください。

VSCodeでプロジェクトを開く

この時点でLaravelプロジェクトファイル一式がダウンロードされ、Laravelの環境も構築されています。

次にVS Codeでプロジェクトを開いてみましょう。
任意で作成したフォルダは以下でした。

Windows上のパス: \\wsl.localhost\Ubuntu\home\xxx\Laravel-Project\example-app
WSL2上のパス: /home/xxx/Laravel-Project/example-app

上記のフォルダにカレントディレクトリを移動し、以下のコマンドを実行します。

code .

VS Codeが起動され、作成したLaravelプロジェクトが自動で開かれます。

これ以降は、VS Codeのターミナルで操作しますので、Windowsターミナルは終了しておいてください。

VS Codeのターミナルを開きます。

WSL2(Ubuntu)のターミナルを起動します。
これ以降のコマンドはこのターミナルを使用します。

毎回、「./vendor/bin/sail」コマンドを実行するのは面倒です。
プロジェクト直下で「sail」コマンドを実行するために.bashrcに追加します。

vi ~/.bashrc

一番最後の行に、以下の内容を追記して保存します。

alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail'

以下のコマンドで反映させます。

$ source ~/.bashrc

改めてSailを起動して、Laravelの画面にアクセスできることを確認してください。

sail up

Sailを停止する場合は、Ctrl + C キーを押します。

Sailコマンド

Laravelプロジェクトですので、ComposerやArtisan、Node/NPMコマンドで操作する場面があると思います。
ローカルPCに直接インストールした場合は、これらのコマンドを使用できますが、今回はSailで環境構築をしているため、Sailコマンドを使用して実行する必要があります。

いくつかのコマンドを確認してみましょう。

Sailをバッググランドで起動と停止

Sailをバックグラウンドで実行します。

$ sail up -d

停止する場合は、以下のコマンドを実行します。

$ sail down

以降のコマンドを実行するため、Sailを起動しておいてください。

PHPの実行

以下のコマンドでPHPのバージョン確認をします。
※バージョン変更方法は後述します。

$ sail php --version

PHP 8.2.3 (cli) (built: Feb 14 2023 16:58:12) (NTS)
...

sailコマンドを使用して実行しているところがポイントです。

artisanの実行

artisanのコマンド一覧を確認します。

sail artisan list

ルーティングの一覧を表示してみましょう。

sail artisan route:list

Nodeの実行

Nodeのバージョンを確認しましょう。

$ sail node --version

v18.15.0

NPMコマンドでパッケージをインストールしましょう。

sail npm install

NPMでJS/CSSをビルドします。

最新のLaravelでは、Laravel MixがViteへと置き換わりました。
以下のコマンドを実行します。

本番環境向けファイル出力
$ sail npm run build

開発時
$ sail npm run dev

余談ですが、参考までにViteからLaravel Mixへ戻すこともできます。
以下の記事を参考にしてください。

Laravel Mix(webpack)の場合は、以下のコマンドでビルドを行います。

$ sail npm run prod

例：
$ sail npm run dev
$ sail npm run watch

パッケージをインストールしないで実行すると、以下のエラーが表示されます。
sh: 1: mix: not found

Sailコマンドを通して実行しているだけで、使い方は同じです。

Viteについて

最新のLaravelでは、Laravel MixがViteへと置き換わりました。

Viteについては以下の記事にもまとめました。

テーブルの作成

以下のコマンドでテーブルを作成しましょう。

sail artisan migrate

.envファイルが既に存在し、データーベースの接続設定も記載されているため、何も設定せずにテーブルの作成が完了しました。

INFO  Preparing database.  

Creating migration table ................................. 145ms DONE

INFO  Running migrations.  

2014_10_12_000000_create_users_table ..................... 269ms DONE
2014_10_12_100000_create_password_resets_table ........... 288ms DONE
2019_08_19_000000_create_failed_jobs_table ............... 195ms DONE
2019_12_14_000001_create_personal_access_tokens_table .... 295ms DONE

後述していますが、phpMyAdminからも確認できます。

Sailカスタマイズ

docker-compose.yml

docker-compose.ymlはこのようになっていました。

version: '3'
services:
    laravel.test:
        build:
            context: ./vendor/laravel/sail/runtimes/8.2
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWWGROUP}'
        image: sail-8.2/app
        extra_hosts:
            - 'host.docker.internal:host-gateway'
        ports:
            - '${APP_PORT:-80}:80'
            - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
        environment:
            WWWUSER: '${WWWUSER}'
            LARAVEL_SAIL: 1
            XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
            XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
        volumes:
            - '.:/var/www/html'
        networks:
            - sail
        depends_on:
            - mysql
            - redis
            - meilisearch
            - mailpit
            - selenium
    mysql:
        image: 'mysql/mysql-server:8.0'
        ports:
            - '${FORWARD_DB_PORT:-3306}:3306'
        environment:
            MYSQL_ROOT_PASSWORD: '${DB_PASSWORD}'
            MYSQL_ROOT_HOST: '%'
            MYSQL_DATABASE: '${DB_DATABASE}'
            MYSQL_USER: '${DB_USERNAME}'
            MYSQL_PASSWORD: '${DB_PASSWORD}'
            MYSQL_ALLOW_EMPTY_PASSWORD: 1
        volumes:
            - 'sail-mysql:/var/lib/mysql'
            - './vendor/laravel/sail/database/mysql/create-testing-database.sh:/docker-entrypoint-initdb.d/10-create-testing-database.sh'
        networks:
            - sail
        healthcheck:
            test:
                - CMD
                - mysqladmin
                - ping
                - '-p${DB_PASSWORD}'
            retries: 3
            timeout: 5s
    redis:
        image: 'redis:alpine'
        ports:
            - '${FORWARD_REDIS_PORT:-6379}:6379'
        volumes:
            - 'sail-redis:/data'
        networks:
            - sail
        healthcheck:
            test:
                - CMD
                - redis-cli
                - ping
            retries: 3
            timeout: 5s
    meilisearch:
        image: 'getmeili/meilisearch:latest'
        ports:
            - '${FORWARD_MEILISEARCH_PORT:-7700}:7700'
        volumes:
            - 'sail-meilisearch:/meili_data'
        networks:
            - sail
        healthcheck:
            test:
                - CMD
                - wget
                - '--no-verbose'
                - '--spider'
                - 'http://localhost:7700/health'
            retries: 3
            timeout: 5s
    mailpit:
        image: 'axllent/mailpit:latest'
        ports:
            - '${FORWARD_MAILPIT_PORT:-1025}:1025'
            - '${FORWARD_MAILPIT_DASHBOARD_PORT:-8025}:8025'
        networks:
            - sail
    selenium:
        image: selenium/standalone-chrome
        extra_hosts:
            - 'host.docker.internal:host-gateway'
        volumes:
            - '/dev/shm:/dev/shm'
        networks:
            - sail
networks:
    sail:
        driver: bridge
volumes:
    sail-mysql:
        driver: local
    sail-redis:
        driver: local
    sail-meilisearch:
        driver: local

PHPのバージョンの変更

PHPのバージョンの変更方法につきましては、以下の記事を参考にしてください。

phpMyAdminのインストール

phpMyAdminをインストールすることができます。
以下の記事をご覧ください。

デバッグや連携

他にもデバッグの方法など、別な記事で解説していますのでご覧ください。

その他

初学者へ

Laravelを初めて触る方へ向け、手順やアドバイスをまとめました。

外部サーバーへ公開

作成したアプリは公開して使ってもらいましょう！
Laravelアプリケーションを外部公開する方法をまとめました。

脆弱性対策

脆弱性を抱えたアプリケーションの場合、攻撃を受ける可能性があり大変危険です。
作成したアプリケーションは、脆弱性対策も意識しましょう。

GitHubと連携

GitHubと連携する方法を解説しました。
プロジェクトの管理はGitHubを活用しましょう。

GitHub Copilot

GitHub Copilotを導入し、AIにコーディングをサポートしてもらうこともできます。

さいごに

今回は、Laravel Sailを使って環境の構築を行いました。
多少Dockerの知識があったほうが理解しやすいと思いますが、簡単に環境を構築することができますので便利です。

他にも私のブログで、Laravelについて解説している記事がありますのでご覧ください。

千草へ返信するコメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

投稿ルール

コメントは承認制となっており、管理人の判断で公開されます。
承認にはお時間をいただきます。(平日の日中は対応できません)
コメントを公開する際、内容を修正する場合があります。
ご質問の場合は、詳細な状況と内容を記載し、丁寧なコメントをお願い致します。
エラーメッセージだけではなく、各種バージョン、経緯、再現手順を記載ください。
記事とは無関係な内容やアバウトなど、その他の理由で承認されない場合があります。
必ずしも管理人が返信するわけではございませんのでご了承ください。

コメント ※

名前 ※

メール ※

サイト

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）