👻

Laravel9をDockerで導入してみよう!

2023/08/26に公開

4件

はじめに

この記事では「LaravelをDockerで簡単に構築すること」を目指します。
Dockerを使って少ない労力で環境構築できるようになりたい方のための記事です。

記事の改訂について

Laravelの環境設定に関する詳細な解説とテストページの作成は下記の記事に移転しました。
「LaravelをDockerで簡単に構築すること」の趣旨に反すると判断したからです。
ご理解のほど宜しくお願い致します。

前提条件

この記事では以下の知識を持つことを前提にしています。

HTML&CSS, PHPをある程度は理解している
Linuxコマンドに触れたことがある

これらについては詳細に解説することはありませんのでご承知ください。

環境構築の目標

環境構築の目標は「Dockerによる仮想環境で、Laravelを使用できるようにする」ことです。
具体的には以下の構成で環境構築をします。

【ディレクトリ構成】

laravel9-build-template（ルートディレクトリ）※ 任意の名前でOK
├── docker-compose.yml
├── docker 
│   ├── php 
│   │   ├── Dockerfile 
│   │   └── php.ini 
│   └── nginx 
│       └── default.conf 
├── phpMyAdmin
└── src 
    └──  Laravel9TestProject（Laravelのプロジェクトディレクトリ）※ 任意の名前でOK

Laravelとフレームワーク

Laravelとは

Laravel（ララベル）とは、PHPのフレームワークです。

手軽で扱いやすく、代表的なPHPフレームワークの1つとして認識されています。PHPフレームワークのSymphony（シンフォニー）を基に開発されたため、これまでのタイプに慣れている方でも比較的扱いやすい仕様となっています。

PHPフレームワークの中では、フレームワークサイズ・学習コストの両面で中間的な立ち位置にあるため、「ちょうど良い」と評されています。

フレームワークとは

フレームワークとは、アプリケーション開発の際に土台となるソフトウェアのことです。

アプリケーションの枠組み・骨組み・構造部になるため、一般的にはフレームワーク内に必要な機能を追加しながら開発を進めます。Webアプリケーションフレームワークやユーティリティ系フレームワークなど、用途に応じていくつかの種類が存在しています。さらに、高い汎用性・充実した機能性・限定的な機能で軽量など様々なタイプがあります。

Laravelの特徴

Laravelは下記の11個の特徴を持ったフレームワークです。

世界で最も人気のPHPフレームワーク
Symphony（シンフォニー）を土台に作成されている
MVCモデルを採用している
機能やプラグインの開発が盛んである
学習コストが中程度で教材が豊富で学習がしやすい
Composerでパッケージ管理できる
拡張性と自由度が高い
データベースの操作が容易である
コマンドツールによって設定や更新が簡単である
バリデーションチェックを自動でやってくれる
Viewに軽量なテンプレートが使われている

これらの特徴により愛され人気を得ているフレームワークなのです。
より詳しく特徴を知りたい方は下記のサイトをご覧ください。
とても分かりやすく易く参考になります。

MVCモデルとは

Laravel で採用されている MVCモデル を確認しておきましょう。

MVCモデル とは、プログラムを役割ごとにModel（モデル）・View（ビュー）・Controller（コントローラー）の3つに分けて管理するソフトウェア設計モデルのことです。

Model（モデル）とは
システム内部のビジネスロジックを担当する部分です。

DBとデータをやり取りしたり、データの登録・更新・削除などの処理を行います。

DBから取得したデータや処理の結果はControllerに送ります。

View（ビュー）とは
表示や入出力などのユーザーが実際に見る画面（UI）を担当する部分です。

リクエストデータをControllerに送ったり、Controllerからレスポンスデータを受け取って画面に表示したりします。

Controller（コントローラー）とは
ユーザーの入力に基づいてモデルとビューを制御（橋渡し）する役目を担う部分です。

ユーザーが入力した情報に基づいて、モデルへデータを取り出す指示を、ビューにはモデルで取り出したデータを元に画面を表示する指示を出します。

詳しく知りたい方は下記のサイトが分かり易くておすすめです。

Laravelを導入する

さっそくLaravelを導入していきましょう！下記の手順を実施してください。

ルートディレクトリを作成する

