【環境構築】Laravel×React×Docker×PostgresSQL

こんにちは。
友達とフリマサイトを作るために、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が一緒に動くフリマサイトの環境が整いました！

最後まで読んでいただきありがとうございます！