絶対に失敗しないDockerでLaravel6.8+Vueの実行環境(LEMP環境)を構築する方法〜後編〜
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が以下です↓
#イメージのベースを指定
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←ココ
全体のコードはこちらです↓
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の設定ファイルはこちらを参考にしてます↓
(ソケット通信?とかの設定があるけど今回はスルー)
この設定ファイルで注意するところは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プロジェクトのディレクトリがたくさんできています。
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行目から以下の通り編集します。
"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つの手順は以下の記事を見ながらやりましょう↓
9.まとめ
これで<font color="Red">DockerでLaravel6.8+Vueの実行環境(LEMP環境)の構築</font>ができました。
この記事のソースはGitHubにあげていますので必要あれば参照ください↓
間違っていることや不明点があればお気軽にコメントいただければと思います。
前編はこちら↓
絶対に失敗しないDockerでLaravel6.8+Vueの実行環境(LEMP環境)を構築する方法〜前編〜