Docker による環境構築

ポートフォリオ制作、掲示板と同様に、 Docker を用いて開発環境を構築していきます。

Laravel の環境を作成する

ポートフォリオ制作や、掲示板アプリの制作では、一からファイルを作成していましたが、To Do アプリ開発では Laravel フレームワークを使用し、環境を一気に用意します。その後、今回のアプリ開発に合うように設定や一部のファイルを修正し環境を整えていきます。

プロジェクトを作成するディレクトリに移動

まず、 "プロジェクトのルートディレクトリ" を作成するディレクトリに移動します。これまでの実践編に基づくと、以下のような場所でした。

WIN

WSL: ~/github/{username}

（以降の例に合わせると /home/ubuntu/github/ts-user となります。）

MAC

~/github/{username}

（以降の例に合わせると /Users/tsuser/github/ts-user となります。）

適宜 pwd コマンドでカレントディレクトリを確認しながら、意図したディレクトリであるか確認しておきましょう。

例

Laravel プロジェクトの作成

上記のディレクトリで以下のコマンドを入力します。以下のコマンドを実行すると、カレントディレクトリに todo というディレクトリができ、その中に Laravel のプロジェクトファイルが大量に生成されます。（todo の部分はご自身の状況に合わせて変更していただいても問題ありません。）

WIN

WSL の方は以下のコマンドを実行してください。

$ docker run --rm -it -v "$PWD":/app -u 1000:1000 composer create-project laravel/laravel todo

ls とすると todo というディレクトリができていることを確認できるはずです。

MAC

Mac の方は以下のコマンドを実行してください。

$ docker run --rm -it -v "$PWD":/app composer create-project laravel/laravel todo

Q. このコマンドは何をしているのですか？

Composer で Laravel パッケージをダウンロード及び展開しています。 Laravel のリポジトリを作成するには、 PHP の様々なパッケージを管理している Composer (opens new window) というパッケージマネージャーを使用します。Composer が使用できる環境がほしいので、 Docker で構築します。"Composer がインストール済みの環境 (Composer Image (opens new window))" を Docker Hub (opens new window) からダウンロード（Pull）してきています。docker run コマンドでコンテナ起動となりますが、composer と書かれている部分がイメージ名で、手元にイメージがない場合は自動で Pull されます。その上で、(composer) create-project laravel/laravel todo というコマンドを実行しています。-v "$PWD":/app で、コンテナ内で Laravel が作成されるファイルとホストコンピュータ（ WSL や Mac ）のカレントディレクトリを共有しているため、コンテナ内で作成されたファイルは、ホストコンピュータ側でも扱うことができます。 その後、このコマンドで実行が完了すると、プロセスが終了しコンテナも停止します。 --rm オプションを指定しているため、停止後はコンテナが自動で削除されます。 必要なタイミングのみ環境を用意し、必要なファイル(Laravel プロジェクトファイル)を生成後、コンテナを削除するという動作をこのコマンドで実現しています。

Composer がインストールされているコンピュータであれば、以下のコマンドを入力しても同じことができます。

$ composer create-project laravel/laravel todo

Q. Windows (WSL) 向けのコマンドで "-u 1000:1000" オプションがあるのはなぜですか？

コンテナ内のユーザーとグループを、ホストコンピュータ内のユーザーレベルに合わせるためです。-u 1000:1000 というオプションは、コンテナ内のユーザー ID 及びグループ ID を 1000 というユーザーで実行する指定となります。 WSL で初めて作成するユーザー（開発環境構築編の WSL 環境 (Ubuntu) のインストール時に作成した ubuntu という名のユーザーのこと。）のユーザー ID は 1000 です。-u 1000:1000 というのは、この ID に合わせているということになります。（{ユーザー}:{グループ}）

このコマンドはコンテナ内の /app ディレクトリ、つまり -v オプションでバインドマウントしているホストコンピュータのディレクトリにファイルを生成します。 Docker のコンテナ内のユーザーはデフォルトで root です。もしデフォルトの状態でコンテナ内部からファイルを作成すると、ディレクトリが共有されている WSL 環境 (Ubuntu) としては root ユーザーでファイルが作成されたと理解します。その後、WSL 側から操作するとき（例えば Visual Studio Code を開くと） ユーザーレベルでファイルを操作するため、ファイル変更や削除などの操作が権限不足となり実行できなくなります。もしそうなった場合は sudo や chown コマンド等で対応する方法もありますが、Laravel が生成したファイルは数が多いため、一度ファイルを削除 (sudo rm -rf todo 等) してもう一度やり直してください。

なお、id コマンドを使用すると、ユーザーやグループが何番になっているかわかります。また ls -l 等実行すると、ファイルオーナーがどのユーザーになっているかわかります。（赤線左の ubuntu がユーザー、右の ubuntu がグループです。）

※ Mac はこのあたりのユーザーは適宜調整されます。逆に -u 1000:1000 オプションをつけると思わぬ結果となる場合がありますのでご注意ください。

