実務未経験エンジニアがLaravel&ReactでWebアプリケーション開発に挑戦してみた！（その４）
0. 初めに
前回は、Docker Desktopをインストールして、Ubuntu上で使えるようにしました。
今回は、いよいよプロジェクトを作成して、Dockerファイルを使って環境を構築します！
1. Dockerでphp, nginx, MariaDBの環境構築（続き）
作業を始める前に
Dockerは非常に難しいです。
僕も自分でDockerfileを作ってみたのですが、エラーが解決できず、３週間くらいがんばった末、諦めました。／(^o^)＼
そのため、これ以降の作業は以下の
第1回 Laravel10 環境構築メモ（Windows11 + WLS2 + Dockerで構築）
という記事をかなりパクりました！
まあ、それくらい大変な思いをしてこの記事を書いているということです。
あなたにもきっとエラーに悩まされる日々がいづれ訪れると思いますが、苦しんでいるのはあなただけではないということです！（謎の結論）
Linuxコマンドについて
Dockerファイルを作る前に、軽くLinuxコマンドについて話ておきます。
実は、既に何度か使用しています。
今日は、Ubuntu上でLinuxコマンドと呼ばれるコマンドを実行してプロジェクトを作成します。
「やべ、そもそもUbuntuとかLinuxって何だっけ...??」ってなっている方もいるのではないでしょうか？
気持ちはすごい分かります...!!
既に出てきている言葉ですので、忘れたら必ず戻って思い出しましょう！
今の時代はググったり、ChatGPTに聞いたりすれば、すぐに調べられます。
一度理解したことを「何だっけ、それ？」と忘れたまま放置したまま進むと、すぐに分けわかめになりますので、気を付けたいですね。（笑）
簡単にだけ復習すると、LinuxはWindowsなどと同じ、OS（オペレーティングシステム）のことで、Ubuntuは、Linuxを他のOSでも使えるように（厳密には今回はWSL2で下地を作っています）無料で配布しているLinuxディストリビューションの一つでしたね！
Linuxには、コマンドという文字を入力して操作するというCUI（Character User Interface）という特徴があります。
以下に今回使うものをまとめました。必要な時に確認してください（暗記しなくて大丈夫です）！
| コマンド | 操作の説明 |
|---|---|
| mkdir | 新しいディレクトリを作成 |
| cd | ディレクトリを移動 |
| touch | 空のファイルを作成 |
| ls | ディレクトリ・ファイル一覧を確認 |
プロジェクトを作成
では、今回開発するプロジェクトのフォルダを作成します。
ディレクトリの構成は以下の通りです。
したがって、これからこの形を目指して作っていきます！
project-root/
├── docker-config/
│ ├── nginx/
│ │ └── default.conf
│ └── php/
│ ├── Dockerfile
│ └── php.ini
├── src/ ← Laravelのコードはここに
├── docker-compose.yml
└── .env
※「正直、フォルダとかディレクトリとか怪しいな」っていう方は以下の記事を参考にしてみてください。
・「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 ディレクトリ
また、「絶対パス」や「相対パス」の知識も必要なので、同様に怪しい方は以下も併せてチェックしておいてくださると助かります。
・【イラストで簡単理解！】絶対パスと相対パスの書き方
さっそく作ります！例によって、Ubuntuを起動してください。
mkdir（メイクディレクトリ）で、ルートディレクトリ（一番上の根っこの部分）を作りましょう！
$ mkdir project-root
今回は、project-rootという名前にしましたが、これは分かりやすければ何でも構いません。
※今後のために、PC内でプロジェクトのディレクトリを分けたいという方もいらっしゃると思います。
その場合は、project-rootの外にもう一つ何かわかりやすい名前でディレクトリを作成するとよいでしょう。
ちなみに私は、app-lab-reviewというディレクトリを作り、その中にproject-rootを作成しました。
では、cd（チェンジディレクトリ）で今作成したproject-rootの中に移動しましょう！
$ cd project-root
※ちなみに余談ですが、mkdirで作った同名のproject-rootというディレクトリにcdで移動するときは、ディレクトリ名を必ずコピペしましょう。
特にコマンドは一度実行すると取り消したりするのが大変な場合もあるで、エラーやミスを減らす意味でとても重要です。
さて、project-root内に移動できたわけですが、この直下には何が必要でしたっけ？
そうです！docker-config/とsrc/, docker-compose.yml, .envですよね！
最初の二つがディレクトリで、後の二つがファイルです。
ディレクトリに関しては、mkdirで作ればよいのでした！
したがって、
$ mkdir docker-config
それから、
$ mkdir src
をそれぞれ実行してもらえればOKです！
この場合も、ディレクトリ名などは本記事から極力コピペしましょう！
次に残りの二つのファイルを作成します。
ファイルを作成するときは、touch（タッチ）を使用します。
$ touch docker-compose.yml
$ touch .env
それでは、ディレクトリ及びファイルが正しく作成されたかを確認してみましょう。
ls（リスト）を実行すると現在いるディレクトリの中身を見ることができます！
$ ls
実行結果は以下です。
あれ？？.envファイルがない！？作ったはずなのに！もう一度touchで作らないと...!!
落ち着いてください！！（笑）
.envにはパスワードなどのあまり見られたくない情報を書き込むので、隠しファイルなどと呼ばれています。
実は、lsだけだと、隠しファイルを見ることができません。
その場合は、裏技として、lsの後に-Aというオプションを付けてあげると、隠しファイルを含めてすべてのディレクトリ及びファイルを見ることができます。
$ ls -A
結果
確かに正しく作られていますね！
まだ、ディレクトリ名やファイル名が何を表しているのかまでは、さっぱり分からないかもしれませんが、とりあえず作成することができたので喜びを感じましょう！(#^.^#)
あとは、docker-config/配下にnginx/とphp/というディレクトリ、さらにそれぞれにdefault.conf, Dockerfileとphp.iniというファイルが必要です。
よって、以下のコマンドを順に実行していけばよいです。
docker-configに移動。
$ cd docker-config
nginxとphpのディレクトリを作成
$ mkdir nginx
$ mkdir php
nginxに移動
$ cd nginx
default.confを作成
$ touch default.conf
一つ上（/docker-config）へ戻る
$ cd ..
phpに移動
$ cd php
Dockerfileを作成
$ touch Dockerfile
php.iniを作成
$ touch php.ini
何か一つ飛ばしてしまいそうで怖いですね💦
Linuxコマンドには少しずつ慣れてきましたか？
これで目標としていたプロジェクトのディレクトリの作成が完了しました！
しかし、touchしただけではファイルの中身はまだ空っぽなので、これからファイルの中身を書いていく必要があります。
VS Codeをインストール
Ubuntuのコマンドラインのまま直接ファイルの中身を書いていってもよいのですが、テキストエディタを使った方がやりやすいかと思います。
今回は、Microsoft Visual Studio Code（通称VS Code）というMicrosoft社が開発しているメジャーなエディタをインストールします。
「また、何かインストールするのかよ！」と思ったかもしれません。
そうです！インストールばっかりですよ！！（怒）
プログラミング言語はあくまで言語なので、どこに書いても（最悪メモ帳に書いても）問題ありません。しかしながら、エディタを使うと候補を出してくれたり、インデントをそろえてくれたり、間違っているところを警告してくれたり...他にも拡張機能を追加することで自分好みに便利で使いやすくカスタマイズできます。
これを利用しない手はない！
ひょっとしたら、この記事をここまで読んでくれている人の中には、「VS Codeくらい使ったことあるわ！」っていう方が多いのではないかと思いますので、インストールの説明は、かなりさらっとしますね。(^_-)-☆
公式のダウンロードページからダウンロードして、インストールしてください。日本語に設定するとよいかもしれません。
詳しくは以下の記事をご覧ください。
Visual Studio Code のインストール方法
phpのDockerファイルを作成する
お待たせしました。ついにDockerファイルを作成します...!!
まずは、先ほどのディレクトリ・ファイル作成の作業が完了したままの方は、cdでproject-rootまで移動しましょう。
現在位置（mariadb）から二つ上（/project-root）へ戻る
$ cd ../..
もう慣れましたかね？
一応確認ですが、相対パスでは、現在位置を.で、一つ上を..で表します！
では、続いて、VS Codeを開きます！
$ code .
初めての方は、もしかしたらうまく開けないかもしれません。
その場合は、以下の記事を参考にしてみてください。
【VSCode】Macでcodeコマンドを使用可能にする方法
「Macで」とありますが、たぶんLinuxでもいけると思います。
出来なかったらすみません。普通にVS Codeを開いて左上の「ファイル(F)」から開いてもらってもかまいません。
VS Codeが開けたら画面左側の「エクスプローラー」から「docker-config」, 「php」を順番にクリックして、「Dockerfile」をダブルクリックして開きましょう。
開けましたか？この時、もしDocker Desktopを開いていなければ、開いておきましょう。
まだ、何も書いていないので、真っ黒ですね。
さて、ここまでかなりもったいぶってきて大変申し訳ないのですが、以下をコピペしましょう！！！！
先ほど参考にすると言った記事をほぼパクりました。
下手に自分で考えて作るとエラーが起きて、それを直そうとするとまた別のエラーが起きて...の繰り返しで、死にかけましたよ。／(^o^)＼
記事のコード内で書き換えた部分にコメントを付けています。
FROM php:8.2-fpm
EXPOSE 5173
COPY php.ini /usr/local/etc/php/
RUN apt-get update \
&& apt-get install -y zlib1g-dev mariadb-client vim libzip-dev nodejs npm\
&& docker-php-ext-install zip pdo_mysql
RUN pecl install xdebug && docker-php-ext-enable xdebug
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
# 修正箇所
ARG USER_NAME
ARG GROUP_NAME
ARG USER_ID
ARG GROUP_ID
RUN groupadd -g $GROUP_ID $GROUP_NAME
RUN useradd -m -s /bin/bash -u $USER_ID -g $GROUP_ID $USER_NAME
USER $USERNAME
WORKDIR /var/www
RUN composer global require "laravel/installer"
以上！
...だとさすがにひどいので一応多少は解説します。
なお、難しい内容なので、以下の説明はざっくりと雰囲気だけ掴んでもらえれば、細かい部分をすべて完璧に理解しなくても大丈夫です（というか僕が理解できていませんｗ）。
Dockerファイルには、特有な命令文が書かれます。
まず、以下の部分です。
FROM php:8.2-fpm
これは、ベースイメージと呼ばれていて、これから作るイメージの土台となる部分を表しています。
前回の復習ですが、そもそもDockerファイルは、イメージを作成するための設計図だったはずです！
Docker Hubというページの画面上部の検索窓から「php」と検索し、検索結果の一番上を開きます。
アイコンの下のTagsを開いて、少しスクロールして見つかる「php:8.2-fpm」というのをコピペして取ってきています。
phpのバージョンを含む、アプリケーションを実行するための環境が定義されたイメージみたいなものです。
なぜこれを選んだかと言いますと、「Laravelはnginx+PHP-FPMの構成で動かすことが多いから」です（答えになっていない）。
正直詳しいことはよくわかりません！
一応、nginx と PHP-FPM の仕組みをちゃんと理解しながら PHP の実行環境を構築するという記事も目を通したのですが、「ちゃんと理解」できませんでした！
すみません。機会があれば今度まじめに調べてみたいと思います。
次に、以下です。
RUN apt-get update \
&& apt-get install -y zlib1g-dev mariadb-client vim libzip-dev nodejs npm\
&& docker-php-ext-install zip pdo_mysql
RUN pecl install xdebug && docker-php-ext-enable xdebug
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
先ほどのベースイメージの上に追加でいろいろと必要なものをカスタマイズしている感じに思ってもらえればとりあえずはOKだと思います。
また、以下の部分についてですが、
WORKDIR /var/www
先ほど私が、Linuxコマンドでcdをする際に使っていた「現在いるディレクトリ」とか「現在位置」とかって言葉で表されるもので、それのDockerコンテナ版です。
コンテナ側でコマンドを実行するときのディレクトリの場所をあらかじめ指定している感じです。
ホスト側（あなたのPC）のプロジェクトディレクトリとコンテナ側の作業ディレクトリは、ボリュームというものでマウント（接続）されます。
うーん、難しい💦
修正を加えた個所です。
ARG USER_NAME
ARG GROUP_NAME
ARG USER_ID
ARG GROUP_ID
RUN groupadd -g $GROUP_ID $GROUP_NAME
RUN useradd -m -s /bin/bash -u $USER_ID -g $GROUP_ID $USER_NAME
これは、Dockerコンテナ内で作成したファイルの編集権限をホスト側から与える必要があって設定しています。
Dockerコンテナ内で作成したファイルは通常、特別な権限を持つユーザーで動作するらしく、このままだとあなたのPCで編集しているとうまく編集結果を保存できないことがあります。よって、そのファイルの所有者をホスト側（あなたのPC）のユーザーとそろえることによって、あなたのPCからでもファイルの編集がしやすくなるという感じです（多分💦）。
ここで、ひと手間ですが、一度Ubuntに戻っていただいて、（もし違う場所にいたら、cdで~/project-rootに移動してから）以下のコマンドを順番に実行してみてください。
$ id -u $USER
$ id -g $USER
結果
これが、ホスト側のユーザーIDとグループIDなので、これをコピーして、.envファイルに貼ります。
USER_NAME=kanaraki
GROUP_NAME=kanaraki
USER_ID=1000
GROUP_ID=1000
MYSQL_DATABASE=development
MYSQL_ROOT_PASSWORD=secret
MYSQL_USER=admin
MYSQL_PASSWORD=secret
TZ=Asia/Tokyo
これがdocker-compose.yml（この後説明）に渡されて、docker-compose.ymlからDockerfileが読み込んで実行してくれるという流れです。
※IDが違う場合は、コマンド実行結果で出力されたご自身のIDをご記入ください。
その他にも、データベースに必要な設定も.envファイルに書いておきます。
「.envファイルには、機密情報を書くべき」的なことを言ったのにこの記事で世間にさらしてしまっていますwww
かなりざっくりとした説明しかできず、申し訳ございません。
おそらく、初めてDockerを触った方は、何を言っているのかさっぱりかもしれませんが、分からなくても多分大丈夫です！！(≧◇≦)
僕もなかなかうまくいかなくて、途方に暮れる日々を過ごしました...
php.ini
php.iniは、phpの設定ファイルだと思ってください。
これは参考記事のまんまです。
[Date]
date.timezone = "Asia/Tokyo"
[mbstring]
default_charset = "UTF-8"
mbstring.language = "Japanese"
[xdebug]
zend_extension=xdebug
xdebug.mode=debug
xdebug.client_host=host.docker.internal
xdebug.client_port=9003
xdebug.start_with_request=yes
xdebug.idekey = PHPSTORM
docker-compose.ymlについて
docker-compose.yml（拡張子以下は「ヤムル」と読みます）は、複数のコンテナをひとまとまりにして管理するための設定ファイルだと思ってください。
今回は、アプリケーションを開発するために必要なphpのコンテナ以外にも、Webサイトを表示するために必要なnginxのコンテナ、さらにデータを保存・管理するために必要なMariaDBのコンテナも必要です。これらのコンテナをひとまとまりとして管理することで、これら３つのコンテナ同士の連携もスムーズに行うことができます。
詳しくは、以下の動画の42:59「docker-composeの使い方」をご覧いただくと、今回僕がやっていることと近いので、イメージが付きやすいかと思います。
【ゼロから始める】入門者向けDockerの使い方講座【Windows,Mac対応】
今回は、以下をコピペしていただければOKです！
version: '3'
services:
db:
image: mariadb:10.6 # 修正: MariaDBのバージョンを指定
container_name: "mariadb-lab" # 修正: コンテナ名を変更
environment:
MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
MYSQL_DATABASE: ${MYSQL_DATABASE}
MYSQL_USER: ${MYSQL_USER}
MYSQL_PASSWORD: ${MYSQL_PASSWORD}
TZ: ${TZ}
ports:
- 3306:3306
command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
volumes:
- db_data:/var/lib/mysql
- db_my.cnf:/etc/mysql/conf.d/my.cnf
- db_sql:/docker-entrypoint-initdb.d
php:
build:
context: ./docker-config/php
args:
USER_NAME: ${USER_NAME}
GROUP_NAME: ${GROUP_NAME}
USER_ID: ${USER_ID}
GROUP_ID: ${GROUP_ID}
container_name: "php-lab" # 修正: コンテナ名を変更
ports:
- 5173:5173
volumes:
- ./src:/var/www # 修正: XXは要らない？
user: ${USER_NAME} # 修正: .envファイルから取得
nginx:
image: nginx:latest
container_name: "nginx-lab" # 修正: コンテナ名を変更
ports:
- 80:80
tty: true
volumes:
- ./src:/var/www
- ./docker-config/nginx/default.conf:/etc/nginx/conf.d/default.conf
depends_on:
- php
volumes:
db_data:
db_my.cnf:
db_sql:
「container_name」の部分がコンテナ名、「volumes」の部分が先ほど説明したボリュームです。また、「USER_ID」とか「GROUP_ID」は先ほど.envファイルで設定したものです。
「Dockerファイルは、phpのしか作成していないけど、nginxとMariaDBのDockerファイルは作らなくていいの？」と思ったかもしれませんが、docker-compose.yml内の「image:」というところに書いてあるので、必要ないようです（先ほどの動画をよく見るとnginxのDockerfileがなぜかあるのですが...まあ、たぶん気にしなくてOK）。
コンテナを立ち上げてみる
ここまで来たら、もう一息です！！
以下のコマンドでイメージをBuildしましょう！
$ docker-compose build
結果
また、以下のコマンドでBuildしたイメージをもとに、コンテナをRunしましょう！
$ docker-compose up -d
結果
コンテナが立ち上がっているみたいです！
以下のコマンドで、現在立ち上がっているコンテナを見ることができます。
$ docker ps
結果
改行されていてやや見ずらいですが、NAMESのところに先ほどdocker-conpose.ymlで設定したコンテナ名が表示されています！！
一応、Docker Desktopの方でも確認してみましょう！
どうやら立ち上がっているっぽいですね！！
おめでとうございます！🎊
作業が終わったら、ひとまずDocker Desktopのstopボタンを押してコンテナを停止させておきましょう。
2. まとめ・次回予告
いや～、大変でしたね。（笑）
今回の記事はやや長くなっていしまいましたが、最後まで読んでくださって本当にありがとうございます！
今回は、Dockerファイルを作成し、docker-composeで複数のコンテナを管理、最後には実際にコンテナを立ち上げるところまでできました！
今回の最後に使用したDockerコマンドについてもう少し詳しく知りたい方は、以下の
【ゼロから始める】入門者向けDockerの使い方講座【Windows,Mac対応】
の動画の13:48「基本的なDockerのコマンド」のチャプターを見ていただくとよいと思います。
次回はいよいよLaravelのインストールに挑戦します！
環境構築編も残り少しです！
頑張りましょう～！
参考
・第1回 Laravel10 環境構築メモ（Windows11 + WLS2 + Dockerで構築）
・「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 ディレクトリ
・【イラストで簡単理解！】絶対パスと相対パスの書き方
・Visual Studio Code のインストール方法
・【VSCode】Macでcodeコマンドを使用可能にする方法
・nginx と PHP-FPM の仕組みをちゃんと理解しながら PHP の実行環境を構築する
・【ゼロから始める】入門者向けDockerの使い方講座【Windows,Mac対応】
これまでの記事一覧
・その１: 要件定義・設計編
・その２: 環境構築編① ~WSL, Ubuntuインストール~
・その３: 環境構築編② ~Docker Desktopインストール~