Laravel Sailを使った開発環境構築（Windows）

# はじめに
こんにちは！エンジニアへの転職を目指している伊藤です！
今回学習でLaravelを使用するにあたり、Laravel Sailで開発環境を構築したので、備忘録も兼ねて構築手順を記事にまとめます。

# 前提環境
* OSはWindows11
* 「WSL2(Ubuntu)」と「Dockerデスクトップ」のインストール・各種設定済み
* テキストエディタは「Visual Studio Code」を使用

# Laravel Sailとは
Laravel Sail（ララベルセイル）は、Dockerを使った開発環境です。
本番環境と同様、Unix系で開発環境を構築できます。

Laravel Sailで環境構築するとLaravelを使うために必要なものを一気に用意できるのがメリットです。

Laravel公式マニュアルの[インストールの章](https://readouble.com/laravel/10.x/ja/installation.html)でも、Laravel Sailが紹介されています。

ただし、トラブルが起こった場合には、Dockerの知識が必要になるため注意が必要です。

# 開発環境の構築手順
### Laravel Sailでプロジェクト作成
#### 1. 「Dockerデスクトップ」を起動します
#### 2. Ubuntuを起動し、下記コマンドを実行します<br>※[プロジェクト名] には作成するプロジェクトの名前を入力してください
`curl -s https://laravel.build/[プロジェクト名] | bash`
#### 3. プロジェクト作成が完了したら、画面の指示に従って、下記コマンドを実行します<br>※[プロジェクト名] には作成したプロジェクトの名前を入力してください
`cd [プロジェクト名]`
`./vendor/bin/sail up -d`
#### 4. ブラウザに http://localhost/ を表示させます<br>Laravelのトップ画面が表示されればプロジェクトの作成は成功です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640309/2cf6d669-c263-dc6e-be0c-c9c1bdefdb51.png)

#### 5. 作業をやめる場合は、下記コマンドを実行します
`./vendor/bin/sail stop`

### phpMyAdminとの連携
Laravel Sailは、デフォルトでMySQLが使えるようになっています。
ただし、そのままでは視覚的にテーブルを見られないので、phpMyAdminと連携して、ブラウザ上でデータベースを確認できるようにします。
#### 1. Ubuntu上で下記コマンドを実行し、起動しているLaravel Sailを止めておきます
`./vendor/bin/sail stop `

#### 2. プロジェクトの中の「docker-compose.yml」ファイルを開きます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640309/da6a576a-5ca6-cd44-b05d-106b8f72db7a.png)

#### 3. mysqlの設定の後に、phpMyAdmin用の設定を追記します<br>※インデントの位置や追記する場所によってはエラーになるので、注意してください。

下記コードを「docker-compose.yml」ファイル内に追記します
````
    phpmyadmin:
        image: phpmyadmin/phpmyadmin
        links:
            - mysql:mysql
        ports:
            - 8080:80
        environment:
            MYSQL_USERNAME: '${DB_USERNAME}'
            MYSQL_ROOT_PASSWORD: '${DB_PASSWORD}'
            PMA_HOST: mysql
        networks:
            - sail
````

追記後のイメージです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640309/0fff613a-6216-930a-0be4-a62932bb3b98.png)

#### 4. 「.env」ファイルを開き、データベースの設定を確認します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640309/7df33a53-fcd1-55a5-1354-c1176a030b47.png)

#### 5. Ubuntuに戻り、Laravel Sailを再度起動します
`./vendor/bin/sail up -d`

#### 6. ブラウザに  http://localhost:8080/ を表示させます<br>phpMyAdminのログイン画面が表示されれば連携は成功です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640309/9c40a0ff-8eab-3ad7-8117-b09badaf9cdc.png)

### 認証機能のインストール（適宜）
Laravel Sailでは、Laravel Breezeパッケージをインストールして、手軽にユーザー登録・ログイン画面を搭載できます。

#### 1. Laravel Sailを起動します
`./vendor/bin/sail up -d`

#### 2. プロジェクトの場所で下記コマンドを実行し、Breezeパッケージをインストールします
`sail composer require laravel/breeze --dev`
`sail artisan breeze:install`

#### 3. 設定のための質問が3つ順番に出てくるので、ご自身の希望に応じてそれぞれ選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640309/74a0edec-2772-cd7b-ee16-fec69491966d.png)

#### 4. 最後に下記メッセージが表示されれば、インストールは成功です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640309/09eaac10-23d8-4e35-1d33-c9b2944ce3d4.png)

#### 5. マイグレートを行って、データベースにテーブルを追加します
`sail artisan migrate`

#### 6. ブラウザに http://localhost/ を表示させます<br>Breezeがインストールされると、右上に「Log in」「Register」メニューが表示されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640309/ae5e1be1-efd2-c449-d698-b71b1239d648.png)

#### 7. 「Register」をクリックすると、登録画面が表示されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640309/628e63e7-dc27-2f33-3293-48aad508d99c.png)

### 初期設定
最後に、「タイムゾーン」「言語」「警告メッセージ」の日本語化を行います。
今回は、[askdkc/breezejp](https://github.com/askdkc/breezejp)パッケージをインストールして、上記3つの設定を自動で行います。

#### 1. askdkc/breezejp パッケージをインストールするために、下記コマンドを実行します
`composer require askdkc/breezejp --dev`
`php artisan breezejp`

#### 2. 「config/app.php」ファイルを開き、タイムゾーンが「Asia/Tokyo」、言語が「ja」にそれぞれ変更されていることを確認します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640309/fc149dd0-21b5-feb2-c815-05ea2c14d354.png)

#### 3. ブラウザに http://localhost/ を表示させ、右上の「Register」をクリックします<br>登録画面が日本語化されていることを確認します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640309/ae5e1be1-efd2-c449-d698-b71b1239d648.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640309/cddc2c8b-7e17-4dc8-d7e5-ee12b2cf7dc8.png)

# おわりに
今回は、Laravel Sail と Laravel Breeze を使用して開発環境を構築する手順をまとめました。今後、より便利なパッケージ等があれば追記していこうと思います。
ここまでお読みいただきありがとうございました。