1.バージョン
Laravel 6.8
Vue.js 2.6.11
Docker Desktop 2.3.0.3
2.はじめに
DockerでLaravel+Vue.jsの実行環境を構築する方法をまとめます。
ネットにはDockerdでLaravel実行環境を構築する方法はありますが、多くの記事が設定コードを載せているだけで詳しい説明がなかったので、「この記事だけ読めばある程度意味を理解でき、絶対に環境構築が成功する」という記事を執筆しようと思いました。
構築する環境はLEMP環境で構成は以下の通りです。
| ミドルウェアの種類 | 頭文字 | ミドルウェア名 | 備考 |
|---|---|---|---|
| OS | L | Linux | （※） |
| Webサーバー | E | Nginx | エンジンエックスと読む |
| データベース | M | MySQL | 特になし |
| アプリケーション | P | PHP | フレームワークはLaravelを使う |
Nginx、MySQL、PHPの3つをコンテナの設定を行います。
（※）僕がググる中で「あれ、Linuxのコンテナは要らないの？」と疑問に思ってたのですが、Docker for Macを使うとMacOSに標準装備されているHyperKitという仮想化ツールによってLinuxの仮想マシンが自動で起動してくれるので後述するコンテナの設定ファイルにはOSに関する記述は不要です。（詳しくは下の記事）
Docker for Macでおこなっていることのまとめ（メモ）
3.注意点
- この記事を見ながら環境構築する場合はMacOSをオススメします。
- この記事で使うDocker imageのバージョン（tag No.）以外のバージョンでの動作確認はしておりません。
- DockerやDocker-Composeの概要に関する説明ほとんどしませんのでDockerに対する理解が浅い方は以下の記事などを参考に勉強しておくことをオススメします。
4.全体の手順
- DockerとDocker Composeを使えるようにする
- docker-compose.yml（コンテナの設定ファイル）を作成する
- Dockerfileを作成する（PHPコンテナのイメージの設計書）
- Nginxの設定ファイルを作成する
- イメージの構築(buid）
- コンテナの起動(up）
- Laravelをインストールする
- Vue.jsをインストール
5.DockerとDocker Composeを使えるようにする
まずはDockerとDocker-Composeをお使いのPCで使えるようにします。
Dockerを使えるようにするためにVagrantでLinux系のOSの仮想マシンを構築→仮想マシンにDockerをインストール→Dockerを使えるようにする方法（Docker on Vagrant）でも良いですが、DockerとDocker Composeのインストールが簡単にできるDocker Desktop（Docker for Mac）を使います。
（僕は実務でもDocker Desktopを使っています）
Docker Desktopのインストール方法はググればたくさん出てくるのでここでは説明しませんが、下の記事を見れば問題なくインストールできると思います。
DockerをMacにインストールする（更新: 2019/7/13）
インストールが終わったらターミナルで以下のコマンドを実行してバージョン情報が表示されればインストールは正常にできています。
Dockerのバージョン確認↓
$ docker -v
Docker-Composeのバージョン確認↓
$ docker-compose -v
6.ディレクトリ構造
6-1.完成形のディレクトリ構造
my-application(*)
├─ docker(*)
│ ├─ php(*)
│ │ └─ Dockerfile
│ └─ web(*)
│ └─ default.conf
│
├─ laravel-vue-app(*)
│ └─ ここにLaravelのPJディレクトが作られる
│
└─ docker-compose.yml
(*)のディレクトリ名は任意でOKです。
（default.confも好きなファイル名でよかったかも...です）
なお、ディレクトリ構造はこれでなければできないなんてことは全くありません。
僕が環境構築したディレクトリ構造をそのまま載せてますのでお好みで編集していただいて構いません。
※ディレクトリ構造を変更すると、後ほど作成するdocker-compose.ymlの設定内容を適宜修正する必要がありますのでちょっと自身がないな、という方はそのままマネして作ってもらえたらOKです。
6-1.必要なディレクトリを作成する
まず、好きな場所（デスクトップでもユーザーディレクトリでもOK）にmy-application（名前は自由）ディレクトリを作成します。
その下にdockerディレクトリを作成します。
次にdockerディレクトリの中に以下2つのディレクトリを作成します。
- php（名前は自由）
- web（名前は自由）
すると、以下のディレクトリ構造になると思います。
my-application(*)
└─docker(*)
├─ php(*)
└─ web(*)
これで準備はOKです。
これからの各作業によって完成形のディレクトリ構造にします。
- phpの中にはPHPコンテナ用のDockerfileを作成する
- webの中にNginxの設定ファイル（default.conf）を作成する
- laravel-vue-appディレクトリはLaravelインストール時に自動的に作られる
- docker-compose.ymlは次のセクションで作成する
7.docker-compose.yml（コンテナの設定ファイル）を作成する
ではここから各種コンテナの設定をしていきます。
ミドルウェア毎に複数のコンテナを作成・管理する場合はコンテナの設定ファイルであるdocker-compose.ymlを作成します。
my-applicationディレクトリ配下に作成してください。
7-1.全体のコード（完成形）
まずは全体のコードはこちらです。
#docker-compose.ymlのバージョン
version: '3'
#docker volumeの設定
volumes:
mysql-volume:
#services以下に各コンテナの設定を書く
services:
#Webサーバーのコンテナ
web:
image: nginx:1.15.6
ports:
- '8000:80'
depends_on:
- app
volumes:
- ./docker/web/default.conf:/etc/nginx/conf.d/default.conf
- .:/var/www/html
#アプリケーションのコンテナ
app:
build: ./docker/php
volumes:
- .:/var/www/html
#データベースのコンテナ
db:
image: mysql:5.7
ports:
- '3306:3306'
environment:
MYSQL_DATABASE: db_name
MYSQL_USER: db_user
MYSQL_PASSWORD: db_password
MYSQL_ROOT_PASSWORD: root
TZ: 'Asia/Tokyo'
volumes:
- mysql-volume:/var/lib/mysql
7-2.docker-compopse.ymlのバージョン
まずはこちらのコードです。
version: '3'
今docker-compose.ymlファイルを作成する場合はversion: '3'と書いておけば間違いないです。
このバージョンはdocker-compose.yml（Composeファイル）のバージョンでありDocker Composeのバージョンとは違います。
（公式サイトにも一応書いてます）
まあ、お決まり事みたいなことなのでそんなに深く考えなくていいかなと思います。
7-3.Webサーバー（Nginx）コンテナの設定について
WebサーバーにはNginxを使います。
Nginxコンテナの設定はこちら↓
web:
image: nginx:1.15.6
ports:
- '8000:80'
depends_on:
- app
volumes:
- ./docker/web/default.conf:/etc/nginx/conf.d/default.conf
- .:/var/www/html
7-3-1.コンテナ名
web:
はコンテナ名を表します。
今回はwebというコンテナ名にしました。
こちらも決まりはないので好きに命名してOKですが、webやweb_serverがわかりやすくて無難かなと思います。
7-3-2.イメージ
imageオプションはコンテナの元になるイメージを設定します。このimgae:の右に書いたイメージをDokcerHub（Docker imageを共有するプラットフォーム）から持ってきます（pullすると言う）。
image: nginx:1.15.6
NginxコンテナはDockerHubからnginx 1.15.6のpullしてそれを元に起動します。
7-3-3.ports
portsはローカルとDockerコンテナ間のポート番号の対応付けを設定するオプションです。
ports:
- '8000:80'
ローカルのポート番号8000とコンテナ内のNginxのポート番号80（Nginxのデフォルトのポート番号）をリンクさせています。
これでNginxコンテナが起動している状態でローカルのlocalhost:8000にアクセスするとNginxの80番ポートにアクセスすることができます。
7-3-4.depends_on
depends_onはコンテナ間の依存関係を設定するオプションです。
depends_on:
- app
appはPHP（アプリケーション）コンテナです。
NginxはPHPを実行するため、PHP→Nginxの順にコンテナを起動するようにdepends_onでコンテナ同士の関係を設定しています。
depends_on:
- 先に起動するコンテナ名
初めて環境構築する方でちょっと内容が難しいと感じる方はここはあまり深く考えずに進んでもOKです。
7-3-5.volumes
volumesはローカルとDockerコンテナ間のファイル共有を設定するオプションです。
volumes:
- ./docker/web/default.conf:/etc/nginx/conf.d/default.conf
- .:/var/www/html
ここでは./docker/web/default.confと/etc/nginx/conf.d/default.confをリンク（対応）付け、
.と/var/www/htmlをリンク（対応）付けしてます。（.はカレントディレクトリです）
volumesオプションはローカルのディレクトリとDockerコンテナ内のディレクトリを:で対応させます。
volumesでディレクトリをリンクさせることにより、Dockerコンテナ内で/var/www/html/に移動した時にローカルの.以下のディレクトリ、ファイルがそこにあるように（実際にはない）共有することができます。
（ちょっとここ言葉で上手く説明するのが難しいのでわかりにくかったらすみません...)
また、ローカルで.以下のファイルを修正するとDockerコンテナ内にもその修正が反映されます。
書き方は以下の通りです↓
volumes:
- (ローカル):(Dockerコンテナ内)
ここはDocker環境を構築する上でもしっかり理解しておくべき内容だと思います。
7-4.アプリケーション（PHP）コンテナの設定について
アプリケーションはLaravelを使うのでもちろんPHPにします。
PHPコンテナの設定はこちら↓
app:
build: ./docker/php
volumes:
- .:/var/www/html
7-4-1.コンテナ名
コンテナ名はappにしてます。ここも任意ですが、他にはphpやphp_serverが無難かと。
7-4-2.build
buildはDockerHubのイメージをそのまま引用するのではなく、DockerHubのイメージをベースにオリジナルのイメージを作成する（buildする）ときに用います。
build: ./docker/php
これで./docker/phpの配下にあるDockerfileというテキストファイルの内容にのっとってイメージを構築していくという設定をしています。
ディレクトリ構造の抜粋↓
my-application(*)
├─ docker(*)
│ ├─ php(*)
│ │ └─ Dockerfile
docker-compose.ymlから見て./docker/phpの配下にちゃんとDockerfileがありますね。
Dockerfileの内容については後ほど解説します。
7-4-3.volumes
volumes:
- .:/var/www/html
ローカルの.とDockerコンテナ内の/var/www/htmlをリンクさせています。
Webサーバーの時も/var/www/htmlが出ましたがこれは覚えておいて良いと思います。
（以下の記事を読んでみても良いかも）
7-5.データベース（MySQL）コンテナの設定について
DBはMySQLを使います。
MySQLコンテナの設定はこちら↓
db:
image: mysql:5.7
ports:
- '3306:3306'
environment:
MYSQL_DATABASE: db_name
MYSQL_USER: db_user
MYSQL_PASSWORD: db_password
MYSQL_ROOT_PASSWORD: root
TZ: 'Asia/Tokyo'
volumes:
- mysql-data:/var/lib/mysql
7-5-1.コンテナ名
コンテナ名はdbにしてます。ここも任意ですが、他にはmysqlやdb_serverが無難かと。
7-5-2.イメージ
image: mysql:5.7
MySQLコンテナもNginxコンテナ同様、DockerHubからイメージをpullして使います。
今回はmysql:5.7のイメージを使用します。
7-5-3.ports
ports:
- '3306:3306'
Nginxコンテナの設定方法と同様で、ローカルの3306番ポートとDockerコンテナの3306番ポートを共有しています。（3306はMySQLのデフォルトのポート番号）
注意点として、他のアプリケーションでローカルのMySQLに3306番ポートで接続している場合、同じポート番号は使用することができないので:より左側の3306を適当な番号にしてください。（僕はカブっていたので変えました）
MySQLコンテナのポート番号（:より右側）は3306で問題ありません。
7-5-4.environment
environmentは文字通りですが、MySQLの環境変数を設定するオプションです。
environment:
MYSQL_DATABASE: db_name
MYSQL_USER: db_user
MYSQL_PASSWORD: db_password
MYSQL_ROOT_PASSWORD: root
TZ: 'Asia/Tokyo'
- MYSQL_DATABASE：DBの名前（好きな名前でOK）
- MYSQL_USER：MySQLのユーザー名（好きな名前でOK）
- MYSQL_PASSWORD：MySQLのパスワード（好きな名前でOK）
- MYSQL_ROOT_PASSWORD：ルート権限のパスワード（rootが一般的かなと思います）
- TZ：時間設定（Time Zone）
※ひょっとするとLaravel側でタイムゾーンを設定するのでここには不要かもしれませんが一応つけておきました。
あと、構築したファイルをGitHubに上げる場合はここの環境変数は変えてください。
7-5-5.volumes
volumesは先ほどまでと同じ考え方です。
が、データベースの場合はDocker VolumeというDockerのオプションを使用します。
volumes:
- mysql-data:/var/lib/mysql
Docker Volumeとはデータを永続的に保存できるようにする仕組みのことで、保存場所のことをvolume（ボリューム）と呼びます。
「なぜデータベースの時にボリューム（という場所）を使うのか」というと、コンテナは停止する時に起動していた物を壊すのでデータベースに保存しているデータがコンテナの停止とする度に消えてしまうからです。
なので開発するWebアプリケーションで扱うデータの保存先であるボリュームを用意する必要があるわけです。
（もちろんですが、ボリュームはコンテナの外に作られます）
コンテナの動作は簡単にいうと「起動→停止→破壊」です。で、起動し直す時は新たにコンテナを作って立ち上げます。
上の設定コードからローカルのmysql-volumeというボリュームとMySQLコンテナの/var/lib/mysqlをリンクさせています。
Docker Volumeの定義はdocker-compose.ymlの上部にあります。
volumes:
mysql-volume:
Docker Volumeはこちらの記事がわかりやすいです↓
Docker、ボリューム(Volume)について真面目に調べた
これで3つ全てのコンテナの設定が終了です。
8.ここまでの全体像
ここまでの内容をざっくりまとめると以下の通りです。
- Dockerを用いたLEMP環境構築では
Nginx、MySQL、PHPのコンテナを準備する - versionは3でOK
- DockerHubのイメージを引用（流用）する場合は
image、Dockerfileからイメージを構築（build）する場合はbuildオプション portsはローカルとコンテナ内のポート番号を対応づけるオプションdepends_onはコンテナ間の依存関係を設定するオプションvolumesはファイル共有を設定するオプションenvironmentは環境変数を設定するオプションDocker Volumeはデータベースのコンテナを設定する時に用いる仕組みでデータを永続的に保存することができるボリューム（というデータ保存場所）をコンテナの外に作る
後編へ続く
環境構築を1つの記事にまとめようと思ったのですが、まだまだ執筆ボリュームもありかなり長くなるので後編で残りの以下をまとめようと思います。
- Dockerfileを作成する（PHPコンテナのイメージの設計書）
- Nginxの設定ファイルを作成する
- イメージを構築(buid）する コンテナを起動(up）する
- Laravelをインストールする
- Vue.jsをインストール
ここまでで間違っていることや不明点があればお気軽にコメントいただければと思います。
後編はこちら
絶対に失敗しないDockerでLaravel6.8+Vueの実行環境（LEMP環境）を構築する方法〜後編〜