以降の説明で、-u 1000:1000 があったりなかったりする場合があります。 自分でビルドするイメージの場合（Dockerfile を作成しビルドする場合）、適切にユーザーを追加 (opens new window)すればオプションを不要にできます。また、コンテナ内とバインドマウントしていない場合や、バインドマウントしたディレクトリに書き込まない場合等は問題になることはありませんので不要です。オプションの有無は各所確認していますので、学習サイトでは、記載されたコマンド例の通り入力していただくようお願いいたします。

プロジェクトのルートディレクトリ（例: todo）に移動します。

コマンド例

$ cd todo

code . コマンドを使用して Visual Studio Code で開きます。

$ code .

Visual Studio Code で開いたイメージ

Laravel プロジェクト内でも、PHP のパッケージ管理システムである Composer を利用しています。PHP で WEB アプリを作成するときには、大抵の場合フレームワークや様々なライブラリを一緒に使います。例えば、ライブラリ A を使いたい場合に同時にライブラリ B もインストールする必要があるとき、ライブラリ A はライブラリ B に依存していると言えます。Composer はそのプロジェクトが必要とするライブラリやパッケージを管理し、ライブラリ A の使用を宣言するだけで自動的にライブラリ B がインストールされるといった風に、依存関係を自動で解決してくます。こうすることで開発者の負担を大きく軽減してくれることが最大のメリットです。Composer によって管理されているパッケージの種類やバージョンは composer.json に記述され、追加したライブラリは vendor フォルダに配置されます。

Git リポジトリ 及び GitHub リポジトリ作成

以下のコマンドを入力し、ルートディレクトリを Git のリポジトリにします。

$ git init
$ git add .
$ git commit -m "Initial commit"
$ git branch -M main

上記は、ローカルリポジトリのセットアップです。リモートリポジトリ(GitHub)にも追加しておくと良いです。 ポートフォリオ制作 - 素材とプロジェクトの準備 # GitHub リポジトリの作成 を参考に To Do アプリ用の GitHub リポジトリを作成し、Push しておきましょう。リポジトリ名は例えば web-todo-app 等にしておくと良いです。

コマンド例

$ git remote add origin git@github.com:{アカウント名}/web-todo-app.git
$ git push -u origin main

また適宜、GitHub Desktop からも操作できるようにしておくと便利です。

Docker で起動できるようにする

以下の環境を Docker コンテナで起動できるように、定義していきます。

• PHP (Composer と MySQL PDO を含める)
• phpMyAdmin
• MySQL

プロジェクトのルートに dokcer ディレクトリを作成し、その中に Dockerfile を作成します。その後、以下の内容を記述してください。

~~/docker/Dockerfile

FROM php:8.1.2-apache
RUN apt-get update
RUN docker-php-ext-install pdo_mysql

# Install Composer
RUN php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
RUN php composer-setup.php --install-dir=/usr/local/bin --filename=composer
RUN php -r "unlink('composer-setup.php');"

RUN apt-get install -y unzip

# Add user
# https://qiita.com/Spritaro/items/602118d946a4383bd2bb
ARG USERNAME=user
ARG GROUPNAME=user
ARG UID=1000
ARG GID=1000
ARG PASSWORD=user
RUN groupadd -g $GID $GROUPNAME && \
  useradd -m -s /bin/bash -u $UID -g $GID -G sudo $USERNAME && \
  echo $USERNAME:$PASSWORD | chpasswd && \
  echo "$USERNAME   ALL=(ALL) NOPASSWD:ALL" >> /etc/sudoers
USER $USERNAME

WORKDIR /home/user/app

プロジェクトのルートに docker-compose.yml を作成し、以下の内容を記述してください。

~~/docker-compose.yml

version: '3.9'
services:
  php:
    image: php_todo_app
    working_dir: /home/user/app
    build:
      context: .
      dockerfile: ./docker/Dockerfile
    command: /bin/sh
    tty: true
    stdin_open: true
    stop_signal: SIGKILL
    environment:
      DB_CONNECTION: mysql
      DB_HOST: db
      DB_PORT: 3306
      DB_DATABASE: laravel
      DB_USERNAME: user
      DB_PASSWORD: password123456
    volumes:
      - ./:/home/user/app
    ports:
      - '${PORT:-8000}:${PORT:-8000}'
  db:
    image: mysql:8.0
    restart: always
    command: --default-authentication-plugin=mysql_native_password --collation-server=utf8mb4_general_ci
    environment:
      MYSQL_ROOT_PASSWORD: password123456
      MYSQL_DATABASE: laravel
      MYSQL_USER: user
      MYSQL_PASSWORD: password123456
    volumes:
      - mysqldata:/var/lib/mysql
  myadmin:
    image: phpmyadmin/phpmyadmin:5.1.1
    environment:
      PMA_ARBITRARY: 1
      PMA_HOST: db
      PMA_PORT: 3306
      PMA_USER: root
      PMA_PASSWORD: password123456
    depends_on:
      - db
    ports:
      - ${MY_ADMIN_PORT:-8081}:80
