
・Dockerで環境構築する時にミドルウェアの設定ファイルはどんな風に書くのが良いの?
・Laravel、Vue.jsを導入するためにはどうすれば良いの?
と疑問をお持ちの方のお悩みを解決できる記事になっています!
この記事は『【MacOS Intel Chip】絶対に失敗しないDockerでLaravel + Vue.jsの開発環境(LEMP環境)を構築する方法〜前編〜』の続きです。
- docker-compose.ymlの書き方
- 環境変数の設定
- Dockerfileの書き方
は前編で解説しています。
前編の前にも導入編がありますのでまだそれらを読み終わってない方は先にご覧ください。




このブログで解説するDockerでの環境構築手順は
- 導入編
- 前編
- 後編
に分けていますが、今回は最後の『後編』です。
前編では複数のコンテナの設定情報をまとめるdocker-compose.yml
やイメージの設計書となるDockerfile
を作成しました。
後編では各種ミドルウェアの設定ファイルを作成し、実際にDockerコンテナを起動、LaravelとVue.jsの導入をやって行きます。
というわけで、Dockerを使ったLaravel+Vue.jsの開発環境の構築方法の後編を解説しますね!
長かった環境構築もあと少しです。がんばりましょう!
全体の手順
全体の手順はこちらです。
- DockerとDocker Composeを使えるようにする
- docker-compose.ymlを作成する
- 環境変数を設定する
- 各コンテナのDockerfileを作成する ← 前編はここまで
- 各ミドルウェアの設定ファイルを作成する
- イメージの構築(buid)
- コンテナの起動(up)
- Laravelをインストールする
- Vue.jsをインストール
この後編では残りの手順を全てやっていきます。
各ミドルウェアの設定ファイルを作成する
PHP、Nginx、MySQLの設定ファイルを作成します。
今回の記事はDockerで環境を構築することがゴールなのでミドルウェアの設定に関する詳しい解説は行いませんのでここは手短に進めています。
おさらいですが、現在のディレクトリ構造はこのようになっています。
docker-laravel-vue
├─ docker
│ ├─ php
│ │ └─ Dockerfile
│ ├─ nginx
│ │ └─ Dockerfile
│ └─ mysql
│ └─ Dockerfile
│─ .env
│─ .gitignore
└─ docker-compose.yml
PHPの設定ファイルの作成
laravel-docker-vue/docker/php
ディレクトリにphp.ini
を作成します。
docker-laravel-vue
├─ docker
│ ├─ php
│ │ └─ Dockerfile
│ │ └─ php.ini ← コレ作成
│ ├─ nginx
│ │ └─ Dockerfile
│ └─ mysql
│ └─ Dockerfile
│─ .env
│─ .gitignore
└─ docker-compose.yml
php.ini
の中身はこちらです。
[Date]
date.timezone = "Asia/Tokyo"
[mbstring]
mbstring.internal_encoding = "UTF-8"
mbstring.language = "Japanese"
php.iniの設定項目はたくさんありますが、今回はシンプルにタイムゾーンの設定と日本語環境の設定のみを行っています。
もっと細かい設定がしたい方は適宜ググってみてください。
Nginxの設定ファイルの作成
laravel-docker-vue/docker/nginx
ディレクトリにdefault.conf
を作成します。
docker-laravel-vue
├─ docker
│ ├─ php
│ │ └─ Dockerfile
│ │ └─ php.ini
│ ├─ nginx
│ │ └─ Dockerfile
│ │ └─ default.conf ← コレ作成
│ └─ mysql
│ └─ Dockerfile
│─ .env
│─ .gitignore
└─ docker-compose.yml
default.conf
の中身はこちらです。
server {
listen 80;
root /var/www/html/public;
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
add_header X-Frame-Options "SAMEORIGIN";
add_header X-XSS-Protection "1; mode=block";
add_header X-Content-Type-Options "nosniff";
index index.php index.html index.htm;
charset utf-8;
location / {
try_files $uri $uri/ /index.php?$query_string;
}
location = /favicon.ico { access_log off; log_not_found off; }
location = /robots.txt { access_log off; log_not_found off; }
error_page 404 /index.php;
location ~ \.php$ {
fastcgi_pass app:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
include fastcgi_params;
}
location ~ /\.(?!well-known).* {
deny all;
}
}
Laravelの公式ドキュメント(日本語訳版)にNginxの設定内容例がありますのでそれを参考して作成しています。
MySQLの設定ファイルの作成
最後にMySQLです。
laravel-docker-vue/docker/mysql
ディレクトリにmy.cnf
を作成します。
docker-laravel-vue
├─ docker
│ ├─ php
│ │ └─ Dockerfile
│ │ └─ php.ini
│ ├─ nginx
│ │ └─ Dockerfile
│ │ └─ default.conf
│ └─ mysql
│ └─ Dockerfile
│ └─ my.cnf ← コレ作成
│─ .env
│─ .gitignore
└─ docker-compose.yml
my.cnf
の中身はこちらです。
[mysqld]
user=mysql
character_set_server = utf8mb4
collation_server = utf8mb4_0900_ai_ci
# timezone
default-time-zone = SYSTEM
log_timestamps = SYSTEM
# Error Log
log-error = mysql-error.log
# Slow Query Log
slow_query_log = 1
slow_query_log_file = mysql-slow.log
long_query_time = 1.0
log_queries_not_using_indexes = 0
# General Log
general_log = 1
general_log_file = mysql-general.log
[mysql]
default-character-set = utf8mb4
[client]
default-character-set = utf8mb4
MySQLの設定項目はたくさんありますが、ユーザー情報、言語、タイムゾーン、ログ関連等の設定を行っています。
これで各ミドルウェアの設定ファイルの作成が完了しました。
ここまででDocker環境を構築するリソースの準備が完了です。
やっとここまできました。それでは実際に構築する手順に進みましょう!
イメージの構築(buid)
Dockerで環境構築する上で最低限(と言っても超最低限ですw)理解が必要な用語は
- Dockerfile
- イメージ
- コンテナ
です。
図で表すとこのような感じで、Dockerfileを元にイメージをビルドして、イメージからコンテナを起動します。


