😇

Dockerを使ったLaravel × React 環境構築(共同開発編)

2023/01/15に公開

Docker

Dockerを使ったLaravel × React 環境構築(共同開発)

自分が共同開発を行った際に行った手順を備忘録として残します。
今回は、Docker(sail)を使用し、フロントを「React」、バックを「Laravel」で開発しました。
LaravelとReactで開発を行うので、「Inertia.js」を使用しています。
※DBはmysqlを使用しています

3人で開発を行いましたが、全員Dockerを用いての共同開発が初めてで手こずりました💦
どこか間違いや、「こうした方が良い！」みたいなことがありましたら、容赦なく言っていただけると助かります🙇

以下の準備は終わっているものとする

Docker Desktop のインストール
Github

手順一覧

開発環境を作成する人の手順

Laravelプロジェクトを作成
作成したLaravelプロジェクトの権限の変更
起動するかの確認
phpmyadmin のコンテナを追加
認証機能(Laravel Breeze)のパッケージをインストール
Githubにコードを公開し、開発メンバーに共有する

開発環境を共有してもらう側の手順

Githubのリポジトリをクローンする
LaravelプロジェクトをSailを使って構築する
DB_HOSTを変更する
Sailをバッググランドで起動する
APP_KEYを更新する
テーブルを作成する
Laravel-Mixのビルド
ビルド

開発環境を作成する人の手順

Laravelプロジェクトの作成

ターミナルで以下コマンドを入力

curl -s https://laravel.build/ファイル名 | bash

権限の変更

ターミナルで以下のコマンドを入力

sudo chmod -R 777 ファイル名

起動するかの確認（一応）

アプリケーションへ移動する

cd ファイル名

コンテナの立ち上げ

./vendor/bin/sail up -d

localhost で画面が表示されるか確認する
表示されれば、次の作業をするためにコンテナを落とす

./vendor/bin/sail down

phpmyadmin のコンテナを追加

docker-compose.ymlに下記コードを追記する．追記場所はselenium の下
※重要　seleniumと同じ階層に保存する(画像あり)

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

mysqlが起動するか確認する

アプリケーションへ移動する

cd ファイル名

コンテナ立ち上げ

./vendor/bin/sail up -d

localhost で画面が表示されるか確認する
localhost:8080 でmysqlが表示されるか確認する
mysqlのログインは設定していなければ、下記の通りとなる
ユーザー名: sail パスワード: password

認証機能(Laravel Breeze)をアプリケーションに追加する

アプリケーションへ移動する

cd ファイル名

下記コマンドを実行し，必要なファイルをダウンロードする

./vendor/bin/sail composer require laravel/breeze --dev

下記コマンドでインストールする

./vendor/bin/sail php artisan breeze:install react

php artisanコマンドでbreezeのインストールを行いますがbreeze:installの後ろに何も設定していない場合はalpine.jsがインストールされます。reactを指定するとInertia.jsとReactがインストールされます。今回はReactを使用しての開発なので、Reactを指定。Vueを利用したい場合はreactの代わりにvueを指定します。

下記コマンドを順番に実行し、その他必要なパッケージをインスールしてビルドする

./vendor/bin/sail npm install
./vendor/bin/sail npm run build

やや時間かかる。。。
処理が終わったら下記コマンドを実行する

./vendor/bin/sail php artisan migrate

処理が終わってlocalhost に接続してみると、右上にLogin と Register が表示されていることを確認できる
localhost:8080 ではテーブルが作成されていることが確認できる

テストユーザーデータが欲しい場合のみ

Laravel には「seeder」という機能があり，テスト用のデータを簡単に作成することができる
今回はダミーデータを 10 件作成する．database/seeders/DatabaseSeeder.php を以下のように編集する

DatabaseSeeder.php

<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
  /**
   * Seed the application's database.
   *
   * @return void
   */
  public function run()
  {
    // 🔽 この行をコメントから外す
    \App\Models\User::factory(10)->create();

    // 🔽 こちらはそのまま
    // \App\Models\User::factory()->create([
    //     'name' => 'Test User',
    //     'email' => 'test@example.com',
    // ]);

  }
}

下記コマンドを実行する

./vendor/bin/sail php artisan db:seed

mysqlのusersテーブルでテストユーザーが入っていることを確認できる

Githubに公開する
Githubに公開する方法がわからない方は調べてください

開発環境を共有してもらう側の手順

Githubのリポジトリをクローンする

共有されたGithubのリポジトリをクローンする

git clone YOUR_REPOSITORY_URL

LaravelプロジェクトをSailを使って構築する

Windowsの場合は、WSL2やDockerのインストールが必要になる
Macの場合は、Dockerが必要になる
リポジトリをクローンした直後は、vendorフォルダが存在しない
このフォルダの中にはComposerで管理しているパッケージが格納されるが、Gitの管理対象外になっている
下記コマンドをコピペでコマンドで実行する
laravelsail/phpXX-composerの部分の81は、プロジェクトで使用するPHPのバージョンと合わせる必要がある
docker-compose.ymlのlaravel.testコンテナーのbuild定義を確認すれば確認できる
(81はPHP8.1を表している)

docker run --rm \
    -u "$(id -u):$(id -g)" \
    -v $(pwd):/var/www/html \
    -w /var/www/html \
    laravelsail/php81-composer:latest \
    composer install --ignore-platform-reqs

vendorフォルダに、Composerのパッケージがインストールされた

DB_HOSTを変更する

.env.example を参考にして(コピペでOK)　.envファイルを作成する
.env ファイルの中身を書き換える
コンテナ内のMySQLに接続するために以下のように変更する

DB_HOST=127.0.0.1
↓
DB_HOST=mysql

Sailをバッググランドで起動する

Sailをバッググランドで起動する

./vendor/bin/sail up -d

APP_KEYを更新する

下記コマンドでAPP_KEYを更新する

./vendor/bin/sail php artisan key:generate

テーブルを作成する

以下のコマンドでテーブルを作成する

./vendor/bin/sail php artisan migrate

phpMyAdminから正常にテーブルが作成されたことが確認できる
MySQLのユーザ・パスワードは.envに記載の通り

Laravel-Mixのビルド

NPMコマンドでパッケージをインストールする

./vendor/bin/sail npm install

ビルド

開発時なのでdevを指定する

./vendor/bin/sail npm run dev

localhost で画面が表示されるのが確認できる

Dockerを使ったLaravel × React 環境構築(共同開発)

以下の準備は終わっているものとする

手順一覧

開発環境を作成する人の手順

開発環境を共有してもらう側の手順

開発環境を作成する人の手順

開発環境を共有してもらう側の手順

Discussion