ホーム > Laravel > DockerでLaravel 11 の開発環境を構築する方法【動画あり】
Laravel

DockerでLaravel 11 の開発環境を構築する方法【動画あり】

いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。

関連動画

質問やフィードバック

この記事や動画に関する質問やフィードバックあれば、動画のコメント欄にてお気軽にコメントしてください。

Docker で Laravel 11 の開発環境を構築する方法についてまとめました。

実際に環境構築した動画がありますので、もし記事では分からなかったらそれも参考にしてみてください。

検証した環境

使うツール

  • Docker Desktop
  • VScode
  • Mac

最終的に完成する開発環境

  • Laravel 11
  • PHP 8.3
  • Node.js 20
  • MySQL 8.4

1. Docker Desktop の設定をする

まず、プロジェクト用の「空のフォルダ」を適当な場所に作成してください。

Docker Desktop の DL とインストール

Docker Desktop の公式ページ

上記のページから、ご自身の PC 環境に応じたものをダウンロードし、インストールしてください。

FileSharing にフォルダを追加

※ Windows の場合不要かもしれません。

  1. 右上の歯車
  2. Resources
  3. FileSharing
  4. 一番下に追加ボタンがあるので、最初に作成した空のフォルダを指定
  5. Apply をクリック

filesharing

2. フォルダとファイルの構成

最終的にこの構成になります。

フォルダやファイルが多くややこしいですが、間違っているとうまく動かないので注意してください。

docker/
├── db/
│   ├── data/
│   ├── Dockerfile
│   └── my.conf
├── nginx/
│   ├── default.conf
│   └── Dockerfile
├── php/
│   ├── Dockerfile
│   └── php.ini
src/
docker-compose.yml

web コンテナを作成する

docker-compose.yml を作成し、コードを記述

services:
  web:
    container_name: "web"
    build:
      dockerfile: "./docker/nginx/Dockerfile"
    ports:
      - "8900:80"
    volumes:
      - "./src:/var/www/html"

docker/nginx/Dockerfile を作成し、コードを記述

# 軽量安定版
FROM nginx:stable-alpine

# 設定ファイル
COPY ./docker/nginx/default.conf /etc/nginx/conf.d/default.conf

docker/nginx/default.conf を作成し、コードを記述

server {
        listen 80;
        listen [::]:80;
        # ルートディレクトリを指定
        root /var/www/html/public;

        add_header X-Frame-Options "SAMEORIGIN";
        add_header X-Content-Type-Options "nosniff";

        index index.php;

        charset utf-8;

        location / {
                try_files $uri $uri/ /index.php?$query_string;
        }

        location = /favicon.ico { access_log off; log_not_found off; }
        location = /robots.txt  { access_log off; log_not_found off; }

        error_page 404 /index.php;

        location ~ \.php$ {
                fastcgi_pass app:9000;
                fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
                include fastcgi_params;
        }

        location ~ /\.(?!well-known).* {
                deny all;
        }
}

コマンドをプロジェクトフォルダ(docker-compose.yml がある場所)で実行

ターミナルで以下のコマンドを実行してください

docker compose up -d

docker のエラーは赤色にならないパターンがあるので、しっかり表示をよく読んでエラーが起きていないか確認してください。

正常にコンテナが動いているか確認する

docker compose ps

web コンテナが動いている表示があれば OK です。

また、

http://localhost:8900/

に接続し、nginx のエラー画面が表示されるはずです。

エラー原因は、今後 Laravel プロジェクトが存在する前提によるものです。

app コンテナを作成する

docker-compose.yml に追記

※ 追記をしてください。

  app:
    container_name: "app"
    mem_limit: 6g
    build:
      dockerfile: "./docker/php/Dockerfile"
    volumes:
      - "./src:/var/www/html"
    ports:
      - 5173:5173
    environment:
      - DB_CONNECTION=${DB_CONNECTION:-mysql}
      - DB_HOST=${DB_HOST:-db}
      - DB_PORT=${DB_PORT:-3306}
      - DB_DATABASE=${DB_DATABASE:-laravel-docker}
      - DB_USERNAME=${DB_USERNAME:-user}
      - DB_PASSWORD=${DB_PASSWORD:-password}

docker/php/Dockerfile を作成し、コードを記述

FROM php:8.3-fpm
EXPOSE 5173

# 作成した設定ファイルをコンテナ内にコピー
COPY ./docker/php/php.ini /usr/local/etc/php/php.ini

# パッケージのインストール
RUN apt-get update \
    && apt-get -y install git zip unzip vim \
    wget xz-utils