※Docker Hubという色々なイメージが公開されているプラットフォームから引用する方法もあります(正直こちらの方がDockerfileが不要なのでもっとカンタン)が、今回は各ミドルウェアのDockerfileを作成する方法にしました。
ちょっと前置きが長くなりましたが、早速Dockerfileからイメージをビルドしています。
と、その前にdocker-laeavel-vue
ディレクトリにsrc
ディレクトリを作成しておきます。
docker-laravel-vue
├─ docker
│ ├─ php
│ │ └─ Dockerfile
│ │ └─ php.ini
│ ├─ nginx
│ │ └─ Dockerfile
│ │ └─ default.conf
│ └─ mysql
│ └─ Dockerfile
│ └─ my.cnf
├─ src ← コレ作成
│─ .env
│─ .gitignore
└─ docker-compose.yml
なぜ、src
ディレクトリの作成が必要なのかと言うと、docker-compose.yml
のwebコンテナの設定で
volumes:
- ./src/:/var/www/html
このように書いており、ローカルのsrc
ディレクトリとコンテナの/var/www/html
を対応させているためです。
ここまで出来たらターミナルでdocker-laeavel-vue
ディレクトリにいることを確認して、以下のコマンドを実行します。
$ docker compose build
ちょっと時間がかかりますが、最後に『Successfully built…』のようなメッセージが出力されれば完了です。
これでPHP、Nginx、MySQL3つのイメージのビルドが完了です。
コンテナの起動(up)
次にイメージを元にコンテナを起動します。
先ほどdocker compose build
を実行したディレクトリのまま以下のコマンドを実行します。
$ docker compose up -d
実行後、以下の表示が出ればコンテナの起動は完了です。
[+] Running 3/3
⠿ Container docker-laravel-vue_db_1 Started 6.4s
⠿ Container docker-laravel-vue_app_1 Started 5.0s
⠿ Container docker-laravel-vue_web_1 Started
これで各コンテナの起動が完了し、DockerでLEMP環境を構築することができました!
Laravelをインストールする
Docker環境にいよいよLaravelをインストールします。
大きな手順でいうと以下の2つです。
- Composerのバージョン確認
- Laravelの新規プロジェクト作成
Composerのバージョン確認
まずはPHPコンテナに無事にComposerがインストールできているかを確認します。
Composerが入ってないとLaravelを使うことはできませんからね。
先ほどまでと同じlaravel-docker-vue
ディレクトリで以下のコマンドを実行し、app
コンテナに入ります。
$ docker compose exec app bash
実行して以下のように/var/www/htmlディレクトリに変わればapp
コンテナに入ることができています。
root@81d2cea8efe2:/var/www/html#
そのままのディレクトリで以下のコマンドを実行してComposerのバージョンを確認します。
root@0e8d8ab6688f:/var/www/html# composer -V
Composer version 2.0.13 2021-04-27 13:11:08
バージョンが表示されたらOKです。
ここでバージョンが表示されない場合はタイプミスやファイルの書き方を間違えている可能性がありますのでご確認ください。
Laravelのインストール
ディレクトリは変えずに(/var/www/htmlで)以下のコマンドを実行します。
composer create-project --prefer-dist "laravel/laravel=6.*" .
少し時間がかかるかもしれませんが、以下の出力が表示されたらOKです。無事にLaravelがインストールできました。
Package manifest generated successfully.
67 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
> @php artisan key:generate --ansi
Application key set successfully.
コマンドの意味としては『Laravel6系を指定してカレントディレクトリに新規プロジェクトを作成する』です。
(先ほどのコマンドの末尾の.
はカレントディレクトリという意味です)
このコマンドを実行すると、laravel-docker-vue/src
ディレクトリの中にLaravelのディレクトリやファイルが作成されます。
実際にターミナルで確認します。
$ ls
README.md artisan composer.json config package.json public routes storage vendor
app bootstrap composer.lock database phpunit.xml resources server.php tests webpack.mix.js
また、コンテナの/var/www/html
の中にも同様にLaravelのディレクトリやファイルが作成されています。
root@0e8d8ab6688f:/var/www/html# ls
README.md bootstrap config phpunit.xml routes tests
app composer.json database public server.php vendor
artisan composer.lock package.json resources storage webpack.mix.js
ここまで終わりましたらブラウザ(Google Chrome推奨)のURLのフォームにlocalhost:80
と入力しにアクセスしてみましょう。
Laravelのウェルカムページが表示されたらバッチリです。