任意のディレクトリに「laravel9-build-template」を作成します。

Terminal

$ mkdir laravel9-build-template
~laravel9-build-template $ cd laravel9-build-template

docker-compose.ymlファイルを作成して編集する

docker-compose.yml は Docker Compose を利用するために使用するYMLファイルです。

Terminal

$ touch docker-compose.yml

docker-compose.yml の記述内容

docker-compose.yml

version: '3'
services:
  db:
    image: mysql:5.7.36
    container_name: "mysql_test"
    environment:
        MYSQL_ROOT_PASSWORD: root
        MYSQL_DATABASE: mysql_test_db
        MYSQL_USER: admin
        MYSQL_PASSWORD: secret
        TZ: 'Asia/Tokyo'
    # ポートフォワードの指定（ホスト側ポート：コンテナ側ポート）
    ports:
        - 3306:3306
    # コマンドの指定
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    # 名前付きボリュームを設定する（名前付きボリューム:コンテナ側ボリュームの場所）
    volumes:
      - db_data_test:/var/lib/mysql
      - db_my.cnf_test:/etc/mysql/conf.d/my.cnf
      - db_sql_test:/docker-entrypoint-initdb.d

  php:
    build: ./docker/php
    container_name: "php-fpm"
    # ボリュームを設定する（ホスト側ディレクトリ:コンテナ側ボリュームの場所）
    volumes:
      - ./src:/var/www

  nginx:
    image: nginx:latest
    container_name: "nginx_test"
    # ポートフォワードの指定（ホスト側ポート：コンテナ側ポート）
    ports:
      - 80:80
    # ボリュームを設定する（ホスト側ディレクトリ:コンテナ側ボリュームの場所）
    volumes:
      - ./src:/var/www
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
    # サービスの依存関係を指定（nginxをphpに依存させる）
    depends_on:
      - php

  phpmyadmin:
    image: phpmyadmin/phpmyadmin:latest
    container_name: "phpmyadmin_test"
    environment:
      - PMA_ARBITRARY=1 # サーバ設定：サーバーをローカル以外も指定
      - PMA_HOST=db # ホスト設定：dbを指定
      - PMA_USER=admin # 初期ユーザー設定：adminを指定
      - PMA_PASSWORD=secret # 初期PW設定：secretを指定
    # db（サービス名）とのリンクを設定する
    links:
      - db
    # ポートフォワードの指定（ホスト側ポート：コンテナ側ポート）
    ports:
      - 8080:80
    # ボリュームを設定する（ホスト側ディレクトリ:コンテナ側ボリュームの場所）
    volumes:
      - ./phpmyadmin/sessions:/sessions

  node:
    image: node:14.18-alpine
    container_name: "node14.18-alpine"
    # コンテナ内の標準出力とホストの出力を設定：trueを指定
    tty: true
    # ボリュームを設定する（ホスト側ディレクトリ:コンテナ側ボリュームの場所）
    volumes:
      - ./src:/var/www
    # コンテナ起動後のカレントディレクトリを設定
    working_dir: /var/www

# サービスレベルで名前付きボリュームを命名する
volumes:
  db_data_test:
  db_my.cnf_test:
  db_sql_test:

ルートディレクトリ直下に ¥docker ¥src を作成する

Terminal

~laravel9-build-template $ mkdir docker && mkdir src

¥docker 直下に ¥php ¥nginx を作成する

Terminal

~laravel9-build-template $ cd docker
~docker$ mkdir php && mkdir nginx

¥php 直下に Dockerfile php.ini を作成して編集する

Terminal

~docker $ cd php
~php $ touch Dockerfile && touch php.ini

Dockerfile の記述内容

Dockerfileとは
Dockerfileは、Dockerコンテナをビルドするための指示を含むテキストファイルです。

Dockerfileを使用することで、特定の環境でアプリケーションを実行するために必要な手順を自動化することができます。

Dockerfileは、コンテナ内にどのようなファイルや設定を配置するか、どのベースイメージを使用するか、どのコマンドを実行するかなど、コンテナの構築に関する情報を提供します。

Dockerfile

# Dockerimage の指定
FROM php:8.0-fpm
COPY php.ini /usr/local/etc/php/

