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

・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を元にイメージをビルドして、イメージからコンテナを起動します。

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のウェルカムページが表示されたらバッチリです。

スクリーンショット 2020-08-09 17.12.30.png
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の導入方法と使い方を学びたい方はこちらも併せて読んでみてください。

オススメ教材

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学習用に購入しました)

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

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

この記事を書いた人

Webエンジニア←KHI(プラント事業の技術職)←大学院(機械工学)

PHP/Laravel/TypeScript/React/Next.js(Vue.js/Nuxt.jsは少し)
バックエンド歴の方が長いです。

神戸で「つながる勉強会」を運営↓
https://tsunagaru-kobe.connpass.com/

コメント

コメント一覧 (7件)

  • こんにちは。とても分かりやすく参考になる記事で感動しました。
    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

        度々で恐縮でございます、ご確認・ご教授頂ければ幸いです。

  • […] 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… […]

コメントする

目次
閉じる