こんにちは。
友達とフリマサイトを作るために、LaravelとReactを使ってSPA（Single Page Application）の開発に挑戦中です
環境構築に成功したので書いていきます！
プロジェクトの作成
まず、プロジェクトのフォルダを作成します。
手順１.フォルダの作成
- Projectフォルダの作成
Projectという名前のフォルダを作ります。ここにすべてのファイルを入れます。
$ mkdir Project
Project フォルダの中に backend と frontend という2つのフォルダを作ります。これは、それぞれフリマサイトのバックエンド（サーバー側）とフロントエンド（見た目や操作画面）を作るためのフォルダです。
$ cd Project
$ mkdir backend
$ mkdir frontend
手順2. reactプロジェクトの作成
- Reactプロジェクトの作成
（事前にNodeをインストールしてください）
次に、frontend フォルダの中にReact（ウェブページを作るための道具）をインストールします。Reactを使うと、見た目をすごくかっこよくしたり、簡単にウェブページを作ることができます。
-
frontendフォルダに移動して、Reactプロジェクトを作ります。
$ cd frontend
$ npx create-react-app@latest
Reactがインストールされたら、ウェブページのデザインを作り始められます！
手順3. Laravelプロジェクトの作成
- Laravelプロジェクトの作成
（事前にPHPやComposerをインストールしてください）
次に、backend フォルダの中にLaravel（サーバー側を作るための道具）をインストールします。これを使うと、データベースやユーザー管理が簡単にできます。
-
backendフォルダに移動して、Laravelをインストールします。
$ cd backend
$ composer create-project --prefer-dist laravel/laravel .
Laravelがインストールされたら、データのやりとりをするサーバーを作れます！
Docker の構築
手順１.docker-compose.ymlの作成
まず、docker-compose.yml というファイルを作ります。これは、ReactとLaravelが動く環境を準備するための設定を書いたものです
ルートディレクトリ(Projectフォルダ)に新規ファイルで追加します
# version: "3.8"
services:
laravel:
build:
context: ./backend
dockerfile: Dockerfile
container_name: laravel_app
ports:
- "8000:8000"
volumes:
- ./backend:/var/www/html
environment:
- DB_CONNECTION=pgsql
- DB_HOST=dev-postgres
- DB_PORT=5432
- DB_DATABASE=test # お好みで変えてください
- DB_USERNAME=test_user # お好みで変えてください
- DB_PASSWORD=test_password # お好みで変えてください
command: sh -c "sleep 5 && php artisan migrate && php artisan serve --host=0.0.0.0 --port=8000"
networks:
- laravel_react_network
depends_on:
- dev-postgres
react:
build:
context: ./frontend
dockerfile: Dockerfile
container_name: react_app
working_dir: /app
volumes:
- ./frontend:/usr/src/app
ports:
- "3000:3000"
command: sh -c "npm install && npm start"
networks:
- laravel_react_network
depends_on:
- laravel
dev-postgres:
image: postgres:15-alpine
container_name: dev-postgres
restart: always
environment:
POSTGRES_USER: test_user # お好みで変えてください
POSTGRES_PASSWORD: test_password # お好みで変えてください
POSTGRES_DB: test # お好みで変えてください
volumes:
- pgdata:/var/lib/postgresql/data
ports:
- "5434:5432"
networks:
- laravel_react_network
pgadmin:
image: dpage/pgadmin4
container_name: pgadmin
environment:
PGADMIN_DEFAULT_EMAIL: admin@example.com
PGADMIN_DEFAULT_PASSWORD: admin
ports:
- "5050:80"
networks:
- laravel_react_network
volumes:
pgdata:
networks:
laravel_react_network:
このファイルは、「Laravel」と「React」、そしてデータベースを一度にセットアップするためのものです！
手順2.DockerFile作成
-フロントエンド（React）のDockerFile
/frontendフォルダに次の内容でファイルを作ります。
# ベースイメージとしてNode.jsのAlpineイメージを使用
FROM node:20-alpine
# 必要なツール（bashとcurl）, Node.js / npmをインストール
RUN apk add --no-cache bash curl nodejs npm
# 作業ディレクトリを設定
WORKDIR /app
# プロジェクトファイルをコピー
COPY . /app
# 依存関係をインストール
RUN npm install
# 開発サーバーを起動
CMD ["npm", "start"]
# 実行権限が付与されていないため、実行権限を付与
RUN chmod +x node_modules/.bin/react-scripts
- バックエンド（Laravel）のDockerFile
/backendフォルダに次の内容でファイルを作ります。
# ベースイメージとしてPHP Apacheイメージを使用
FROM php:8.2-apache
# 必要な拡張モジュールをインストール
RUN apt-get update && apt-get install -y \
libpq-dev \
unzip \
&& docker-php-ext-install pdo pdo_pgsql
# Node.jsとnpmをインストール
RUN curl -sL https://deb.nodesource.com/setup_20.x | bash - && \
apt-get install -y nodejs
# 作業ディレクトリを設定
WORKDIR /var/www/html
# Composerのインストール
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer
# プロジェクトファイルをコピー
COPY . /var/www/html
# 権限を設定
RUN chown -R www-data:www-data /var/www/html
# Laravel用ポートを設定
EXPOSE 80
# Apacheの設定
RUN echo "\n\
<VirtualHost *:80>\n\
DocumentRoot /var/www/html/public\n\
<Directory /var/www/html/public>\n\
AllowOverride All\n\
Require all granted\n\
</Directory>\n\
</VirtualHost>" > /etc/apache2/sites-available/000-default.conf
.envファイルの設定
最後に、/backendフォルダにデータベースとの接続情報を管理する .envファイルを作ります。
# データベース接続設定
DB_CONNECTION=pgsql
DB_HOST=dev-postgres
DB_PORT=5432
DB_DATABASE=test # お好みで変えてください
DB_USERNAME=test_user # お好みで変えてください
DB_PASSWORD=test_password # お好みで変えてください
これで、LaravelとReactが一緒に動くフリマサイトの環境が整いました！
最後まで読んでいただきありがとうございます！