これで Dockerを使ったlaravelの実行環境(LEMP環境)の構築は完了です!
Vue.jsをインストール
最後にVue.jsをインストールして使えるようにします。あと少しです!
Vue.jsはnpmというパッケージ管理ツールを用いてインストールしますので、まずはnpmがインストールできていることを確認します。
app
コンテナ内で以下のコマンドを実行します。
(一度コンテナから出た場合は再度docker compose exec app bash
を実行してコンテナに入ってください)
root@0e8d8ab6688f:/var/www/html# npm -v
6.14.6
バージョンが表示されたらインストールができています。
では続けて以下のコマンドを実行してください。
npm install -D vue
このように表示されたらOKです。
npm notice created a lockfile as package-lock.json. You should commit this file.
+ vue@2.6.12
added 1 package from 1 contributor and audited 1 package in 2.876s
found 0 vulnerabilities
次に以下のコマンドを実行してください。
npm install -D vue-template-compiler
このような出力結果になればOKです。これでVue.jsが使えるようになります。
+ vue-template-compiler@2.6.12
added 3 packages from 2 contributors and audited 4 packages in 1.553s
found 0 vulnerabilities
念のため、package.json
というファイルにの"devDependencies"
の中に以下の記載があるかどうかを確認してください。
"vue": "^2.6.12",
"vue-template-compiler": "^2.6.12"
Vue.jsのインストール自体はこれで終わりですが、実際にVue.jsを使う場合は以下の手順が必要です。
(この記事では解説は割愛します)
- Vueコンポーネントを作る
- laravel-vue-app/resources/js/app.jsの編集
最後に
これでDockerを使ったLaravel+Vue.jsの開発環境の構築が完了です!
完成版のソースコードはGitHubにアップしていますので必要あれば参照ください。
この記事をキッカケにDockerでの環境構築に興味を持っていただけた方や、Docker・Docker Composeの理解が深まった方がいたら嬉しいです。
『導入編』と『前編』はこちらです。




