【Docker】Laravel+Nuxt.js+apache+mysqlで開発環境作ってdocker-composeに入門してみる

2020-09-15

ディレクトリ構成

 

Laravelのインストール

projectディレクトリ直下で、composerを使ってLaravelインストーラをダウンロードしておきます。

laravelコマンドでLaravelをインストール

apiディレクトリの下に、最新版のLaravelがインストールされていることを確認します。

 

Nuxt.jsのインストール

projectディレクトリ直下で、vue-cli を使ってNuxt.jsをインストールしておきます。(Node.jsのバージョンは公式を確認しながら、よしなに)

uiディレクトリの下に、最新版のNuxtがインストールされていることを確認します。

 

apacheでwebサーバを立てる

将来的に、80番ポートでNuxt.jsへアクセスするためにapacheを入れます(リバースプロキシを使用)

LaravelはNuxt.js経由でアクセスする予定なので、apacheコンテナが必要ない場合は、apacheコンテナは必要なし。

 

1.apacheが正常に動作しているかの確認のため、project直下にindex.htmをおいておきます。

■project/index.html

 

2.project直下にdocker-compose.ymlを作成します。

■project/docker-compose.yml

 

3.apacheのイメージを作成するため、Dockerfileを作成します。

■project/docker/web/Dockerfile

 

4.一度起動します。

以下コマンドで、イメージの作成・コンテナの作成・起動をいっぺんに行います。

( up でコンテナの作成&起動、 -d で、バッググラウンドで起動、 --build をつけることで起動前にイメージも構築)

 

5.http://localhost:8000にアクセスし、動作確認

動いていることは確認できたので、apacheの設定がどのようにされているのかを確認。

以下コマンドで、webコンテナの中に入れます。

調べた結果、httpd.conf の場所は、 /usr/local/apache2/conf/httpd.confにありました。

httpd.conf の設定内容

・DocumentRootは、 /usr/local/apache2/htdocs (動作確認でみた「It works!」が表示されるindex.htmlが入っている)

・CustomLog 、 /proc/self/fd/1 common 、ErrorLogも /proc/self/fd/2 と標準出力になっている。

ここらへんの設定をお好みでカスタマイズしたら、http://localhost:8000で、project/index.htmlが表示されるようにhttpd.confを作っていきます。

 

6./usr/local/apache2/conf/httpd.confをコピーしてきて、プロジェクト用設定を追記する

■project/docker/web/httpd.conf

 

7.http://localhost:8000にアクセスし、動作確認

7−1.コンテナを落とす

7−2.docker-compose.ymlのコメントアウトを外す

7−3.起動

7−4.確認

OK。(logsにapacheのログが同期されていることも確認)

 

Nuxt.js用コンテナを作成

 

webコンテナのapacheでリバースプロキシを使えるようにする。

Nuxt.jsコンテナは3000ポートを使用するが、apacheのリバースプロキシを使用して8080ポートでアクセスできるようにします。

1.project/docker/web/httpd.confで、以下のコメントアウトを外す。

これでリバースプロキシを使用できるように。

 

2.project/docker/web/httpd.confの末尾に以下を追加

 

Nuxt.jsのDockerfileを作る。

■project/docker/ui/Dockerfile

 

docker-compose.ymlに、Nuxt.jsコンテナ分を追記する。

■project/docker-compose.yml

 

http://localhost:8080にアクセスし、動作確認

コンテナは落としておく

起動

確認

OK

 

 

Laravel用コンテナを作成

Laravel用のDockerfileを作る。

■project/docker/api/Dockerfile

docker-compose.ymlに、Nuxt.jsコンテナ分を追記する。

■project/docker-compose.yml

php.iniを準備

Dockerfileの COPY docker/api/php.ini /usr/local/etc/php/でコンテナにコピーしている。

 

■project/docker/api/php.ini

 

start.shを準備

Dockerfileの COPY docker/api/start.sh /var/www/でコンテナにコピーし、

最後の CMD ["../start.sh"]で、実行している。参考)Dockerで複数CMDを実行する方法 | エンジニアの眠れない夜

 

■project/docker/api/start.sh

 

http://localhost:8000にアクセスし、動作確認

envファイルの準備をしておく

 

envを設置したら、composer installと、

 

encryption keyを設定する(このまま確認すると、No application encryption key has been specifiedエラーになる)

コンテナをいったん落として(project/docker/api/start.shを動かすため)

起動

確認

OK

今は環境構築のため、外部ホストから8000ポートにアクセスできるようにしていますが、

Nuxtとのつなぎ込みがおわったら、docker-compose.ymlの

を削除してuiコンテナからのみアクセス可能にします。

 

mysql用コンテナを作成

次はphp-fpmのコンテナを作成します。

1.docker-compose.ymlにDB用の記述を追加

■project/docker/docker-compose.yml

 

2.Dockerイメージが作成&コンテナ起動

dockerディレクトリへ移動し、以下のdocker-composeコマンドを叩きます。

 

3.DB起動確認

まず、dbコンテナ状態を調べます。

dbコンテナに接続します。

mysqlコマンドでログインできれば成功です。

 

LaravelとDBを接続する

1.Laravelの.envファイルに、docker-compose.ymlで設定した接続情報を記述します。

■application/.env

DB_HOSTが、127.0.0.1ではなくdocker-compose.ymlの、

で設定している値を入れないとapiコンテナからアクセスできません。

DB_PORTも外からアクセスするポート4306ではなく、コンテナ同士の接続なので、3306を指定します。

 

2.apiコンテナ内でマイグレーションを行う。

マイグレーションが成功したら、成功です。

 

 

 

コレでようやく開発を始めらる!!!!

Nuxt.jsとlaravelの接続(ログイン機能作成まで)は別途

 

———–

この記事がお役に立てたら、是非シェアをお願いします^^