😇

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

2023/01/15に公開約4,400字

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

自分が共同開発を行った際に行った手順を備忘録として残します。
今回は、Dockerを使用し、フロントを「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 で画面が表示されるのが確認できる

Discussion

ログインするとコメントできます