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

  • URLをコピーしました!

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

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

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

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

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

  • 導入編
  • 前編
  • 後編

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

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

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

DockerでLaravel環境を簡単に構築することができるLaradockという技術がありますが、Laradockは現場ではほとんど使われません。(僕の周りで使っているという声は1つも聞いたことはありません)
Laradockを使っても「Dockerで環境構築できた」とは言い難いのでぜひこの記事で具体的な構築方法を学んでくださいm(__)m

目次

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

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

ツール・アプリケーションバージョン
Git2.23.1
Docker20.10.5
Docker Compose1.29.0
Composer2.0.13
Laravel6.20.25
npm6.14.6
Vue.js2.6.12
MySQL8.0
使用ツール、アプリケーションのバージョン

構築するDocker環境の概要

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

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

ミドルウェア頭文字ミドルウェア名メモ
OSLLinux(※)
WebサーバーENginx『エンジンエックス』と読む
DBサーバーMMySQL
アプリケーションPPHPフレームワークはLaravelを採用
構築するDocker環境(LRMP環境)の概要

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

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

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

完成版のGitHubリポジトリ

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

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

注意点

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

  • この記事はMacOS(Intel Chip)用の内容です。Windowsの動作確認は行っていません。
  • DockerDocker Composeとは何なのか?といった詳しい説明は割愛します。Dockerに対する理解が浅い方は以下の記事などを参考に勉強しておくことをオススメします。

全体の手順

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

  • DockerとDocker Composeを使えるようにする ← 導入編はここまで
  • docker-compose.ymlを作成する
  • 環境変数を設定する
  • 各コンテナのDockerfileを作成する
  • 各ミドルウェアの設定ファイルを作成する
  • イメージの構築(buid)
  • コンテナの起動(up)
  • Laravelをインストールする
  • Vue.jsをインストール

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

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

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

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

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

  • Vagrant等の仮想化ツールでLinux系OSの仮想マシンを構築し、その中にDockerをインストールする(Docker on Vagrant)
  • Docker Desktop(Docker for Mac)をインストールする

この記事では簡単にDockerDocker 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ディレクトリが作成できたらその下にphpnginxmysqlディレクトリを作成します。

$ cd docker
$ mkdir php nginx mysql

ここまで出来たら以下のディレクトリ構造になっていると思います。

docker-laravel-vue
└─ docker
     ├─ php
     ├─ nginx
     └─ mysql

これで準備はOKです。

今回はミドルウェアの名前に合わせてphpnginxmysqlの3つのディレクトリを作成しましたが、それぞれappwebdbという名前にしても良いです。

残りのディレクトリやファイルはこれからの前編、後編で適宜作成していきますので今は作成しなくてOKです。

最後に

これでDockerでLaravel+Vue.jsの開発環境を構築する準備は整いました。

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

お疲れ様でした!

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

ブログを開設するなら「SWELL」が絶対オススメ!

コメント

コメント一覧 (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/ […]

コメントする

目次