LaravelとNextとDockerとTypeScript その1

## 環境構築
laravelはvueを標準採用しているが，インターン先でnext.jsで開発することになったので備忘録として残していく。
またあまり参考になる記事がなかったので，その意味も含めて残す。
### 初期フォルダ構成
```
root/
   ├ .docker
   │   ├ api
   │   │  ├ Dockerfile
   │   │  ├ entrypoint.sh
   │   │  └ conf
   │   │     ├ docker.conf
   │   │     └ php.ini
   │   ├ db
   │   │  ├ my.cnf
   │   │  └ Dockerfile
   │   ├ front
   │   │  └ Dockerfile
   │   └ nginx
   │      ├ default.conf
   │      └ Dockerfile
   └ docker-compose.yml
```
### プロジェクト作成
1. docker-compose.ymlの記述
- frontend
next.jsを管理するコンテナ
```dockerfile
front:
  container_name: laravelnext-front
  build:
    context: ./.docker/front
    dockerfile: Dockerfile
  ports:
    - 3000:3000
  volumes:
    - ./frontend:/var/www/html/frontend
  working_dir: /var/www/html/frontend
  stdin_open: true
  tty: true
  depends_on:
    - nginx
```
- backend
laravel apiを管理するコンテナ
```dockerfile
api:
  container_name: laravelnext-api
  build:
    context: ./.docker/api
    dockerfile: Dockerfile
  volumes:
    - ./backend:/var/www/html/backend
  tty: true
  environment:
    - APP_ENV=development
  depends_on:
    - db
```

- nginx
frontのwebサーバ
```dockerfile
nginx:
  container_name: laravelnext-nginx
  build:
    context: ./.docker/nginx
    dockerfile: Dockerfile
  ports:
    - 8000:80
  working_dir: /var/www/html
  volumes:
    - ./:/var/www/html
  tty: true
  depends_on:
    - api
```

- db
dbコンテナ
```dockerfile
db:
  container_name: laravelnext-db
  build:
    context: ./.docker/db
    dockerfile: Dockerfile
  ports:
    - 3306:3306
  environment:
    MYSQL_DATABASE: laravelnext
    MYSQL_USER: laravelnext
    MYSQL_PASSWORD: password
    MYSQL_ROOT_PASSWORD: password
    TZ: "Asia/Tokyo"
  volumes:
    - db-volume:/var/lib/mysql:cached
```
- phpmyadmin
dbをwebで確認するためのphpmyadminコンテナ
```dockerfile
phpmyadmin:
  image: phpmyadmin/phpmyadmin
  container_name: laravelnext-phpmyadmin
  platform: linux/amd64/v8
  hostname: phpmyadmin
  depends_on:
    - db
  ports:
    - "5005:80"
```
<!-- open属性なし -->
<details><summary>docker-compose.yml(全文)</summary>


```docker:docker-compose.yml
version: "3.8"

services:
  front:
    container_name: laravelnext-front
    build:
      context: ./.docker/front
      dockerfile: Dockerfile
    ports:
      - 3000:3000
    volumes:
      - ./frontend:/var/www/html/frontend
    working_dir: /var/www/html/frontend
    stdin_open: true
    tty: true
    depends_on:
      - nginx
  nginx:
    container_name: laravelnext-nginx
    build:
      context: ./.docker/nginx
      dockerfile: Dockerfile
    ports:
      - 8000:80
    working_dir: /var/www/html
    volumes:
      - ./:/var/www/html
    tty: true
    depends_on:
      - api
  api:
    container_name: laravelnext-api
    build:
      context: ./.docker/api
      dockerfile: Dockerfile
    volumes:
      - ./backend:/var/www/html/backend
    tty: true
    environment:
      - APP_ENV=development
    depends_on:
      - db
  db:
    container_name: laravelnext-db
    build:
      context: ./.docker/db
      dockerfile: Dockerfile
    ports:
      - 3306:3306
    environment:
      MYSQL_DATABASE: laravelnext
      MYSQL_USER: laravelnext
      MYSQL_PASSWORD: password
      MYSQL_ROOT_PASSWORD: password
      TZ: "Asia/Tokyo"
    volumes:
      - db-volume:/var/lib/mysql:cached
  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    container_name: laravelnext-phpmyadmin
    platform: linux/amd64/v8
    hostname: phpmyadmin
    depends_on:
      - db
    ports:
      - "5005:80"

volumes:
  db-volume:
```
</details>

### まとめ
各Dockerfileは次回で