絶対に失敗しないDockerでLaravel6.8+Vueの実行環境（LEMP環境）を構築する方法〜後編〜

公開：2021/02/04
更新：2021/02/0412 min読了の目安（約11200字）TECH技術記事
Docker
Laravel
Vue.js

1.バージョン

  • Laravel：6.8
  • Vue.js：2.6.11
  • Docker Desktop：2.3.0.4

2.はじめに

DockerでLaravel+Vue.jsの実行環境を構築する方法をまとめます。

この記事は
絶対に失敗しないDockerでLaravel+Vueの実行環境（LEMP環境）を構築する方法〜前編〜
の後編です。

前編を読んでない方はまず前編を読んでいただければと思います。

前編の続きで以下についてまとめます。

  • Dockerfileを作成する（PHPコンテナのイメージの設計書）
  • Nginxの設定ファイルを作成する
  • イメージの構築（build)
  • コンテナの起動（up)
  • Laravelをインストールする
  • Vue.jsをインストール

3.ディレクトリ構造（完成形）

my-application(*)
├─ docker(*)
│    ├─ php(*)
│    │   └─ Dockerfile
│    └─ nginx(*)
│        └─ default.conf
│
├─ laravel-vue-app(*)
│    └─ ここにLaravelのPJディレクトリが作られる
│    
└─ docker-compose.yml

(*)のディレクトリ名は任意。

4.Dockerfileを作成する（PHPコンテナのイメージの設計書）

PHPコンテナには以下のインストールが必要

  • Laravelをインストールするためのパッケージ管理ツールComposer
  • Vue.jsをインストールするためのパッケージ管理ツールnpm

※フロントエンドにVue.jsを使わない場合は該当箇所は追記せずに進めてもらってOKです。
※例えばフロントエンドはJavaScript、jQueryのみの場合とか

上記の通り、カスタマイズしたイメージを使うのでイメージの設計書であるDockerfileを作成します。

4-1.Dockerfileの完成形

以下のphpディレクトリ（名前は任意）配下にDockerfileを作成してください。（拡張子不要）

my-application
├─ docker
│    ├─ php
│    │   └─ Dockerfile←ココ

完成形のDockerfileが以下です↓

Dockerfile
#イメージのベースを指定
FROM php:7.4-fpm

#composerのインストール
COPY --from=composer:1.10 /usr/bin/composer /usr/bin/composer

#npmのインストール
COPY --from=node:10.22 /usr/local/bin /usr/local/bin
COPY --from=node:10.22 /usr/local/lib /usr/local/lib

#パッケージ管理ツールapt-getの更新と必要パッケージのインストール
RUN apt-get update \
&& apt-get install -y \
git \
zip \
unzip \
&& docker-php-ext-install pdo_mysql bcmath

WORKDIR /var/www/html

#コンテナ内に入った時のディレクトリを指定
WORKDIR /var/www/html

Dockerfileの内容の詳しい説明は割愛します（というか自信がないw）が、ざっくり説明します。

4-2.イメージのベースを指定

FROM php:7.4-fpm

今回構築するPHPコンテナはphp:7.4-fpmのイメージをベースに作成します。
（最新のPHP7.4系ベース）

##4-3.composerをインストール

#composerをインストール
COPY --from=composer:1.10 /usr/bin/composer /usr/bin/composer

LaravelはComposerというパッケージ管理ツールでインストールするのでComposerをインストールします。

この方法はマルチステージビルドという方法らしいです。（まだちゃんと調べてないので説明できない...）

以下の方法を参考（というかそのままw）

Docker に Composer をインストールするベストプラクティス（と解説）
Composer公式HP

4-4.npmインストール

#npmインストール
COPY --from=node:10.22 /usr/local/bin /usr/local/bin
COPY --from=node:10.22 /usr/local/lib /usr/local/lib

※フロントエンドにVue.jsを使わない方はこちらは飛ばしてOKです。

なお、npm、Vue.jsのインストールにはこちらの記事を参考にしましたので合わせて読んでいただければと思います。

お手軽laravel Vue.js docker-compose環境構築

※npmのインストールもComposer同様マルチステージビルドを使ってます。

4-5.パッケージ管理ツールapt-getの更新と必要パッケージのインストールなど

RUN apt-get update \
&& apt-get install -y \
git \
zip \
unzip \
&& docker-php-ext-install pdo_mysql bcmath

Docker for Macの場合はapt-getというパッケージ管理ツールを使って必要なパッケージ・ライブラリをインストールします。
その前に一度apt-getを最新にするために

RUN apt-get update

を実行してます。（RUNでイメージ構築時にLinuxコマンドを実行します）

また、以下のコードでPHP拡張モジュールをインストールします。

&& docker-php-ext-install pdo_mysql bcmath

4-7.コンテナ内に入った時のディレクトリを指定

