開発環境(Laravel + Next.js + TypeScript)をDockerで構築してみた

## 環境情報
**ディレクトリ構成**

```
todo
 ├── app/   　　// Next.jsのプロジェクトが入る
 ├── backend/  // Laravelのプロジェクトが入る
 ├── docker/
 │   ├── front/
 │   │   └── Dockerfile
 │   ├── mysql/
 │   │   ├── data/
 │   │   └── my.cnf
 │   ├── nginx/
 │   │   └── default.conf
 │   └── php/
 │       ├── Dockerfile
 │       └── php.ini
 └── compose.yml
```

**開発環境**
- PHP 8.2
- Laravel 10
- Nginx
- Node.js 22.3
- Next.js
- Typescript
- MySQL 8.2.0

## compose.yml
compose.ymlファイルにコンテナの設定情報を記載します。
```compose.yml
services:
  nginx:
    image: nginx:latest
    ports:
      - "80:80"
    volumes:
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
      - ./backend:/var/www/

  php:
    build: ./docker/php
    volumes:
      - ./backend:/var/www/

  front:
    build: ./docker/front
    volumes:
      - ./app:/app
    environment: 
      - WATCHPACK_POLLING=true  #ホットリロード機能
    command: sh -c "npm run dev"
    ports:
      - "3000:3000"

  db:
    image: mysql:8.2.0
    ports:
      - 3306:3306
    volumes:
      - ./docker/mysql/data:/var/lib/mysql
      - ./docker/mysql/my.cnf:/etc/mysql/conf.d/my.cnf
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: todo_db
      MYSQL_USER: todo_user
      MYSQL_PASSWORD: todo_pass

```
## Nginxの設定

```default.conf
server {
    listen 80;
    index index.php index.html;
    server_name localhost;

    root /var/www/public;

    location / {
        try_files $uri $uri/ /index.php$is_args$args;
    }

    location ~ \.php$ {
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass php:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }
}
```


## PHPの設定
PHPイメージ作成のための設定を記述します。

```Dockerfile:Dockerfile
FROM php:8.2-fpm

COPY php.ini /usr/local/etc/php/

RUN apt-get update \
  && apt-get install -y default-mysql-client zlib1g-dev libzip-dev\
  && docker-php-ext-install pdo_mysql zip

RUN php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
RUN php composer-setup.php
RUN php -r "unlink('composer-setup.php');"
RUN mv composer.phar /usr/local/bin/composer

WORKDIR /var/www
```

```php.ini
[Date]
date.timezone = "Asia/Tokyo"

[mbstring]
mbstring.internal_encoding = "UTF-8"
mbstring.language = "Japanese"
```


## Next.jsとTypescriptのインストール
appディレクトリ内にNext.jsのプロジェクトを作成します。
```
npx create-next-app . --ts
```

## Next.jsの設定
フロントを動かすためにNode.jsのイメージを作成します。

```Dockerfile:Dockerfile
FROM node:22.13-alpine

WORKDIR /app
```

## コンテナの作成と起動
ここまでの設定が完了したらイメージからコンテナを作成し起動させます。
```
docker compose up -d --build
```
DockerDesktopを確認し、全てのコンテナが正常に起動していることが確認できれば成功です。

![スクリーンショット 2025-02-09 20.14.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3959267/d23fbd7b-1395-f7f6-9bc6-46b31db989d8.png)

## Laravelのインストール
phpコンテナ内でLaravelのプロジェクトを作成します。
```
composer create-project laravel/laravel . "10.*" --prefer-dist
```

## 表示確認
**Laravel**

http://localhost/ にアクセスするとLaravelの初期画面が表示されました。

![スクリーンショット 2025-02-09 19.43.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3959267/b97aaa1f-f000-e9ef-c737-24331e3fcf8a.png)

**Next.js**

http://localhost:3000/ にアクセスするとNext.jsの初期画面が表示されました。

![スクリーンショット 2025-02-09 19.13.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3959267/b5c5fc8a-20e6-54a0-c18c-0852bc0d6a7a.png)

おわり。