LaravelのSailとDockerを使った開発環境構築方法（Windows/MacOS）
新しい言語やフレームワークの学習をする、第一の関門が環境構。
リファレンスの説明があっさりしすぎていて分からなかった、エラーが出て心が折れた、面倒だなぁと思って先送りにしてしまう……なんてことも珍しくありません。
今回は、環境構築やターミナル操作自体あまりしたことが無い、という初心者の方向けに、人気PHPフレームワーク“Laravel”の開発環境構築を解説します。コピペ可能なコマンド、図解やスクリーンショットもたっぷりなので、ぜひ試してみてください。
Laravel と開発環境について
Laravelとは
Laravelとは、プログラミング言語の1つであるPHPを使ったWebフレームワークです。
Laravelは「MVCモデル」という、プログラムの処理を役割ごとに分けて開発する仕組みが採用されています。この仕組みによって開発工程の分業がしやすく、効率よく複数のエンジニアが連携してシステム開発を行えることが特徴。
- M（Model）：データ処理
- V（View）：ユーザー見る画面表示・入出力
- C（Controller）：ModelとViewを制御
もちろん、フレームワークとして便利な機能も豊富に用意されています。
LaravelはPHPフレームワークの中でも人気が高く、世界的に使われている存在です。
『ぐるなび』や『時事通信ニュース』などの有名サイトもLaravelを使用して開発されています。ECサイトや予約サイトの開発にも使います。
Laravel開発環境と手順
Laravelの開発環境の構築には、いくつかの方法があります。
Node.jsやMySQLなどを個別にインストールして環境を作っていく方法もありますが、イチからはじめる場合、これはけっこう大変です。
そこで、今回は比較的手軽に開発環境構築ができる「Laravel Sail」を使う方法を解説します。
皆さんの好みのオペレーティングシステムが何であれ、できるだけ簡単にLaravelを始められるようにしたいと考えています。そのため、ローカルマシンでLaravelプロジェクトを開発・実行するための様々なオプションが用意されています。これらのオプションは後ほど検討していただけますが、LaravelではSailという、Dockerを使用してLaravelプロジェクトを実行する組み込みソリューションを提供しています。
とはいえ、一つのアプリをインストールしてすぐ使える、というものではありません。
Laravel Sail では Docker を利用するため、Docker をインストールする必要があります。
更にWindowsの場合は「WSL」というLinux実行環境も必要です。
パソコンにインストール・設定すると良い順番に沿って、このあたりを解説していきます。
Windowsのみ）WSLの導入
※この章はWindowsをご利用の方のみ必要な下準備となります。
Macをご利用の方、Windowsでもすでにインストール済みの方は、スキップしてください。
WSL2とその必要性
WSLは Windows Subsystem for Linux の略で、Windows上でLinuxを動作させるための実行環境。WSL2の「2」はバージョンのようなものです。
WSL2を導入することで、LinuxのプログラムをWindowsおよびWindows Server上で実行可能になります。Linuxコマンドを使ってGUI上でのコマンド操作も出来るようになります。
そして、Laravel Sailを使うためには、このWSL2のインストールが必須。
画像元：https://laravel.com/docs/10.x/installation#laravel-and-docker
上図の電球アイコン部分では「Docker Desktop がWSL2 バックエンドを使用するように構成されていること」と書かれています。
WSL2のインストール状況を確認
WSLがインストールされているかは、Windows機能の有効化または無効化から確認できます。
- Linux用Windowsサブシステム
- 仮想マシンプラットフォーム
この２つにチェックが入っていればWSLインストール済み、チェックがなければ未導入です。
チェックが入っていない方は、WSL2のインストールを行いましょう。
WSL2をインストールする
Windows Power Shellを管理者として実行します。
Windows Power Shellはスタートメニューの「W」の項目あたりに、管理者として実行は右クリックメニューから選べます。
「このアプリがデバイスに変更を加えることを許可しますか？」というポップアップが表示される場合は、はいを選択。
Windows Power Shellが開きます。
以下のコマンドを入力。
Enterキーを押すとインストールが始まります。
wsl --install
以下のような表示になったら、インストールは完了です。
Windows Power Shellを右上の×で閉じて、パソコンを再起動してください。
再起動すると、以下のようにUbuntuが自動で起動します。
ユーザー名とパスワードを登録せよ、と表示されるので、指示に従って入力してください。
（※パスワードは、入力しても画面に表示されない仕様です）
これでWSL2のインストールは完了です。
Windowsターミナルの導入（任意）
ここまでで、WindowsでもWSL2（Ubuntu）でLinux環境が使えるようになりました。
ただですね、WSL側はUbuntu、Windows側の操作はPowerShellと、それぞれを立ち上げて使い分けるのは面倒。『Windows Terminal』を使うとタブ管理で切り替え可能になるので、インストールしておくと便利です。
右上の「Microsoft Store アプリの取得」から取得・インストールを行うことができます。
https://www.microsoft.com/ja-jp/p/windows-terminal/9n0dx20hk701?activetab
新しいタブを開くときに、Ubuntuを選択するとWSL側の操作ができます。
上図のようにrootになっている方は、suコマンドでWSL2インストール時に作成したユーザーに切り替えられます。
su ユーザー名
Ubuntuを起動する際に選択されているユーザー（デフォルトユーザー）をまるっと変更したい場合は、下記サイトの方法をご確認ください。
https://devlights.hatenablog.com/entry/2021/05/29/070000
1.Docker Desktopのインストール
1-1.DLとインストール
以下のページから、Docker Desktopをダウンロードします。
ご自身の環境にあったものを選んでください。
https://www.docker.com/products/docker-desktop/
お使いのMacがintel ChipかApple Chipかわからない方は、画面左上のAppleロゴから“このMacについて”を開いて確認してください。
ダウンロードが完了したら、インストーラーを起動。
画面の指示に従ってインストールを完了させてください。
※Windowsの方は「Use WSL 2 instead ～」のところのチェックを外さずに進めてください。
1-2.Dockerの起動・アカウント作成
インストールが完了したら、Docker Desktopを起動してみましょう。
最初は規約同意画面なのでAcceptで進めます。
サインアップせよ、という表示にかわります。
Dockerのアカウントがある方は、テキストリンクの「Sign In」からサインインしてください。
初めて使う方は、青色の「Sign Up」ボタンをクリックしてアカウントを作成します。
ブラウザでアカウント作成のページが開きます。
開かない方は、以下のURLから直接進めてもOK。
Eメールアドレス、Dockerで使うためのユーザー名とパスワードを入力して進めてください。
上図のように表示されたらアカウントの作成は完了。
「Proceed to Docker Desktop」ボタンで、Docker Desktopに戻りましょう。
赤線で囲ったところにユーザー名が表示されていれば、作成したアカウントでサインイン出来ています。
これでDocker Desktopの導入は完了です。
◆ Windows の方向けの設定
Docker Desktopで、ユーザー名の左横にある歯車のアイコン（設定）をクリック。
表示されるSettingsメニューの中から、Resourcesを開いてください。
以下2つが、どちらも有効になっている状態にしてください。
- Enable integration with my default WSL distro
- Ubuntu
変更を加えた場合は、右下の「Apply & Restart」をクリックして保存します。
2.Laravel Sailをインストール
これからLaravel Sailでプロジェクトを作成します。
作成コマンドを使用すると、現在地にLaravel Sailのプロジェクトフォルダが作成されます。
コマンドを入力する前に、プロジェクトフォルダを起きたい場所まで移動しておきましょう。
下準備～macOSの場合～
Macの方はシンプルに、以下の手順で進めれば大丈夫です。
- 任意の場所にプロジェクトフォルダを作成
- cd コマンドを使って、作成したフォルダに移動
下準備～Windowsの場合～
WindowsでWSLを使っている場合は、ファイルの場所がちょっと特殊。
特に何も指定しないままLaravelプロジェクトを作成してしまうと、Windows と Linux のシステム間でファイルをやり取りことになり、動作が非常に遅くなる危険があります。これはLinux実行環境で動かしたいファイルをWindowsが持っているので、何か行うたび毎回ファイルをやり取りして確認している……という状況になるため。
動作が重くならないよう、プロジェクトを配置する場所を指定しておくと良いです。
1.WSLのディレクトリを確認
まずは、WSLのディレクトリを確認してみましょう。
ファイルエクスプローラーのアドレスバーに以下のコードを貼り付けて移動してください。
\\wsl$
Ubuntuをダブルクリックして開きます。
2.Laravel用のフォルダを作成
Ubuntu内には、こんな感じでフォルダが並んでいます。
コマンドでプロジェクトを作成すると、WindowsとWSLでファイル共有するための /mnt/ディレクトリ（フォルダ）の中にLaravelのプロジェクトが作成されることがあるようです。
WSLの中で完結するには、Laravelプロジェクトを/home/ ディレクトリ下に置くひつようがあります。ファイルの作成場所を指定しやすいよう、Laravel用のフォルダを作って進めます。
homeディレクトリを開いてみましょう。
中に、作成したユーザー名のディレクトリがあるので、ダブルクリック。
Laravelプロジェクトを作成するためのフォルダを作成します。
ここまで出来たら、ターミナル（Ubuntu）に戻ります。
3.Ubuntuでディレクトリを移動
まずは「pwd」と打ち込んで、自分が /home/ユーザー名のディレクトリ内にいるか確認。
cdコマンドを使って、作成したLaravelプロジェクト用のフォルダに移動します。
2-1.Laravelプロジェクトを作成
では、Laravelプロジェクトを作成しましょう。
使用するコマンドは公式サイトの方で紹介されています。
macOSとWindowsに分かれていますが、コマンドはどちらも共通です。
https://laravel.com/docs/10.x/installation#laravel-and-docker
このコマンドの中の「example-app」のところは、自分が作りたい名前（ディレクトリ名）に打ち替えてください。
例えばtodo-appにしたい場合は以下のように変更します。
curl -s "https://laravel.build/todo-app" | bash
プロジェクトの作成が始まります。時間がかかるので、気長に待ちましょう。
最後の方にパスワードの入力を求められます。
入力してEnterキーで確定。
「Thank you!」から始まる行が表示されたら、インストールは完了です。
2-2.Laravel Sailを起動してみる
無事にLaravelアプリケーションが出来ているか、起動して確認してみましょう。
起動方法は、インストール完了時のメッセージに表示されています。
- 作成されたLaravelアプリケーションのディレクトリにcdコマンドで移動
- ./vendor/bin/sail upでSailを起動
./vendor/bin/sail up
下図、赤線で囲った INFO Server running ～という表示が出たら、Sailの起動成功です。
ターミナル上に表示されている0.0.0.0もしくは以下のURLにアクセスしましょう。
http://localhost/
下図のようなLaravel起動画面が表示されていれば成功です。
【ダークモードの場合の表示】
起動画面が確認できたら、ターミナルでCtrl + Cキーを押してSailを停止してください。
◆sail upでエラーが出る時
./vendor/bin/sail up実行時、以下のようにエラーが出ることがあります。
Ports are not availableの後に書かれているポートが、他で使用されているから使えないよ！というメッセージが出ています。
心当たりがある方は、そのあたりを見てみてください。
よく分からん！という方は、Laravelアプリが空いているポートを使うよう.envファイルに記述を加えることで対応してください。
①.envファイルでポートを変更
.envファイルは作成したLaravelアプリのディレクトリ直下にあります。
VS Codeなどのエディターで開いてください。
こんな感じで、ずらずらっと設定が書いてあります。
.envファイルに以下２つのコードを追記してください。
これがポート設定を書き換える記述になります。
APP_PORT=808
FORWARD_DB_PORT=33066
.envファイルを上書き保存します。
②リスタートする
ターミナルに戻ります。
以下のコマンドを使って、もう一度sail upしてみましょう。
./vendor/bin/sail down
./vendor/bin/sail up
起動しました！
③ブラウザで表示を確認
Laravel起動画面が表示されているか、確認してみましょう。
.envファイルでポートを上書きしても、ターミナル上に表示されるURLは変更されません。
自分でURLを打ち込むか、Docker Desktopからブラウザで開きます。
自分で打ち込む場合は、localhostの後に設定したポート番号を入れます。
上のコードだと以下のように入力すればOK。
http://localhost:808/
Docker Desktopからは、下図の部分で確認できます。
スタート画面が表示されました。
お疲れ様でした！
エディタの用意について
無事にLaravel Sailが起動したら、環境構築は完了です。
ここからはLaravelアプリケーションの制作や学習を進めていくことになるでしょう。
ファイルの編集を進めるためには、エディタで作成したLaravelアプリケーションをディレクトリごと開きたいですよね。
MacOSはそのままワークスペースにドラッグ・アンド・ドロップすれば問題ありません。
Windowsの場合、UbuntuのファイルをVS Codeで開こうとすると上手く開けないことがあります。その場合は、VS Codeに拡張機能のWSLをインストールしてください。
まずは無料で14講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
5月5日まで