volumes:
  mysqldata:

作成後の状態（イメージ）

起動確認

以下のコマンドで Dokcer コンテナの起動を確認します。

$ docker compose up -d

上記コマンド実行後は、例えば以下のように表示されます。

$ docker compose up -d
[+] Running 4/4
 ⠿ Network todo_default      Created                          0.1s
 ⠿ Container todo-php-1      Started                          3.0s
 ⠿ Container todo-db-1       Started                          3.0s
 ⠿ Container todo-myadmin-1  Started                          4.4s

以下のコマンドで PHP コンテナに入れることを確認します。

$ docker compose exec php bash

コンテナ内に入ったら php -v コマンドを実行して PHP のバージョンが表示される（PHP が動作する環境である）ことを確認しましょう。

$$ php -v

コマンド実行例

コマンドを実行する場所に注意

これまでは、コマンドは WSL や Mac のホストコンピュータから入力していましたが、To Do アプリ編ではそれに加え、 Docker コンテナ内に入り、コンテナ内からコマンドを実行することがあります。入力をするウィンドウ自体は同じですが、実行環境は全く異なりますのでご注意ください。学習サイトでは、実行場所がわかるように、$ と $$ を使用して表記します。

例えば以下のコマンドはホストコンピュータで入力することを示します。

$ ls
$ docker compose up -d
$ docker compose down

そして、以下のコマンドはコンテナ内で入力することを示します。

$$ ls
$$ php -v
$$ php artisan serve --host 0.0.0.0

コンテナ内で入力するには、まずコンテナに入る必要があります。例えば To Do アプリ開発の docker-compose.yml で定義している PHP のコンテナに入る場合は、以下のコマンドを入力するとコンテナ内のシェルに入ることができます。

$ docker compose exec php bash

学習サイトを順番に進めているうちは、トラブルは発生しづらいですが、中断、途中から開始、試行錯誤する際には順番が前後するために、必要な手順が抜けている可能性があります。 コマンド操作をする場合は、今操作している場所がどちらかというのを理解しながら、コマンドを入力するようにしましょう。

※ 1 はホストコンピュータでコマンドを実行しています。 2 はコンテナ内でコマンドを実行しています。コンテナ内から抜け出す場合は exit コマンドを使用します。

※ ここまで確認できたら、適宜 Git にコミットしておきましょう。

DB 接続設定

まず、ブラウザで http://localhost:8081 (opens new window) へアクセスし、phpMyAdmin からデータベースに接続できることを確認してください。

次に Visual Studio Code に戻り .env ファイルを開きます。.env にはデータベースへ接続するための情報を記載します。以下のように 4 行を修正してください。

~~/.env

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:aUj7/+goyIINaTTw9+U0ls+UXlK8EvlXB1ndA8fV0LI= (人により異なります)
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=laravel
DB_USERNAME=user
DB_PASSWORD=password123456

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

MEMCACHED_HOST=127.0.0.1
...

次に、以下のコマンドを入力します。実行後、実行結果に "Migration created successfully." と表示されていれば成功です。 ※コンテナ内で実行します。PHP コンテナ内ではない場合、 docker compose exec php bash コマンドを使用してから以下のコマンドを入力してください。

$$ php artisan session:table

コマンド例

上記コマンドは、セッション管理のために必要となるテーブルを作成するための構成情報を記載したファイル（マイグレーションファイル）を作成します。マイグレーションについての説明は、後のページ（ Todo に関連するファイルを作成する#生成されたマイグレーションファイルを修正・実行 ）で説明しています。

上記コマンドを実行することで、新規ファイル ~~/database/migrations/2022_月_日_時刻_create_sessions_table.php が作成されているはずです。

Q. このコマンドはなんですか？

A. Artisan (アーティザン) とは Laravel が用意しているコマンドラインインターフェイスです。実態は PHP で記載された artisan という名前の実行ファイルを実行しています。 Artisan を利用することでファイルの作成や設定ファイルのキャッシュ、データベースの操作など様々な機能をコマンドによって実行できます。Artisan コンソール 8.x Laravel (opens new window) のページも参照ください。

次に、マイグレーションの実行を行います。これにより、作成されたマイグレーションファイルの定義内容がデータベースへ反映されます。 以下のコマンドを入力してください。

$$ php artisan migrate

• マイグレーション実行が完了している様子

phpMyAdmin でデータベースを見ると、laravel データベースに sessions テーブルが作成されていることが確認できます。

サーバーを起動する

以下のコマンドを実行しサーバーを起動したら、http://localhost:8000 (opens new window) にアクセスします。

$$ php artisan serve --host 0.0.0.0

• ターミナルの表示

• http://localhost:8000 (opens new window) ページ表示

上の画像のようなページが表示されれば完了です。

※ ここまで確認できたら、適宜 Git に Commit ＆ Push しておきましょう。

コマンド例