はじめに
2022年9月から本格的にプログラミングを学習し、2023年4月に京都のWeb系ベンチャ企業でフロントエンジニアとして入社。
現在エンジニア歴2ヶ月になります。
実務では主にWordpress, JavaScript, Laravelを使用してます。
この記事では、Laravel Sailを使用した環境構築の手順について説明します。
この記事の対象者
- Laravel Sailを使用して開発環境を構築したい
- Docker Desktopがインストールされている状態
Laravel Sailは、Laravelの開発環境をDockerを使用して簡単に構築するためのツールです。この記事では、Laravel Sailを使用してLaravelの開発環境を構築し、さらにphpMyAdminとLaravel Breezeを設定する方法を解説します。
開発環境
mac Ventura 13.4
Visual Studio Code
Docker version 20.10.22
Laravelのインストール
まずは、Laravelのインストールから始めます。以下の手順で進めていきましょう。
1: 作業ディレクトリで以下のコマンドを入力します。このコマンドは、Laravelの新しいプロジェクトを作成します。your-project-nameの部分は、あなたのプロジェクト名に置き換えてください。
curl -s https://laravel.build/your-project-name | bash
2: Laravel Sailを起動します。プロジェクトが作成されたら、そのプロジェクトのディレクトリに移動し、以下のコマンドを実行します。このコマンドは、Laravel Sailをバックグラウンドで起動します。
cd your-project-name && ./vendor/bin/sail up -d
3: Sailを停止するときは、以下のコマンドを実行します。
./vendor/bin/sail down
4: エイリアスの設定を行います。これにより、sailと入力するだけで./vendor/bin/sailを実行できるようになります。以下のコマンドを実行します。
echo 'alias sail="bash vendor/bin/sail"' >> ~/.bashrc
source ~/.bashrc
Laravel SailでphpMyAdminの設定
次に、Laravel SailにphpMyAdminを設定します。phpMyAdminは、WebブラウザからMySQLを操作できるツールです。
Laravel Sailを停止します。以下のコマンドを実行します。
sail down
docker-compose.ymlファイルを編集します。MySQLの設定の下に、以下のようにphpMyAdminの設定を追加します。この設定により、phpMyAdminのコンテナが起動し、MySQLに接続できるようになります。
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
ブラウザでhttp://localhost:8080にアクセスしてphpMyAdminを確認します。ユーザー名とパスワードは、.envファイルに記載されています。
Laravel SailでphpMyAdminを設定するプロセス
この図は、ユーザーがターミナルにコマンドを入力し、それがSailやDockerにどのように影響するかを示しています。例えば、ユーザーがdocker-compose.ymlを編集すると、Dockerの設定が更新されます。その後、ユーザーが./vendor/bin/sail up -dをターミナルに入力すると、Sailは起動します。最後に、ユーザーがブラウザでhttp://localhost:8080を開くと、phpMyAdminが表示されます。
BrowserがphpMyAdminになります。
Laravel SailにLaravel Breezeでユーザー登録機能を追加
Laravel Breezeは、Laravelの認証機能を簡単に追加するためのパッケージです。以下の手順でインストールと設定を行います。
Laravel Breezeをインストールします。以下のコマンドを実行します。
sail composer require laravel/breeze --dev
sail artisan breeze:install
sail npm install && sail npm run dev
-
sail composer require laravel/breeze --dev：Laravel Breezeを開発依存性としてインストールします。 -
sail artisan breeze:install：Laravel Breezeのインストールスクリプトを実行します。このスクリプトは、認証ビューとルーティング、コントローラーなどを設定します。 -
sail npm install && sail npm run dev：必要なJavaScriptライブラリをインストールし、アセットをコンパイルします。
breeze:installコマンドを実行すると、以下のような質問が表示されます。
Which stack would you like to install?
blade .......................................................................................................................................... 0
react .......................................................................................................................................... 1
vue ............................................................................................................................................ 2
api ............................................................................................................................................ 3
❯ 0
Would you like to install dark mode support? (yes/no) [no]
❯
Would you prefer Pest tests instead of PHPUnit? (yes/no) [no]
❯
-
"Which stack would you like to install?"：インストールするスタックを選択します。Blade、React、Vue、APIの4つから選べます。Bladeは0、Reactは1、Vueは2、APIは3を選択します。 -
"Would you like to install dark mode support?"：ダークモードのサポートをインストールするかどうかを選択します。yesを選択すると、ダークモードのサポートが追加されます。 -
"Would you prefer Pest tests instead of PHPUnit?"：テストフレームワークとしてPestを使用するか、PHPUnitを使用するかを選択します。PestはPHPUnitに基づいた新しいテストフレームワークで、よりシンプルで直感的なAPIを提供します。
これらの選択肢を選んだ後、以下のコマンドを実行してデータベースのマイグレーションを行います。
sail artisan migrate
このコマンドは、データベースに必要なテーブルを作成します。Laravel Breezeをインストールすると、ユーザー認証に必要なユーザーテーブルのマイグレーションが追加されます。
最後に、.envファイルのAPP_URLをhttp://localhostに設定します。これにより、アプリケーションのURLが正しく設定され、認証機能が正しく動作します。
APP_URL=http://localhost
以上で、Laravel SailにLaravel Breezeを設定し、ユーザー登録機能を追加する設定は完了です。
タイムゾーンの設定
最後に、アプリケーションのタイムゾーンとロケールを設定します。これにより、日付や時間、言語などが正しく表示されます。
config/app.phpファイルを開き、以下のように設定します。
'timezone' => 'Asia/Tokyo',
'locale' => 'ja',
これにより、タイムゾーンが日本時間に、ロケール（言語設定）が日本語に設定されます。
以上で、Laravel Sailを使用した環境構築と、Laravel Breezeでのユーザー登録機能の追加、タイムゾーンとロケールの設定が完了しました。これで、Laravelを使用した開発を始める準備が整いました。