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を管理するコンテナ

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を管理するコンテナ

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サーバ

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コンテナ

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コンテナ

phpmyadmin:
  image: phpmyadmin/phpmyadmin
  container_name: laravelnext-phpmyadmin
  platform: linux/amd64/v8
  hostname: phpmyadmin
  depends_on:
    - db
  ports:
    - "5005:80"

docker-compose.yml(全文)

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:

まとめ

各Dockerfileは次回で