【Docker】Laravel+Nuxt.js+apache+mysqlで開発環境作ってdocker-composeに入門してみる
2020-09-15
ディレクトリ構成
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
project ├ docker │ ├── api │ │ ├── php.ini │ │ ├── start.sh (composer install・php artisan serve用) │ │ └── Dockerfile │ ├──mysql │ │ └── my.cnf │ ├──ui │ │ └── Dockerfile │ └── apache │ ├── http.conf │ └── Dockerfile ├── ui (Nuxt.js) ├── api(Laravel) ├── logs(ログファイル用フォルダ) └── docker-compose.yml |
Laravelのインストール
projectディレクトリ直下で、composerを使ってLaravelインストーラをダウンロードしておきます。
|
1 |
composer global require laravel/installer |
laravelコマンドでLaravelをインストール
|
1 |
laravel new api |
apiディレクトリの下に、最新版のLaravelがインストールされていることを確認します。
Nuxt.jsのインストール
projectディレクトリ直下で、vue-cli を使ってNuxt.jsをインストールしておきます。（Node.jsのバージョンは公式を確認しながら、よしなに）
|
1 |
vue init nuxt-community/starter-template ui |
uiディレクトリの下に、最新版のNuxtがインストールされていることを確認します。
apacheでwebサーバを立てる
将来的に、80番ポートでNuxt.jsへアクセスするためにapacheを入れます(リバースプロキシを使用)
LaravelはNuxt.js経由でアクセスする予定なので、apacheコンテナが必要ない場合は、apacheコンテナは必要なし。
１．apacheが正常に動作しているかの確認のため、project直下にindex.htmをおいておきます。
■project/index.html
|
1 2 3 4 5 6 |
<header> <meta http-equiv="content-type" charset="utf-8"> </header> <body> <h1>動いたー！</h1> </body> |
２．project直下にdocker-compose.ymlを作成します。
■project/docker-compose.yml
|
1 2 3 4 5 6 7 8 9 10 11 12 |
version: '3' services: web: ports: #ポートを公開する(ホスト:コンテナ) - '8000:80' #8000でアクセスされたら、80を使用する - '8080:8080' build: ./docker/web/ #Dockerfileが存在するディレクトリの相対パス volumes: #コンテナと共有したいパスを指定 - ./index.html:/var/www/html/index.html #確認用のhtmlをコンテナ側の/var/wwww/html配下にマウントする # - ./docker/web/httpd.conf:/usr/local/apache2/conf/httpd.conf #httpd.confを上書きする ★コメントアウトしておく # - ./logs:/usr/local/apache2/logs/httpd/ # コンテナに入らず、apacheのlogを見るためマウントしとく ★コメントアウトしておく |
３．apacheのイメージを作成するため、Dockerfileを作成します。
■project/docker/web/Dockerfile
|
1 2 3 4 5 6 7 8 9 10 11 |
# 軽量らしいのでOSは、Alpine Linuxを選択 # https://hub.docker.com/_/httpd FROM httpd:2.4-alpine # timezoneをAsia/Tokyoに設定する RUN apk --no-cache add tzdata && \ cp /usr/share/zoneinfo/Asia/Tokyo /etc/localtime && \ apk del tzdata # コンテナの80番と8080番ポートを開く（8080はNuxt用） EXPOSE 80 8080 |
４．一度起動します。
以下コマンドで、イメージの作成・コンテナの作成・起動をいっぺんに行います。
( up でコンテナの作成&起動、 -d で、バッググラウンドで起動、 --build をつけることで起動前にイメージも構築)
|
1 |
docker-compose up -d --build |
５．http://localhost:8000にアクセスし、動作確認
動いていることは確認できたので、apacheの設定がどのようにされているのかを確認。
以下コマンドで、webコンテナの中に入れます。
|
1 |
docker-compose exec web bash |
調べた結果、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を作っていきます。
６．/usr/local/apache2/conf/httpd.confをコピーしてきて、プロジェクト用設定を追記する
■project/docker/web/httpd.conf
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
########以下を追記############ <VirtualHost *:80> ServerName localhost DocumentRoot /var/www/html/ <Directory /var/www/html/> AllowOverride All Options SymLinksIfOwnerMatch Require all granted Allow from all </Directory> ErrorLog logs/error.log CustomLog logs/access.log combined </VirtualHost> |
7．http://localhost:8000にアクセスし、動作確認
７−１．コンテナを落とす
|
1 |
docker-compose down |
７−２．docker-compose.ymlのコメントアウトを外す
７−３．起動
|
1 |
docker-compose up -d --build |
７−４．確認
OK。(logsにapacheのログが同期されていることも確認)
Nuxt.js用コンテナを作成
webコンテナのapacheでリバースプロキシを使えるようにする。
Nuxt.jsコンテナは3000ポートを使用するが、apacheのリバースプロキシを使用して8080ポートでアクセスできるようにします。
１．project/docker/web/httpd.confで、以下のコメントアウトを外す。
|
1 2 |
LoadModule proxy_module modules/mod_proxy.so LoadModule proxy_http_module modules/mod_proxy_http.so |
これでリバースプロキシを使用できるように。
２．project/docker/web/httpd.confの末尾に以下を追加
|
1 2 3 4 5 6 7 8 9 |
Listen 8080 <VirtualHost *:8080> ServerName localhost ErrorLog logs/httpd/error_ui.log CustomLog logs/httpd/access_ui.log combined ProxyRequests Off ProxyPass / http://ui:3000/ ProxyPassReverse / http://ui:3000/ </VirtualHost> |
Nuxt.jsのDockerfileを作る。
■project/docker/ui/Dockerfile
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
# 2020/03/13 時点での推奨版 12.16.1のnode.js使用 # 軽量らしいのでOSは、Alpine Linuxを選択 # https://hub.docker.com/_/node/ FROM node:12.16-alpine # 環境変数 ENV LANG C.UTF-8 ENV TZ Asia/Tokyo ENV APP_HOME /app ENV PATH ${APP_HOME}/node_modules/.bin:$PATH ENV HOST 0.0.0.0 ENV PORT 3000 WORKDIR ${APP_HOME} ADD ui ${APP_HOME} # apk アップデート RUN apk update \ && apk upgrade \ && yarn global add @vue/cli \ && yarn install \ && rm -rf /var/cache/apk/* EXPOSE 3000 CMD ["yarn", "dev"] |
docker-compose.ymlに、Nuxt.jsコンテナ分を追記する。
■project/docker-compose.yml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
version: '3' services: web: build: ./docker/web/ #Dockerfileが存在するディレクトリの相対パス ports: #ポートを公開する(ホスト:コンテナ) - '8000:80' #8000でアクセスされたら、80を使用する - '8080:8080' #8080でアクセスされたら、80を使用する volumes: #コンテナと共有したいパスを指定 - ./index.html:/var/www/html/index.html #確認用のhtmlをコンテナ側の/var/wwww/html配下にマウントする - ./docker/web/httpd.conf:/usr/local/apache2/conf/httpd.conf #httpd.confを上書きする - ./logs:/usr/local/apache2/logs/httpd/ # コンテナに入らず、apacheのlogを見るためマウントしとく depends_on: # Service同士の依存関係を指定 - ui #`docker-compose run`した際にapacheより前にuiコンテナが実行される links: #他のコンテナに接続する(コンテナのhostsに追加される) - ui ui: build: context: ./ dockerfile: ./docker/ui/Dockerfile volumes: - ./ui:/app |
http://localhost:8080にアクセスし、動作確認
コンテナは落としておく
|
1 |
docker-compose down |
起動
|
1 |
docker-compose up -d --build |
確認
OK
Laravel用コンテナを作成
Laravel用のDockerfileを作る。
■project/docker/api/Dockerfile
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
# https://hub.docker.com/_/php FROM php:7.4-fpm-alpine COPY docker/api/php.ini /usr/local/etc/php/ COPY docker/api/start.sh /var/www/ RUN chmod 744 /var/www/start.sh # setting working directory to source code root WORKDIR /var/www/html # 各種パッケージ追加 RUN apk --no-cache update && \ apk --no-cache upgrade && \ apk --no-cache add \ freetype-dev libjpeg-turbo-dev libpng-dev libxml2-dev \ git vim unzip tzdata \ zlib-dev pcre-dev curl-dev oniguruma-dev\ && docker-php-ext-install pdo_mysql mysqli mbstring gd iconv \ && docker-php-ext-enable mysqli \ # timezoneをAsia/Tokyoに設定する && cp /usr/share/zoneinfo/Asia/Tokyo /etc/localtime \ && apk del tzdata \ && rm -rf /var/cache/apk/* # install composer RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer ENV TZ=Asia/Tokyo EXPOSE 8000 CMD ["../start.sh"] |
docker-compose.ymlに、Nuxt.jsコンテナ分を追記する。
■project/docker-compose.yml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
version: '3' services: web: build: ./docker/web/ #Dockerfileが存在するディレクトリの相対パス ports: #ポートを公開する(ホスト:コンテナ) # - '8000:80' #8000でアクセスされたら、80を使用する ★laravelのポートとかぶるのでコメントアウト - '8080:8080' #8080でアクセスされたら、80を使用する volumes: #コンテナと共有したいパスを指定 - ./index.html:/var/www/html/index.html #確認用のhtmlをコンテナ側の/var/wwww/html配下にマウントする - ./docker/web/httpd.conf:/usr/local/apache2/conf/httpd.conf #httpd.confを上書きする - ./logs:/usr/local/apache2/logs/httpd/ # コンテナに入らず、apacheのlogを見るためマウントしとく depends_on: # Service同士の依存関係を指定 - ui #`docker-compose run`した際にapacheより前にuiコンテナが実行される links: #他のコンテナに接続する(コンテナのhostsに追加される) - ui ui: build: context: ./ dockerfile: ./docker/ui/Dockerfile volumes: - ./ui:/app api: build: context: ./ dockerfile: ./docker/api/Dockerfile ports: - '8000:8000' volumes: - ./api:/var/www/html |
php.iniを準備
Dockerfileの COPY docker/api/php.ini /usr/local/etc/php/でコンテナにコピーしている。
■project/docker/api/php.ini
|
1 2 3 4 5 |
[Date] date.timezone = "Asia/Tokyo" [mbstring] mbstring.internal_encoding = "UTF-8" mbstring.language = "Japanese" |
start.shを準備
Dockerfileの COPY docker/api/start.sh /var/www/でコンテナにコピーし、
最後の CMD ["../start.sh"]で、実行している。参考）Dockerで複数CMDを実行する方法 | エンジニアの眠れない夜
■project/docker/api/start.sh
|
1 2 |
composer install php artisan serve --host 0.0.0.0 |
http://localhost:8000にアクセスし、動作確認
envファイルの準備をしておく
|
1 |
cp api/.env.example api/.env |
envを設置したら、composer installと、
|
1 |
docker-compose exec api composer install |
encryption keyを設定する（このまま確認すると、No application encryption key has been specifiedエラーになる）
|
1 |
docker-compose exec api php artisan key:generate |
コンテナをいったん落として（project/docker/api/start.shを動かすため）
|
1 |
docker-compose down |
起動
|
1 |
docker-compose up -d --build |
確認
OK
今は環境構築のため、外部ホストから8000ポートにアクセスできるようにしていますが、
Nuxtとのつなぎ込みがおわったら、docker-compose.ymlの
|
1 2 |
ports: - '8000:8000' |
を削除してuiコンテナからのみアクセス可能にします。
mysql用コンテナを作成
次はphp-fpmのコンテナを作成します。
１．docker-compose.ymlにDB用の記述を追加
■project/docker/docker-compose.yml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
version: '3' services: web: build: ./docker/web/ #Dockerfileが存在するディレクトリの相対パス ports: #ポートを公開する(ホスト:コンテナ) # - '8000:80' #8000でアクセスされたら、80を使用する ★laravelのポートとかぶるのでコメントアウト - '8080:8080' #8080でアクセスされたら、80を使用する volumes: #コンテナと共有したいパスを指定 - ./index.html:/var/www/html/index.html #確認用のhtmlをコンテナ側の/var/wwww/html配下にマウントする - ./docker/web/httpd.conf:/usr/local/apache2/conf/httpd.conf #httpd.confを上書きする - ./logs:/usr/local/apache2/logs/httpd/ # コンテナに入らず、apacheのlogを見るためマウントしとく depends_on: # Service同士の依存関係を指定 - ui #`docker-compose run`した際にapacheより前にuiコンテナが実行される links: #他のコンテナに接続する(コンテナのhostsに追加される) - ui ui: build: context: ./ dockerfile: ./docker/ui/Dockerfile volumes: - ./ui:/app depends_on: - api links: - api api: build: context: ./ dockerfile: ./docker/api/Dockerfile ports: - '8000:8000' volumes: - ./api:/var/www/html depends_on: - db links: - db db: image: mysql:8 volumes: - ./db-store:/var/lib/mysql - ./docker/mysql/my.cnf:/etc/mysql/conf.d/my.cnf - ./logs:/var/log/mysql ports: - "4306:3306" environment: - MYSQL_DATABASE=dev - MYSQL_USER=dev - MYSQL_PASSWORD=password - MYSQL_ROOT_PASSWORD=password |
２．Dockerイメージが作成&コンテナ起動
dockerディレクトリへ移動し、以下のdocker-composeコマンドを叩きます。
|
1 |
docker-compose up -d --build |
３．DB起動確認
まず、dbコンテナ状態を調べます。
|
1 2 3 4 5 6 7 8 |
$ docker-compose ps ------結果------ Name Command State Ports ---------------------------------------------------------------------------------------- anpy3_api_1 docker-php-entrypoint ../s ... Up 0.0.0.0:8000->8000/tcp, 9000/tcp anpy3_db_1 docker-entrypoint.sh mysqld Up 0.0.0.0:4306->3306/tcp, 33060/tcp anpy3_ui_1 docker-entrypoint.sh yarn dev Up 3000/tcp anpy3_web_1 httpd-foreground Up 80/tcp, 0.0.0.0:8080->8080/tcp |
dbコンテナに接続します。
|
1 |
docker-compose exec db bash |
mysqlコマンドでログインできれば成功です。
|
1 2 3 4 5 6 7 8 |
root@56485eb7e92b:/# mysql -u dev -p -------------------- Enter password: Welcome to the MySQL monitor. Commands end with ; or \g. Your MySQL connection id is 9 Server version: 8.0.19 MySQL Community Server - GPL Copyright (c) 2000, 2020, Oracle and/or its affiliates. All rights reserved. |
LaravelとDBを接続する
１．Laravelの.envファイルに、docker-compose.ymlで設定した接続情報を記述します。
■application/.env
|
1 2 3 4 5 6 |
DB_CONNECTION=mysql DB_HOST=db DB_PORT=3306 DB_DATABASE=dev DB_USERNAME=dev DB_PASSWORD=password |
DB_HOSTが、127.0.0.1ではなくdocker-compose.ymlの、
|
1 2 |
links: - db |
で設定している値を入れないとapiコンテナからアクセスできません。
DB_PORTも外からアクセスするポート4306ではなく、コンテナ同士の接続なので、3306を指定します。
２．apiコンテナ内でマイグレーションを行う。
|
1 2 3 4 5 6 7 8 9 10 |
$ docker-compose exec api sh -----以下、コンテナ内------ # php artisan migrate Migration table created successfully. Migrating: 2014_10_12_000000_create_users_table Migrated: 2014_10_12_000000_create_users_table Migrating: 2014_10_12_100000_create_password_resets_table Migrated: 2014_10_12_100000_create_password_resets_table |
マイグレーションが成功したら、成功です。
コレでようやく開発を始めらる！！！！
Nuxt.jsとlaravelの接続（ログイン機能作成まで）は別途
———–
この記事がお役に立てたら、是非シェアをお願いします^^
■さがっと
沖縄とタスク管理が大好きな1985年生まれ。
2015年に大手メーカー(SIer)から転職し、一端のWEBエンジニア目指してLaravel、Vue.jsなどなど現場で習得中です。
並行してタスク管理WEBサービスを設計中。
