自分だけのクイズ作成 - Quipha公開中

Laravel Sailで開発環境構築

Laravel
スポンサーリンク

はじめに

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

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

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

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

Laravel Sail 9.x Laravel
使用するバージョンなど
  • Windows 11
  • WSL 2
  • Docker Desktop
  • Laravel 8 or 9

2022/02/09 Laravel9で問題なく動作することを確認しました。

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

【紹介】個人開発

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

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

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

Laravelの環境構築について

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

インストール 9.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/

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

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

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

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.1.0 (cli) (built: Nov 25 2021 20:22:22) (NTS)
...

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

artisanの実行

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

sail artisan list

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

sail artisan route:list

Nodeの実行

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

sail node --version

v16.13.1

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

sail npm install

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

% sail npm run prod

例:
% sail npm run dev
% sail npm run watch

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

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

テーブルの作成

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

sail artisan migrate

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

Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (155.58ms)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table (140.70ms)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated:  2019_08_19_000000_create_failed_jobs_table (150.64ms)
Migrating: 2019_12_14_000001_create_personal_access_tokens_table
Migrated:  2019_12_14_000001_create_personal_access_tokens_table (300.12ms)

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

Sailカスタマイズ

docker-compose.yml

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

# For more information: https://laravel.com/docs/sail
version: '3'
services:
    laravel.test:
        build:
            context: ./vendor/laravel/sail/runtimes/8.1
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWWGROUP}'
        image: sail-8.1/app
        extra_hosts:
            - 'host.docker.internal:host-gateway'
        ports:
            - '${APP_PORT:-80}:80'
        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
            - 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:
            - 'sailmysql:/var/lib/mysql'
        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:
            - 'sailredis:/data'
        networks:
            - sail
        healthcheck:
            test: ["CMD", "redis-cli", "ping"]
            retries: 3
            timeout: 5s
    meilisearch:
        image: 'getmeili/meilisearch:latest'
        platform: linux/x86_64
        ports:
            - '${FORWARD_MEILISEARCH_PORT:-7700}:7700'
        volumes:
            - 'sailmeilisearch:/data.ms'
        networks:
            - sail
        healthcheck:
            test: ["CMD", "wget", "--no-verbose", "--spider",  "http://localhost:7700/health"]
            retries: 3
            timeout: 5s
    mailhog:
        image: 'mailhog/mailhog:latest'
        ports:
            - '${FORWARD_MAILHOG_PORT:-1025}:1025'
            - '${FORWARD_MAILHOG_DASHBOARD_PORT:-8025}:8025'
        networks:
            - sail
    selenium:
        image: 'selenium/standalone-chrome'
        volumes:
            - '/dev/shm:/dev/shm'
        networks:
            - sail
networks:
    sail:
        driver: bridge
volumes:
    sailmysql:
        driver: local
    sailredis:
        driver: local
    sailmeilisearch:
        driver: local

PHPのバージョンの変更

Sailのカスタマイズができます。
ここではPHPのバージョンを変更してみましょう。

Sailは現在、PHP8.1、PHP8.0、PHP7.4を利用したアプリケーションの実行をサポートしています。

https://readouble.com/laravel/9.x/ja/sail.html

現時点では、以下のバージョンが入っていました。

PHP 8.1.0

プロジェクト直下にあるdocker-compose.ymlを開きます。
以下の箇所を確認しましょう。

        build:
            context: ./vendor/laravel/sail/runtimes/8.1

PHP8.0に変更してみましょう。

        build:
            context: ./vendor/laravel/sail/runtimes/8.0

Dockerのimage名も変更しておきましょう。

image: sail-8.0/app

余談ですが、Dockerイメージとして作成されますので、Docker Desktopから確認することができます。
sail-8.1/appというのが、PHPの最新がインストールされているイメージです。

Dockerイメージとコンテナを再構築するために、以下のコマンドを実行します。
イメージがビルドされるため、時間がかかります。

sail build --no-cache
sail up

完了後、念の為Dockerイメージを確認すると、PHP8.0のイメージが作成されていました。

改めてプロジェクトのPHPのバージョンを確認したところ、正常にPHP8.0になっていました。

sail php --version

PHP 8.0.13

Laravelのコーディングの仕方については、SailでもSailではない場合でも同じです。

phpMyAdminのインストール

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

デバッグや連携

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

その他

初学者へ

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

外部サーバーへ公開

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

脆弱性対策

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

GitHubと連携

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

さいごに

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

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

\オススメ/

コメント

  1. Re より:

    Laravel Sailインストール時のUbuntuのパスワードを入力する場面まで行ったのですが、そこからパスワード入力、エンターを押しても反応が全くないのですが何か原因があるのですかね…

    • 千草 より:

      こちらの環境ですが、Ubuntuのパスワードを入力しエンター押下後、すぐに以下のメッセージが表示されて完了しますね。

      Thank you! We hope you build something incredible. Dive in with: cd example-app && ./vendor/bin/sail up

  2. Re より:

    返信ありがとうございます!

    Power shellなどでcurl を実行するとそのようにうまく行くのですが、
    Windows11のコマンドプロンプトで実行するとそこから全く進めないんですよね。
    違うパスワード打ってエンター押しても、
    怒られすらしない…

    Ctrl +Cで中止するしか無くなってしまうんです。

タイトルとURLをコピーしました