WORKDIR /var/www/html

WORKDIRはWork Directoryの略で、PHPコンテナ（app）に入った時のカレントディレクトリになります。
つまり、docker-compose exec app bashでappコンテナの中に入った場合、/var/www/htmlがカレントディレクトリになります。

Laravelで使うコマンドである$ php artisan　〜を使うためには、後に作るlaravel-vue-appディレクトリに移動する必要があるので、/var/www/htmmlを/var/www/html/laravel-vue-appに変更しても問題ありません。
(その時はdocker-compose.ymlも変更必要）

4.Nginxの設定ファイルを作成する

次にNginxの設定ファイルdefault.confを、nginxディレクトリ配下に作成します。

my-application
├─ docker
│    ├─ php
│    │   └─ Dockerfile
│    └─ nginx
│        └─ default.conf←ココ

全体のコードはこちらです↓

default.conf
server {
    listen 80;

    root /var/www/html/laravel-vue-app/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;
    }
}

Nginxの設定ファイルはこちらを参考にしてます↓
（ソケット通信？とかの設定があるけど今回はスルー）

Laravel 6.x デプロイ（サーバー設定）

この設定ファイルで注意するところは2箇所です。
まず1つ目はこちら↓

    listen 80;

docker-compose.ymlで設定したportsオプションのコンテナ側のポート番号と一致させてください。

  web:
    image: nginx:1.18
    ports:
      - '8000:80'←ココ

2つ目は

    root /var/www/html/laravel-vue-app/public;
    index index.php index.html index.htm;

ここはLaravelのプロジェクトファイルを作成するディレクトリを使います。

my-application(*)
├─ docker(*)
│    ├─ php(*)
│    │   └─ Dockerfile
│    └─ nginx(*)
│        └─ default.conf
│
├─ laravel-vue-app(*)←ココ
│    └─ ここにLaravelのPJディレクトリが作られる

今回はlaravel-vue-appというディレクトリにしているので

/var/www/html/larave-vue-app/public;

ですね。

（laravel-vue-appディレクトリはLaravelのインストール時に自動的に作られるので今作っておく必要はありません）

/var/www/htmlはdocker-compose.ymlのappコンテナでもローカルと対応づけしてましたよね。

  app:
    build: ./docker/php
    volumes:
      - .:/var/www/html←ココ

ローカルの./laravel-vue-appつまりmy-application/laravel-vue-appは/var/www/html/laravel-vue-appと対応付けされます。（これをマウントするとも言います）

ちなみにpublicはLaravelのプロジェクトを作成すると自動的に作られます。

2行目のこちら↓ですが、**「Nginxにアクセスした時に初めに/public/index.phpが処理されます」**という設定です。

index index.php index.html index.htm;

index.phpがなければindex.htmlが、それもなければindex.htmが処理されますが、index.phpがないことはないのでindex.phpだけでもいいかもしれませんが念のために書いておきます。

Laravelプロジェクトでpublic/index.phpがどのような処理をしているかはこちらの記事に詳しく書いてますが、環境構築するに当たってはあまり必要ないかなと思います。

public/index.phpからミドルウェア/コントローラーが実行されるまで - Laravelコードリーディング

これで環境構築に必要な各種設定ファイルの作成は終了です！
（長かったですね...お疲れ様です）

5.イメージの構築（build）

それではまずはDockerfileからイメージを構築します。

ターミナルでmy-applicationディレクトリに移動します。

$ cd my-application

配下のディレクトリ・ファイルを確認します。

$ ls

ここで以下の表示が出ればOKです。

docker    docker-compose.yml