デバッグツールであるXdebubの導入方法と使い方を学びたい方はこちらも併せて読んでみてください。


コメント
コメント一覧 (10件)
こんにちは。とても分かりやすく参考になる記事で感動しました。
1点ご質問させて下さい。
vue.jsのインストールの際に「env: node: No such file or directory」というエラーが出てしまいます。
envファイルにnpmの設定が必要なのかと思い、調べてみたのですが、パスが間違っているのではという記事を見つけました。
以下の当たりが怪しいと感じるのですが、人によってはnpmのインストールの設定でパスを変える必要があるのでしょうか?
docker buildする際にdockerをバージョンアップしましたらログが出なくなってしまったので確認方法がなく対処法に困っています。
# Composer install
COPY –from=composer:2.0 /usr/bin/composer /usr/bin/composer
# install Node.js
COPY –from=node:10.22 /usr/local/bin /usr/local/bin
COPY –from=node:10.22 /usr/local/lib /usr/local/lib
コメントありがとうございます!
Vue.jsインストールの前にnpmが使えることは確認済みでしょうか?
以下コマンドで確認できます。
$ docker-compose exec app npm -v
はじめまして。
とてもわかり易い内容で参考にさせて頂いております。
kosuke inukaiさんと同じようなところで、つまずいております。
/var/www/html # npm -v
env: can’t execute ‘node’: No such file or directory
$ docker-compose exec app npm -v
env: can’t execute ‘node’: No such file or directory
といった状況となります。
ご教授頂ければ幸いです。
よろしくお願い致します。
PHPコンテナのベースをalpineに変更したことで上手くNodeがインストールできないようになっていました。
PHPコンテナ用のDockerfileを修正しましたので、そちらを確認お願いします。
ご教授ありがとうございました。
FROM php:7.4.1-fpm-alpine → FROM php:7.4.1-fpm に変更後、docker compose buildを実行すると、途中で以下のエラーとなりました。
=> ERROR [docker-laravel-vue_app stage-0 6/7] RUN apk update && apk add git zip unzip vim && doc 0.3s
度々で恐縮でございます、ご確認・ご教授頂ければ幸いです。
修正後のDockerfileをご確認いただけたら解決すると思います!
[…] yutaro blog | 【前編】絶対に失敗しないDockerでLaravel + Vue.jsの開発環境(LEMP環境)を構築する方法〜MacOS Intel Ch… と疑問をお持ちの方のお悩みを解決できる記事になっています! この記事は『【MacOS Intel Chip】絶対に失敗しないDockerでLaravel + Vue.jsの開発環境(LEMP環境)を構築… yutaro blog | 【後編】絶対に失敗しないDockerでLaravel + Vue.jsの開発環境(LEM… […]
[…] 開発環境は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/ […]
お世話になっております。こちらの記事のおかげでDockerの理解を深めることができました。
質問なのですが、コンテナを起動した後、設定したポートでブラウザからページを開こうとするとうまくいきません。
laravel画面の方は「the stream or file “/var/www/html/storage/logs/laravel.log” could not be opened in append mode: failed to open stream: permission..」と出たので、ほかの記事を参考にし、「chmod -R 777 /var/www/html/storage と実行することでウェルカムページが開けるようになりました。
しかし、3306でポート設定したデータベース画面が開けず、「このページは動作していません。」と表示され、またログには大量のpermission deniedが出ていました。
ubuntuにログインしているユーザのuid/gidが1000でしたので、docker-compose.ymlのdbの箇所に「user: “1000:1000″」と書き加えましたがうまくいきません。
お忙しい中恐縮ですが、解決策を教えていただけませんでしょうか。