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

ゆーたろー

こんにちは、ゆーたろーです。

HRTechベンチャーのエンジニアです。
TypeScript/Vue.js(Nuxt.js)/React/Next.js/PHP/LaravelでWebアプリケーションの開発を行っています。

・プログラミングスクールメンター
・神戸で勉強会「つながる勉強会」を運営
・神戸メインのグルメインスタ運営

など色々やっています。1児のパパです。

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

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

お疲れ様でした!

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

オススメ教材

Laravel

定番の青本です。これからLaravelを学習したいという方全員にオススメできる入門書です。
今買うなら上記リンクから飛べるLaravel6対応版の青本を強くオススメします。

青本と同じ著者が執筆した技術書で青本の次に読むとLaravelの理解がかなり深まります。
Laravelの基礎は身についた方にオススメです。

現役Laravelエンジニアのレベルアップに最適な技術書です。
サービスコンテナ、レイヤードアーキテクチャ、テストなど実践的な内容が幅広く学べます。
(難しい話もあるのでそこまで初心者向きではないです)

Docker

Udemy:米国AI開発者がゼロから教えるDocker講座

Dockerを1から学習したい方にとてもオススメする教材です。
僕はこの教材でしか勉強をしていませんが、実務で困らないレベルまで理解することができました。

Vue.js

【超オススメ】Udemy:超Vue.js 2 完全パック (Vue Router, Vuex含む)

Vue.jsを勉強したい全ての方にオススメできる教材です。
Vue.jsの基礎〜応用まで網羅できるプラス、Vue Router、Vuex、AxiosなどVue.jsでのフロントエンド開発には欠かせないパッケージについても学習できます。超オススメ。

Vue.js&Nuxt.js超入門

書籍でVue.jsを勉強して、Vue.jsのフレームワークNuxt.jsも学習したい方にオススメです。
(僕はNuxt.js学習用に購入しました)

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

よかったらシェアしてね!

この記事を書いた人

上場グループのHRTechベンチャーで働くWebエンジニアです。
新卒で入社した大手重工メーカを4年で退職し、2020年4月からエンジニアとキャリアチェンジしました。

仕事ではTypeScript/Vue.js(Nuxt.js)/Laravelを主に使っています。

プログラミングスクールの講師やデザイン関連のお仕事もさせてもらっています。

神戸で「つながる勉強会」という勉強会を月1で運営しています。
https://tsunagaru-kobe.connpass.com/

お仕事のご依頼、ご相談はお問い合わせページもしくはTwitterのDMからお願いします。

コメント

コメントする

目次
閉じる