絶対に失敗しないDockerでLaravel6.8+Vueの実行環境（LEMP環境）を構築する方法〜前編〜

12 min read読了の目安（約11000字）
Docker
Laravel
Vue.js
tech

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に対する理解が浅い方は以下の記事などを参考に勉強しておくことをオススメします。

【図解】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
#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してそれを元に起動します。

nginx:1.18（DockerHub公式サイト）

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環境）を構築する方法〜後編〜