Zenn
🙆

laravel + nextjsのDocker環境構築・新規プロジェクト

2024/05/13に公開
Docker
Next.js
PHP 8
tech

1.導入環境

  • M1 pro macbookpro(os:sonoma:14.4.1（23E224）)
  • docker desktopが入ってることが前提となります。

2.ディレクトリ構成

├── README.md
├── backend
│   └── Dockerfile
├── compose.yaml
├── db
│   └── my.cnf
├── frontend
│   ├── Dockerfile
│   ├── laravel-next
│   └── package-lock.json
└── mysql
    └── my.cnf

3.各ディレクトリのDockerfileとCompose.yaml

frontend/Dockerfile
#node.jsを採用
FROM node:20.12.2

#作業ディレクトリの設定
WORKDIR /app
backend/Dockerfile
#php8.3を使用するためのDockerfile
FROM php:8.3-apache

RUN apt-get update && apt-get install -y \
    libzip-dev \
    zip \
    unzip \
    && docker-php-ext-install zip pdo_mysql mysqli

#composerのインストール \
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer

#apacheの設定
RUN a2enmod rewrite
compose.yaml
version: "3.8"
services:
  frontend:
    build:
      context: /frontend
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    volumes:
      - .:/pages
    working_dir: /pages
    tty: true
    stdin_open: true


  backend:
    build:
      context: /backend
      dockerfile: Dockerfile
    ports:
      - "8080:8080"
    volumes:
      - backend:/var/www/html
    working_dir: /var/www/html

  db:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: mydb
      MYSQL_USER: user
      MYSQL_PASSWORD: password
    ports:
      - "3306:3306"
    volumes:
      - .db:/var/lib/mysql
      - ./mysql/my.cnf:/etc/mysql/my.cnf

Dockerfileとcompose.yamlを作成したら

docker compose build -d

4.laravelプロジェクト・nextのプロジェクトを新規で作成する

laravel側の新規プロジェクトの立ち上げ方

composer create-project "laravel/laravel=バージョン" プロジェクト名

next側の新規プロジェクトの立ち上げ方

npx create-next-app@latest
または
yarn create next-app

typescriptで始めたい人は

npx create-next-app@latest --typescript
または 
yarn create next-app --typescript

まとめ

今回はlaravel + nextjsのdocker環境構築方法についてまとめてみました。
皆様の問題解決の手助けになれていれば幸いです。

Discussion