☺️

React × Laravel × Dockerで簡単に環境構築する

に公開
Docker
Laravel
React
docker-compose
Vite
tech

Reactとlaravelの環境構築をします。
今回は以下のような点に考慮して、環境を構築します。

  • リポジトリをクローンした人は最低限のコマンドでセットアップできる。
  • コンテナを起動したら自動的に開発環境がビルドされる
  • 一つのリポジトリにバックエンド、フロントエンドを用意し、分離はしない
  • データベースはPostgreSQLを採用
  • 自身のpcにnode.jsが入っているものとする。

フォルダ作成

以下のようにフォルダを作成

C:.
├─back #laravelのプロジェクト
├─front #Reactのプロジェクト
└─docker-compose.yml

Reactの環境構築

Reactのフォルダを作る

cd front
npm create vite@latest
cd react-app
npm i

npm create vite@latestでreact環境を作成。
実行するとディレクトリ名、フレームワーク、使用する言語を聞かれるので入力。
今回はreact-appという名前でディレクトリを作成します。

Dockerfileの作成

frontの中にdockerfileを作成し、以下のように編集。

front/Dockerfile
FROM node:22
WORKDIR /app/react-app
COPY ./react-app/package*.json ./
RUN npm install
COPY . .
EXPOSE 5173
CMD ["npm" , "run" , "dev"]

docker-composeを編集。

docker-compose.ymlを以下のように編集。

docker-compose.yml
services:
  front:
    build: ./front
    ports:
      - 3333:5173
    volumes:
      - ./front/react-app:/app/react-app
    environment:
      - CHOKIDAR_USEPOLLING=true
      - WATCHPACK_POLLING=true

viteの設定

vite.config.tsを以下のように編集します。

front/react-app/vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
    server: {
    host: "0.0.0.0",
    port: 5173,
    watch: {
      usePolling: true,
      interval: 1000
    }
  }
})

これでフロントは終わりです。
docker compose up -dで起動でき、http://localhost:3333 にアクセスできるようになります。
ホットリロードにも対応できています。

Laravelの環境構築

Dockerfileの作成。

backディレクトリにDockerfileを作成し、以下を記載

back/Dockerfile
FROM php:8.4
WORKDIR /api
#パッケージのインストール
COPY --from=composer:2.8 /usr/bin/composer /usr/bin/composer
ENV COMPOSER_ALLOW_SUPERUSER=1
ENV COMPOSER_HOME="/opt/composer"
ENV PATH="$PATH:/opt/composer/vendor/bin"
RUN apt-get update \
    && apt-get install -y zip libpq-dev \
    && docker-php-ext-install pdo_pgsql pgsql

docker-compose.ymlを編集。

docker-compose.ymlを以下のように編集。

docker-compose.yml
services:
  front:
    build: ./front
    ports:
      - 3333:5173
    volumes:
      - ./front/react-app:/app/react-app
      - /app/react-app/node_modules
    environment:
      - CHOKIDAR_USEPOLLING=true
      - WATCHPACK_POLLING=true
  # 追記
  back:
    build: ./back
    volumes:
      - ./back:/api
    ports:
      - 9000:8000

laravelプロジェクトの作成

再度コンテナを立ち上げた後、以下を実行

docker compose run back bash
composer create-project laravel/laravel laravel-app

composer create-project laravel/laravel ディレクトリ名で作成します。
今回はlaravel-appという名前でディレクトリを作成します。

dokcerfileの編集。

laravelプロジェクトが作成されたらDockerfileを以下のように編集します。

back/Dockerfile
FROM php:8.4
WORKDIR /api
#パッケージのインストール
COPY --from=composer:2.8 /usr/bin/composer /usr/bin/composer
ENV COMPOSER_ALLOW_SUPERUSER=1
ENV COMPOSER_HOME="/opt/composer"
ENV PATH="$PATH:/opt/composer/vendor/bin"
RUN apt-get update \
    && apt-get install -y zip libpq-dev \
    && docker-php-ext-install pdo_pgsql pgsql
#以下の内容を追記
COPY . .
WORKDIR /api/laravel-app
RUN composer install
CMD ["php", "artisan", "serve", "--host", "0.0.0.0"]
EXPOSE 8000

これでコンテナを起動したらlaravelが立ち上がるようになりました。
docker compose up -d --buildを実行後、 http://localhost:9000 にアクセス出来たら成功。

DBの設定

docker-compose.ymlの編集。

docker-compose.ymlに以下の内容を追記

docker-compose.yml
services:
  front:
    build: ./front
    ports:
      - 3333:5173
    volumes:
      - ./front/react-app:/app/react-app
      - /app/react-app/node_modules
    environment:
      - CHOKIDAR_USEPOLLING=true
      - WATCHPACK_POLLING=true
  back:
    build: ./back
    volumes:
      - ./back:/api
    ports:
      - 9000:8000
  #追記
  db:
    image: postgres:15
    volumes:
      - ./back/laravel-app/postgre_DB:/var/lib/postgresql/data
    ports:
      - 5432:5432
    environment:
      POSTGRES_DB: dev
      POSTGRES_USER: user
      POSTGRES_PASSWORD: password

DB設定に関しては各自設定してください。
編集後、docker compose up -d --buildを実行し、laravel-appの中にpostgre_DBが作成されたら成功。

.envの編集。

back/laravel-app/.env
#編集
DB_CONNECTION=pgsql
DB_HOST=db #docker-composeのサービス名にあたる部分。
DB_PORT=5432 #5432固定でいい
DB_DATABASE=dev #POSTGRES_DBと一致させる。
DB_USERNAME=user #POSTGRES_USERと一致させる。
DB_PASSWORD=password #POSTGRES_PASSWORDと一致させる。s

編集後、docker-compose run back bashでコンテナの中に入り、
php artisan migrateが実行できたら成功。
これで、laravelとReactのプロジェクトは完成です。

セットアップ方法

最後にこのプロジェクトをクローンした人がセットアップする方法を考えます。

.envを設定する

cd back/laravel-app
cp .env.example .env

laravelでは.envの見本として.env.exampleがあるのでそれをコピーしてください。
コピーしたら、.envのデータベース情報を修正してください。

フロントエンドの起動

node_modulesをインストールします。
コンテナ内で以下を実行。

docker compose run front bash
npm install

バックエンドの起動

.envを設定できたら以下を実行。

docker compose up -d --build
docker compose run back bash
composer install 
php artisan key:generate
php artisan migrate

composer installを実行するとvendorディレクトリが生成されます。
php artisan key:generateでAPP_KEYが作成されます。
実行後、http://localhost:3333 と　http://localhost:9000 にアクセスできたら成功です。

終わり

これにて環境構築は終わりです。
フロントエンドの環境構築の詳しい情報は以下の記事を見てください。
https://zenn.dev/amethyst/articles/c1fa2e8ff574bd

Discussion