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