
Laravelを勉強していて開発環境にDockerを導入したいけどどうすれば良いの?
と疑問をお持ちの方のお悩みを解決できる記事になっています!
Dockerを使ったLaravel+Vue.jsの開発環境の構築方法を解説します。
ネット上にDockerでLaravelの開発環境を構築する方法はありますが、多くの記事がコードを載せているだけで詳しい説明がなかったので、『この記事だけ読めばある程度意味を理解でき、絶対に環境構築が成功する』という記事にしています。
本環境構築はかなりボリュームが多いので、
- 導入編
- 前編
- 後編
に分けていますが、今回は『導入編』です。
この記事を参考にしていただき、個人開発やポートフォリオ開発に活かしていただけたら嬉しいです。
というわけで、Dockerを使ったLaravel+Vue.jsの開発環境の構築方法を解説しますね!
DockerでLaravel環境を簡単に構築することができるLaradockという技術がありますが、Laradockは現場ではほとんど使われません。(僕の周りで使っているという声は1つも聞いたことはありません)
Laradockを使っても「Dockerで環境構築できた」とは言い難いのでぜひこの記事で具体的な構築方法を学んでくださいm(__)m
使用ツール、アプリケーションのバージョン
環境構築に使用するツール、アプリケーションのバージョンはこちらです。
ツール・アプリケーション | バージョン |
---|---|
Git | 2.23.1 |
Docker | 20.10.5 |
Docker Compose | 1.29.0 |
Composer | 2.0.13 |
Laravel | 6.20.25 |
npm | 6.14.6 |
Vue.js | 2.6.12 |
MySQL | 8.0 |
構築するDocker環境の概要
LEMP環境と呼ばれる環境をDockerを使って構築します。
LEMP環境とは以下の構成です。
ミドルウェア | 頭文字 | ミドルウェア名 | メモ |
---|---|---|---|
OS | L | Linux | (※) |
Webサーバー | E | Nginx | 『エンジンエックス』と読む |
DBサーバー | M | MySQL | |
アプリケーション | P | PHP | フレームワークはLaravelを採用 |
Nginx
、MySQL
、PHP
の3つのミドルウェア用のコンテナの設定を行い、Docker環境を構築します。
(※)
OS(Linux)用のコンテナについて記載しておりませんが、この記事で使用するDocker for Macを使うとMacOSに標準装備されているHyperKitという仮想化ツールによってLinuxの仮想マシンが自動で起動してくれるので後述するコンテナの設定ファイルにはOSに関する記述は不要です。
これについて詳しく知りたい!という方はこちらの記事が分かりやすかったので読んでみてください。


完成版のGitHubリポジトリ
このブログで解説する開発環境の完成版のコードは既にGitHubに上げています。
必要に応じて参照ください。
注意点
予めご了承くださいm(__)m
- この記事はMacOS(Intel Chip)用の内容です。Windowsの動作確認は行っていません。
Docker
やDocker Compose
とは何なのか?といった詳しい説明は割愛します。Dockerに対する理解が浅い方は以下の記事などを参考に勉強しておくことをオススメします。






全体の手順
全体の手順はこちらです。
- DockerとDocker Composeを使えるようにする ← 導入編はここまで
- docker-compose.ymlを作成する
- 環境変数を設定する
- 各コンテナのDockerfileを作成する
- 各ミドルウェアの設定ファイルを作成する
- イメージの構築(buid)
- コンテナの起動(up)
- Laravelをインストールする
- Vue.jsをインストール
まずはDockerとDocker Composeを使えるようにする
まずはDocker
とDocker-Compose
をお使いのMacで使えるようにしていきましょう!
Dockerでの環境構築なのでこれができないと何も始まりません(笑)
※すでに使える状態になっている(インストール済み)場合はここは飛ばしてOKです。
そもそも、Docker
を使う方法は2つはあります。
- Vagrant等の仮想化ツールでLinux系OSの仮想マシンを構築し、その中にDockerをインストールする(Docker on Vagrant)
- Docker Desktop(Docker for Mac)をインストールする
この記事では簡単にDocker
、Docker Compose
が使えるDocker Desktop
を使います。
(簡単に使えるとは書きましたが、僕は実務でDockerを使う時はDocker Desktopを使っていますので、実務ベースと思っていただいて問題ありません)
Docker Desktopのインストール方法はこちらの記事をを参考にすれば問題なくインストールできると思います。