# Package & Library install
RUN apt-get update \
    && apt-get install -y zlib1g-dev mariadb-client vim libzip-dev \
    && docker-php-ext-install zip pdo_mysql

# Composer install
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

ENV COMPOSER_ALLOW_SUPERUSER 1
ENV COMPOSER_HOME /composer
ENV PATH $PATH:/composer/vendor/bin

# WorkDir Path setting
WORKDIR /var/www

# Laravel Package install
RUN composer global require "laravel/installer"

php.ini の記述内容

php.iniとは
php.ini は、PHPの設定ファイルであり、PHPの動作や機能をカスタマイズするための設定を含むファイルです。PHPの挙動を細かく制御するためには php.ini ファイルを使用します。

php.ini

; 日付設定
[Date]
date.timezone = "Asia/Tokyo"
; 文字＆言語設定
[mbstring]
mbstring.internal_encoding = "UTF-8"
mbstring.language = "Japanese"

¥nginx 直下に default.conf を作成して編集する

Terminal

~php $ cd ..
~docker $ cd nginx && touch default.conf

default.conf の記述内容

default.conf

server {
    listen 80;
    index index.php index.html;
    root /var/www/LaravelTestProject/public;

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

    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;
    }
}

default.conf の解説

default.conf は、Nginx（エンジンエックス）ウェブサーバーソフトウェアの設定ファイルの1つです。Nginxは、さまざまなウェブサーバー関連の機能を提供するためのソフトウェアです。

default.conf

server {
    # nginx側のポート番号を指定（ymlのnginxのコンテナ側ポートと同じにする）
    listen 80;

    # indexファイルのファイル名と形式を指定（index.php, index.htmlを指定）
    index index.php index.html;

    # サーバー側のルートPathを指定（ymlのphpのvolumesのtopPage位置と同じにする）
    root /var/www/LaravelTestProject/public;

    # locationディレクティブ：HTTPリクエストパスに応じたコンテキストを定義する
    # ここではlocationディレクティブのマッチングを行います
    location / {
        # try_files：左から指定した順番で URL の確認および転送を行う指示を出せる項目
        # ( 1 ) $url → URL のパスにファイルがあるか 
        # ( 2 ) $uri/ → ( 1 ) が存在しなかった場合に、URL のパスにディレクトリがあるか 
        # ( 3 ) /index.php … → ( 1 ) ( 2 ) 共に存在しなかった場合、指定したロケーションに行く
        try_files $uri $uri/ /index.php?$query_string;
    }

    # locationディレクティブ： 「.php 」拡張子のファイルを指定された際に実行した結果に応じたコンテキストをで定義する
    # fastcgi_passの 'php'部分 は、docker-compose.ymlの phpサービス名 と同じにすること（'php-fpm'などの場合も多い）
    # それ以外は下記のデフォルトのままでOKです
    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;
    }
}

サーバー側のルートPathを指定

この部分をLaravelのプロジェクト名に書き替えないとエラーになります。
あらかじめLaravelのプロジェクト名は決めておきましょう。
今回は「LaravelTestProject」をPJ名にしています。

root /var/www/<Laravelのプロジェクト名>/public;

Docker を起動してコンテナを作る

Terminal

~nginx $ cd .. && cd ..
~laravel9-build-template $ docker-compose up -d

コンテナにログインする(シェル内でコンテナ操作できるようになります)

Terminal

~laravel9-build-template $ docker-compose exec php bash

Laravelをインストールする

今回は Composer を使用してインストールしています。

Terminal

root@~/www# composer create-project "laravel/laravel=9.*" LaravelTestProject

それぞれのLaravelのインストール方法
【最新版】

Terminal

root@~/www# laravel new <Laravelのプロジェクト名>

【バージョン指定】

Terminal

root@~/www# composer create-project "laravel/laravel=9.*" <Laravelのプロジェクト名>

Composerのオートロード設定を変更する

Laravel9以降はモデルのディレクトリ構成がVersion8未満と異なっています。
下記のようにオートロード設定を追加してください。

composer.json

"autoload": {
    "psr-4": {
        "App\\": "app/",
        "App\\Models\\": "app/Models/",
        [中略]
    }
},

インストールの確認をする

Terminal

