【導入編】絶対に失敗しないDockerでLaravel + Vue.jsの開発環境（LEMP環境）を構築する方法〜MacOS Intel Chip対応〜

Laravelを勉強していて開発環境にDockerを導入したいけどどうすれば良いの？

と疑問をお持ちの方のお悩みを解決できる記事になっています！

Dockerを使ったLaravel+Vue.jsの開発環境の構築方法を解説します。

ネット上にDockerでLaravelの開発環境を構築する方法はありますが、多くの記事がコードを載せているだけで詳しい説明がなかったので、『この記事だけ読めばある程度意味を理解でき、絶対に環境構築が成功する』という記事にしています。

本環境構築はかなりボリュームが多いので、

に分けていますが、今回は『導入編』です。

この記事を参考にしていただき、個人開発やポートフォリオ開発に活かしていただけたら嬉しいです。

というわけで、Dockerを使ったLaravel+Vue.jsの開発環境の構築方法を解説しますね！

使用ツール、アプリケーションのバージョン

環境構築に使用するツール、アプリケーションのバージョンはこちらです。

構築するDocker環境の概要

LEMP環境と呼ばれる環境をDockerを使って構築します。

LEMP環境とは以下の構成です。

Nginx、MySQL、PHPの3つのミドルウェア用のコンテナの設定を行い、Docker環境を構築します。

（※）
OS（Linux）用のコンテナについて記載しておりませんが、この記事で使用するDocker for Macを使うとMacOSに標準装備されているHyperKitという仮想化ツールによってLinuxの仮想マシンが自動で起動してくれるので後述するコンテナの設定ファイルにはOSに関する記述は不要です。

これについて詳しく知りたい！という方はこちらの記事が分かりやすかったので読んでみてください。

Qiita

Docker for Macでおこなっていることのまとめ（メモ） – Qiita Docker for Macでおこなっていることのまとめ ※随時更新 今回は、最近Docker for Macを使い初めて以前のDocker ToolBoxを使った構築とどう違うのか整理したいと思い、D…

完成版のGitHubリポジトリ

このブログで解説する開発環境の完成版のコードは既にGitHubに上げています。

GitHub

GitHub – shimotaroo/docker-laravel-vuejs-sample: Laravel6×Vue.js2のDocker環境サンプル(M1 Mac対応) Laravel6×Vue.js2のDocker環境サンプル(M1 Mac対応). Contribute to shimotaroo/docker-laravel-vuejs-sample development by creating an account on GitHub.

必要に応じて参照ください。

注意点

予めご了承くださいm(__)m

Qiita

【図解】Dockerの全体像を理解する -前編- – Qiita この記事は何か イメージやコンテナなどの基本からdocker-compose、docker-machine, docker swarmなどのDocker周りの様々な概念の全体像を整理して、Dockerの仕組みを…

Qiita

【図解】Dockerの全体像を理解する -中編- – Qiita この記事は何か イメージやコンテナなどの基本からdocker-compose、docker-machine, docker swarmなどのDocker周りの様々な概念の全体像を整理して、Dockerの仕組みを…

Qiita

【図解】Dockerの全体像を理解する -後編- – Qiita この記事は何か イメージやコンテナなどの基本からdocker-compose、docker-machine, docker swarmなどのDocker周りの様々な概念の全体像を整理して、Dockerの仕組みを…

全体の手順

全体の手順はこちらです。

まずはDockerとDocker Composeを使えるようにする

まずはDockerとDocker-Composeをお使いのMacで使えるようにしていきましょう！

Dockerでの環境構築なのでこれができないと何も始まりません（笑）

※すでに使える状態になっている（インストール済み）場合はここは飛ばしてOKです。

そもそも、Dockerを使う方法は2つはあります。

この記事では簡単にDocker、Docker Composeが使えるDocker Desktopを使います。

（簡単に使えるとは書きましたが、僕は実務でDockerを使う時はDocker Desktopを使っていますので、実務ベースと思っていただいて問題ありません）

Docker Desktopのインストール方法はこちらの記事をを参考にすれば問題なくインストールできると思います。

Qiita

DockerをMacにインストールする（更新: 2019/7/13） – Qiita はじめに MacにDockerをインストールする方法についてまとめた記事です。 ザクザク行けば10分程度でnginxの起動までいけると思います。 この記事の目的はDockerに慣れ…

上記の記事を参考にインストール作業が終わったらターミナルで無事にインストールできているか確認してください。

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 -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の開発環境を構築する準備は整いました。

導入編はこれで完了です。

お疲れ様でした！

少し休憩して前編に進んでください。

あわせて読みたい

【前編】絶対に失敗しないDockerでLaravel + Vue.jsの開発環境（LEMP環境）を構築する方法〜MacOS Intel… Dockerで環境構築したいけどdocker-compose.ymlやDockerfile等の設定ファイルってどんな風に書けば良いの？ と疑問をお持ちの方のお悩みを解決できる記事になっています…