上記の記事を参考にインストール作業が終わったらターミナルで無事にインストールできているか確認してください。
Dockerのバージョン確認
$ docker -v
Docker version 20.10.5, build 55c4c88
Docker Composeのバージョン確認
$ docker-compose -v
docker-compose version 1.29.0, build 07737305
このようにバージョンが表示されていればOKです。
このブログで使用しているバージョンのDockerから、Docker Composeで使うコマンドが
docker-compose
→ docker compose
に変わっている(まだdocker-compose
も使えます)のですが、docker compose
コマンドでのバージョン確認の方法が見つからなかったのでdocker-compose -v
を使用しています。
これで環境構築の準備ができました!
Docker環境のディレクトリ構造
Dockerで環境構築する場合には色々な設定ファイルを作成していきます。
Docker環境の完成形のディレクトリ構造
構築するDocker環境のディレクトリ構造の完成形はこちらです。
ディレクトリ構造には正解はありませんし、ネット上で公開されている記事とは違う部分もあると思うので一例と認識してください。
docker-laravel-vue(*)
├─ docker(*)
│ ├─ php(*)
│ │ └─ Dockerfile
│ │ └─ php.ini
│ ├─ nginx(*)
│ │ └─ Dockerfile
│ │ └─ default.conf
│ └─ mysql(*)
│ └─ Dockerfile
│ └─ my.cnf
│
├─ src(*)
│ └─ ここにLaravelのPJディレクトが作られる
│─ .env
│─ .gitignore
└─ docker-compose.yml
(*)をつけているディレクトリは名前は自由に変えていただいて問題ありません。
なお、先ほどご紹介したディレクトリ構造は一例と書きましたが、ディレクトリ構造を変更する場合は注意が必要です。
後ほど作成するdocker-compose.yml
というファイルの設定内容は今のディレクトリ構造に合わせた内容になっています。
ですので、もしディレクトリ構造を変更する場合は、docker-compose.yml
も適宜修正してください。



・ちょっと自信がないな・・・
・ひとまず一度環境構築を成功させたい
という方はこの記事の通り作成してもらえたらOKです。
それでは実際に作成していきましょう!
必要なディレクトリを作成する
まず、デスクトップでもUserディレクトリでも構いませんので好きなところにdocker-laravel-vue
ディレクトリを作成します。
$ mkdir docker-laravel-vue
docker-laravel-vue
ディレクトリが作成できたらその下にdocker
ディレクトリを作成します。
$ cd docker-laravel-vue
$ mkdir docker
docker
ディレクトリが作成できたらその下にphp
、nginx
、mysql
ディレクトリを作成します。
$ cd docker
$ mkdir php nginx mysql
ここまで出来たら以下のディレクトリ構造になっていると思います。
docker-laravel-vue
└─ docker
├─ php
├─ nginx
└─ mysql
これで準備はOKです。
今回はミドルウェアの名前に合わせてphp
、nginx
、mysql
の3つのディレクトリを作成しましたが、それぞれapp
、web
、db
という名前にしても良いです。
残りのディレクトリやファイルはこれからの前編、後編で適宜作成していきますので今は作成しなくてOKです。
最後に
これでDockerでLaravel+Vue.jsの開発環境を構築する準備は整いました。
導入編はこれで完了です。
お疲れ様でした!
少し休憩して前編に進んでください。


コメント
コメント一覧 (4件)
初めまして、Yutaroさん。
私は太田と申します。
昨年還暦を迎えましたが、今もって現役でがんばってます。
久々にlaravelをdockerで使う機会がありまして、dockerは初めてですが、色々勉強を兼ねて、Gitから数点のソースコードを利用して環境構築を試みましたが、説明不足と当方の理解力の無さでエラーメッセージとの格闘に疲れていたところ、貴殿のサイトに巡り合いました。
説明内容が非常に丁寧で、気持ち良く環境の構築が完了しましたことを感謝申し上げます。
2022年の正月となりましたが、ご挨拶がてら御礼申し上げます。
貴殿にとって良き年となりますように。
コメントありがとうございます!
そう言っていただけますと嬉しいです!
参考になってよかったです!
[…] 開発環境はdockerで構築します構成はこちらの記事を参考にさせていただきました。(というよりほぼそのまま)下記の記事ではPHPのバージョンは7.4ですが8.0に上げています。また、メール認証のテストをするためにMailHogを使えるようにしています。https://yutaro-blog.net/2021/04/28/docker-laravel-vuejs-1/https://yutaro-blog.net/2021/04/29/docker-laravel-vuejs-2/https://yutaro-blog.net/2021/04/30/docker-laravel-vuejs-3/ […]
[…] 開発環境はdockerで構築します構成はこちらの記事を参考にさせていただきました。(というよりほぼそのまま)下記の記事ではPHPのバージョンは7.4ですが8.0に上げています。また、メール認証のテストをするためにMailHogを使えるようにしています。https://yutaro-blog.net/2021/04/28/docker-laravel-vuejs-1/https://yutaro-blog.net/2021/04/29/docker-laravel-vuejs-2/https://yutaro-blog.net/2021/04/30/docker-laravel-vuejs-3/ […]