root@~/www# cd LaravelTestProject
root@~LaravelTestProject # php artisan --version
Laravel Framework 9.52.15
# Composerのオートロードを再実行しておく
root@~LaravelTestProject # composer dump-autoload

ブラウザでLaravelの表示を確認する

ブラウザに http://localhost/ でアクセスして表示されればOKです。

念の為に権限を与える（「12」でエラーが出た場合の対応などのため）

Terminal

# PermissionDeniedエラーの対処方法
root@~LaravelTestProject # chown ./www-data/storage -R

.env と .env.example の環境設定をする

ここで docker-compose に合わせて .env の設定を書き換えておきます。

.env.example のDBの設定を下記のように書き換えてください。

.env.example（書き換え箇所）

DB_CONNECTION=mysql
DB_HOST=db
DB_PORT=3306
DB_DATABASE=mysql_test_db
DB_USERNAME=admin
DB_PASSWORD=secret

次に .env.example を .env にコピーします。

Terminal

# .env.example を .env にコピー
root@~LaravelReactProject # cp .env.example .env
# キージェネレートする
root@~LaravelReactProject # php artisan key:generate

.env.example の全体コード

APP_NAME=Laravel
APP_ENV=local
APP_KEY=
APP_DEBUG=true
APP_URL=http://localhost

LOG_CHANNEL=stack
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug

DB_CONNECTION=mysql
DB_HOST=db
DB_PORT=3306
DB_DATABASE=mysql_test_db
DB_USERNAME=admin
DB_PASSWORD=secret

BROADCAST_DRIVER=log
CACHE_DRIVER=file
FILESYSTEM_DISK=local
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

MEMCACHED_HOST=127.0.0.1

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=smtp
MAIL_HOST=mailpit
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS="hello@example.com"
MAIL_FROM_NAME="${APP_NAME}"

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
AWS_USE_PATH_STYLE_ENDPOINT=false

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_HOST=
PUSHER_PORT=443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=mt1

VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

超重要

最後に .env と .env.example について触れておきます。

Laravelでは、非常に重要な .env ファイルは Githib などで共有できないようになっています。これは .env がシステムの根幹に関わる環境設定ファイルだからです。そのため .gitignore で .env が除外指定されています。そして除外されているべきものでもあります。

しかし、環境設定ファイルを雛形なしに作るのは大変です。そこで登場するのが .env.example です。.env.example ならば除外されることはありません。例えば、プライベートリポジトリなどセキュリティの高い状態で .env.example（環境情報の値も記述されているもの） 共有して差し替えていくのが開発現場でのセオリーです。

もっとセキュリティを高める場合は .env.example は雛形に徹して環境情報の値を安全に共有して書き換えていくことになります。

ブラウザで表示を確認する

【Laravelのウェルカムページ】
ブラウザに http://localhost/ でアクセスして表示されればOKです。

【phpMyAdminのTOPページ】
ブラウザに http://localhost:8080/ でアクセスして表示されればOKです。
phpMyAdmin が表示されているなら MySQL（DB）も phpMyAdmin 問題なく稼働しています。

コンテナからログアウトする

Terminal

root@~LaravelTestProject # exit

これで「Laravelを導入する」は完了です。

実際にLaravelを使ってアプリを作成してみたい方のためのWEB書籍も執筆しています。
ご興味のある方は下記を実施してみてください。

後始末をする

今回で使ったDockerコンテナなど学習用のものは普段は必要ないので消してしまいましょう。
Dockerを使っているので必要になったら、またビルド（構築）すれば良いだけです。
どんなコードを書いていたかを確認したいのであれば本記事を確認すれば済みます。

サービスに関連するコンテナ, イメージ, ボリュームを全て削除する

Terminal

~laravel9-build-template $ docker-compose down -v --rmi all

解説 - docker-compose down -v --rmi all

このコマンドではサービスに関連する下記の内容を削除してくれます。

docker-compose down → コンテナ（とネットワーク）の削除
-vオプション → ボリュームの削除
--rmi all → イメージの削除

個別に消したい場合には下記のようにします。

Terminal