docker-composeコマンドは`docker-compose.ymlがあるディレクトリでなければ実行できません。

それでは以下のコマンドでイメージを構築（build）します。

$ docker-compose build

時間がかかると思いますが、以下の表示が出ればbuild成功です。

Successfully built 27d58ffbe8e1
Successfully tagged my-application_app:latest

これでPHPコンテナ用のイメージが完成です。
（他のコンテナは既存のイメージをそのまま使うのでbuild不要）

※builtの後の数字がランダムなので人それぞれ変わります。

6.コンテナの起動（up)

それではイメージを元にコンテナを起動します。

docker-compose buildを実行したディレクトリで以下のコマンドを実行します。

$ docker-compose up -d

実行後、以下の表示が出ればコンテナの起動は完了です。

Creating network "my-application_default" with the default driver
Creating volume "my-application_mysql-volume" with default driver
Creating my-application_app_1 ... done
Creating my-application_db_1  ... done
Creating my-application_web_1 ... done

これで各コンテナの起動完了です。

7.Laravelのインストール

構築したDocker環境にLaravelをインストールします。
以下の手順で進めます。

  • Composerのバージョン確認
  • Laravelの新規プロジェクト作成

7-1.Composerのバージョン確認

まずはComposerがインストールできているか確認します。
（これはLaravelのインストールに必要というよりLaravelの新規プロジェクトを作成できる状態なのか、の確認です）

先ほどまでと同じディレクトリで以下のコマンドを実行し、appコンテナの中に入ります。

$ docker-compose exec app bash

実行すると以下のように/var/www/htmlディレクトリに変わります。（これは既にコンテナ内部にいます）

root@d1138847703d:/var/www/html#

以下のコマンドでComposerのバージョンを確認します。

$ composer --version
Composer version 1.10.10 2020-08-03 11:35:19

上記のようにバージョンが表示されたらOKです。

7-2.Laravelの新規プロジェクトを作成

ディレクトリは変えずに（/var/www/htmlで）以下のコマンドを実行します。

composer create-project --prefer-dist "laravel/laravel=6.8.*" laravel-vue-app

これでLaravel6.8を指定してlaravel-vue-appという新規プロジェクトが作成されます。

laravel-vue-appというディレクトリも一緒にmy-applicationディレクトリに配下に作成され、コンテナ内の/var/www/htmlディレクトリ配下にマウントされます。

Laravelの5系を使いたい方は6.8のところを適宜変えてください。
（ただし、動作確認はこちらではしていませんのでご了承ください）

時間がかかりますが、以下のコマンドが表示されればOKです。

Package manifest generated successfully.

その後に以下のコマンドが表示されていても問題ありません。

39 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.

ローカルのmy-application配下及びコンテナの/var/www/html配下にlaravel-vue-appディレクトリとlaravelプロジェクトのディレクトリがたくさんできています。

スクリーンショット 2020-08-09 16.44.37.png

7-3.LaravelとMySQLとの接続を設定する

Laravleでの開発が行えるようにMySQLとの接続を設定します。

エディターでlaravel-vue-appを開いて.envを開きます。

9〜14行目からを以下のように修正します↓

DB_CONNECTION=mysql
DB_HOST=db（←コンテナ名）
DB_PORT=3306（←コンテナ側のポート番号）
DB_DATABASE=db_name
DB_USERNAME=db_user
DB_PASSWORD=db_password

これはdocker-compose.ymlのdbコンテナの設定と合わせます。

  db:
    image: mysql:5.7
    ports:
      - '3306:3306'
    environment:
      MYSQL_DATABASE: db_name
      MYSQL_USER: db_user
      MYSQL_PASSWORD: db_password

.envの5行目も以下の通り修正します。

APP_URL=http://localhost:8000

以下、環境構築に限って言うとしなくてOKです。
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜ここから〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
次にコンテナ内でlarave-vue-appディレクトリに移動します。

$ cd laravel-vue-app

そこで以下のコマンドを実行します

$ php artisan migrate

以下のコマンドが表示されればOKです。

Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (0.07 seconds)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table (0.04 seconds)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated:  2019_08_19_000000_create_failed_jobs_table (0.02 seconds)

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜ここまで〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

では、一度コンテナから出て、再度コンテナの停止（破壊も行われる）・起動を実行します。

$ exit
$ docker-compose down
$ docker-compose up -d

ブラウザでlocalhost:8000にアクセスするとLaravelのページが表示されます。

これで <font color="Red">Dockerを使ったlaravelの実行環境（LEMP環境）の構築は完了</font>です！

<img width="1440" alt="スクリーンショット 2020-08-09 17.12.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512695/be869165-a8e9-0f22-4444-5b640fadeeb5.png">

8.Vue.jsのインストール

次にVue.jsを使えるようにします。

laravel-vue-app配下のpackage.jsonの19行目から以下の通り編集します。

package.json
        "sass-loader": "^7.1.0",（←カンマ追記）
        "vue": "^2.6.11",（←追記）
        "vue-template-compiler": "^2.6.11"（←追記）

追記したらappコンテナに入り、laravel-vue-appに移動します。

$ docker-compose exec app bash
$ cd laravel-vue-app

以下のコマンドを実行します。

$ npm install

これでVue.jsのインストールも完了です。

Vue.jsのインストール自体はこれで終わりですが、実際にVue.jsを使う場合は以下の手順が必要です。

  • Vueコンポーネントを作る
  • laravel-vue-app/resources/js/app.jsの編集

上記2つの手順は以下の記事を見ながらやりましょう↓

LaravelのBladeにVueコンポーネントを組み込む

9.まとめ

これで<font color="Red">DockerでLaravel6.8+Vueの実行環境（LEMP環境）の構築</font>ができました。

この記事のソースはGitHubにあげていますので必要あれば参照ください↓

間違っていることや不明点があればお気軽にコメントいただければと思います。

前編はこちら↓
絶対に失敗しないDockerでLaravel6.8+Vueの実行環境（LEMP環境）を構築する方法〜前編〜