RUN docker-php-ext-install pdo_mysql mysqli

RUN apt-get -y install libzip-dev \
    && docker-php-ext-install zip

RUN curl -fsSL https://deb.nodesource.com/setup_lts.x | bash -
RUN apt-get install -y nodejs

# composerのインストール
RUN cd /usr/bin && curl -s http://getcomposer.org/installer | php && ln -s /usr/bin/composer.phar /usr/bin/composer

# node使いたいバージョン指定
ENV NODE_VERSION=20.9.0
RUN curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash
ENV NVM_DIR=/root/.nvm
RUN . "$NVM_DIR/nvm.sh" && nvm install ${NODE_VERSION}
RUN . "$NVM_DIR/nvm.sh" && nvm use v${NODE_VERSION}
RUN . "$NVM_DIR/nvm.sh" && nvm alias default v${NODE_VERSION}
ENV PATH="/root/.nvm/versions/node/v${NODE_VERSION}/bin/:${PATH}"
RUN node --version
RUN npm --version

# コンテナ内で作業する際のディレクトリの指定
WORKDIR /var/www/html

docker/php/php.ini を作成し、コードを記述

[Date]
date.timezone = "Asia/Tokyo"
[mbstring]
mbstring.internal_encoding = "UTF-8"
mbstring.language = "Japanese"

コマンドで正常に動くか確認

ターミナルで以下のコマンドを実行してください

docker compose up -d

正常にコンテナが動いているか確認してください

docker compose ps

app コンテナが動いている表示があれば OK です。

db コンテナを作成する

docker-compose.yml に追記してください

  db:
    container_name: db
    build:
      dockerfile: "./docker/db/Dockerfile"
    ports:
      - 3306:3306
    environment:
      - MYSQL_DATABASE=${DB_NAME:-laravel-docker}
      - MYSQL_USER=${DB_USER:-user}
      - MYSQL_PASSWORD=${DB_PASS:-password}
      - MYSQL_ROOT_PASSWORD=${DB_PASS:-password}
    volumes:
      - "./docker/db/data:/var/lib/mysql"

docker/db/Dockerfile を作成し、コードを記述

# ベースイメージの指定
FROM mysql:8.4.0

# 作成した設定ファイルをコンテナ内にコピー
COPY ./docker/db/my.conf /etc/my.conf

docker/db/my.conf を作成し、コードを記述

[mysqld]
character-set-server=utf8mb4
[client]
default-character-set=utf8mb4

docker/db/data/という空のフォルダを作成してください

さきほどの構成のとおり、フォルダを作成してください。

コマンドを実行

ターミナルで以下のコマンドを実行してください

docker compose up -d

正常にコンテナが動いているか確認する

docker compose ps

db コンテナが動いている表示があれば OK です。

Laravel プロジェクトをインストールする

うまくいくと、コマンド2回です。

docker compose exec app bash

このコマンドで app コンテナに入ります。

コンテナに入ったら、

composer create-project laravel/laravel:^11.0 .

というコマンドでインストールできます。

エラーが発生しなければ完了です。以下の URL にブラウザでアクセス。

http://localhost:8900/

Laravel の画面が表示されれば環境構築の完了です。

おめでとうございます。

laravel top

データベースの中身を確認したいとき

開発中、データベースの中身をいちいち SQL のコマンドを打って確認するのも大変です。

なので、開発中データベースの中身を確認する方法は言語によって色々ありますが、PHP の場合、

phpMyAdmin を導入するのが便利です。

docker-compose.yml に書くだけなのでとても簡単です。

phpMyAdmin を Docker 環境の Laravel プロジェクトに追加する方法

vite でエラーが発生した時(CSS を読み込んでくれないなど)

このセクションは、続編で vite のエラーが出たため、リライトにより追記しています。

動画では、docker-compose.yml と docker/app/Dockerfile の記述が少し違いますが、記事では修正しました。

vite.config.js に追記します。

import { defineConfig } from "vite"
import laravel from "laravel-vite-plugin"
import vue from "@vitejs/plugin-vue"

export default defineConfig({
  plugins: [
    laravel({
      input: "resources/js/app.js",
      ssr: "resources/js/ssr.js",
      refresh: true,
    }),
    vue({
      template: {
        transformAssetUrls: {
          base: null,
          includeAbsolute: false,
        },
      },
    }),
  ],
  //serverのところを追記
  server: {
    host: true,
    hmr: {
      host: "localhost",
    },
  },
})

まとめ

以上で、Docker で Laravel11 の環境構築が完了です。