# コンテナ（とネットワーク）削除
~laravel9-build-template $ docker-compose down
# コンテナとボリュームの削除
~laravel9-build-template $ docker-compose down -v
# コンテナとイメージの削除
~laravel9-build-template $ docker-compose down --rmi all

サービスに関連するものだけを削除するのでこの後に紹介するコマンドより安全です。

サービスに限定しないで一括で消す場合

Terminal

# コンテナを停止する
~laravel9-build-template $ docker-compose stop
# コンテナの一括削除
~laravel9-build-template $ docker rm $(docker ps -aq)
# ネットワークの一括削除
~laravel9-build-template $ docker network prune
# イメージの一括削除
~laravel9-build-template $ docker rmi $(docker images -q)
# ボリュームの削除
~laravel9-build-template $ docker volume prune

但し、このコマンドはサービスに限定せずに全ての現在実行中および停止中の全てのコンテナ, ネットワーク, イメージ, ボリュームを一括削除します。そのため、実行する際には慎重に行なってください。例えば、何が起きても困らない自分の学習用PC端末などですべて消したい場合で使用します。

個別に消したい場合

Terminal

# コンテナを停止する
~laravel9-build-template $ docker-compose stop

# コンテナを確認する
~laravel9-build-template $ docker ps -a
# 特定のコンテナの削除
~laravel9-build-template $ docker rm コンテナID (CONTAINER ID)

# ネットワークを確認する
~laravel9-build-template $ docker network ls
# 特定のネットワークの削除
~laravel9-build-template $ docker network rm (NETWORK NAME)

# イメージを確認する
~laravel9-build-template $ docker images
# 特定のイメージの削除
~laravel9-build-template $ docker rmi イメージID (IMAGE ID)

# ボリュームを確認する
~laravel9-build-template $ docker images
docker volume ls
# 特定のボリュームの削除
~laravel9-build-template $ docker volume rm (VOLUME NAME)

任意でホストPCの今回で使用したフォルダとファイルを消す

ここでの操作ついては個々人の判断にお任せします。
本記事をみれば良いと思ってる人はフォルダとファイルも消してしまいましょう。

Terminal

# 親ディレクトリに移動
~laravel9-build-template $ cd ..
~親ディレクトリ名 $ rm -rf laravel9-build-template

これで「後始末をする」は完了です。

まとめ

これで全ての作業が完了しました。お疲れ様でした。
ここまでの作業で「DockerでLaravelを導入する方法」を概ね理解できたのではないでしょうか。

環境構築は手間が掛かるものですが Docker を使えばコマンドを何度か実行すれば環境構築できるようになります。本当にしたい作業に集中するためにも手早く済ませたいものですよね。

本記事がその一助になればと思っております。

GitHubで編集を提案

Discussion

Yutacchi

こんにちは。記事が大変参考になっていてとても感謝してます。
このページの記事を実行していますが、気になることがあります。
ViteをMixに変更しましたが、その後に
どこかの手順でvite.config.jsが作られたり、
package.jsonに
"@vitejs/plugin-react": "^2.2.0",
の記述が追加されたりするのですが、
これはこれであっているのでしょうか？
お手数おかけします。

eguchi244

この度はご利用ありがとうございます。
この記事には「ViteをMixに変更」する手順はありません。
そのため、学習中に下記の記事を実施したと仮定してお答えします。

どこかの手順でvite.config.jsが作られたり、
package.jsonに
"@vitejs/plugin-react": "^2.2.0",
の記述が追加されたりするのですが、
これはこれであっているのでしょうか？

上記は何かの拍子にご指摘の部分が復活することはあります。
その時には手順に記載されてる方法でもう一回消してもらえればと思います。

eguchi244

念の為に具体的な手順も記載しておきます。
上記の状態には下記を実施してみてください。

# nodeコンテナにログインする
root@~# docker-compose exec node /bin/sh
# プロジェクトディレクトリに移動する
root@~# cd <プロジェクトディレクトリ名>
# Vite削除コマンドを実行する
root@~# npm remove vite
root@~# npm remove laravel-vite-plugin
# Vite設定ファイル（vite.config.js）を削除する
root@~# rm -rf vite.config.js
root@~# exit

Yutacchi

親切なご回答感謝いたします。
なるほど、特に気にせず消せばいいのですね。
ありがとうございました！