Dockerを使用してLAMP環境の構築(Laravel Breeze, Vue.js3)
環境構築
以下の環境をDockerで作成する。
- mysql5.7
- phpmyadmin
- apache2.4
- PHP 8.1.11
- Laravel Framework 8.83.25
- Laravel Breeze 1系の最新版
- vue@3.2.36
ディレクトリ構成
ディレクトリを作成し、docker-compose.yml
を作成。
laravelのソースをumarche/
ディレクトリに作成し、dockerコンテナにマウントされるようにする。
設定ファイルとMySQLのデータが保存されるdbディレクトリ作成。
phpとapacheのDockerfile
はapp/
ディレクトリに作成する。
docker-compose.yml
でapacheとphpをDBと連携させる。
Dockerfileの設定
apacheとphpのDockerfileを作成
phpとapacheが入った状態でlaravelモジュールのインストールとCurlでcomposerをインストールする。
laravelのビルドにnode.jsを使用するので記述。
# image FROM php:8.1-apache # Laravelの依存PHPモジュールのInstall # Laravelで必要なmodRewriteを有効化 RUN apt update \ && apt-get install -y wget git unzip libpq-dev libfreetype6-dev libjpeg62-turbo-dev libpng-dev \ && mv /etc/apache2/mods-available/rewrite.load /etc/apache2/mods-enabled # Install MySQL RUN docker-php-ext-install pdo pdo_mysql # コンテナの作業ディレクトリを指定 WORKDIR /var/www/html # Install Composer RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer # Install xdebug RUN pecl install xdebug \ && docker-php-ext-enable xdebug # Install node.js,InterventionImage RUN curl -fsSL https://deb.nodesource.com/setup_lts.x | bash - \ && apt-get install -y nodejs \ && docker-php-ext-install -j$(nproc) gd \
apacheの設定ファイルの作成
Laravelのドキュメントルートを設定するので、apacheの設定ファイル作成する。
コンテナの/etc/apache2/sites-enabled/000-default.conf
にマウントさせる。
- nginxとの違い
Nginxの場合は、php-fpm(アプリケーションサーバー)とコンテナを2つに分けているが
Apacheの場合は、mod_phpというモジュールがデフォルトでインストールされており、PHPを実行してくれるアプリケーションサーバー兼ウェブサーバーとして1つのコンテナにすることができる。
# apache設定ファイル <VirtualHost *:80> ServerName laravel_docker DocumentRoot /var/www/html/public <Directory "/var/www/html/public"> AllowOverride All </Directory> ErrorLog ${APACHE_LOG_DIR}/error.log CustomLog ${APACHE_LOG_DIR}/access.log combined </VirtualHost>
docker-compose.ymlの作成
DBとphpmyadminを記述。
web_1
servicesでapacheとphpの環境をビルドし、umarche/
をコンテナ内の/var/www/html/
にマウントする。
apacheはコンテナ内の/etc/apache2/sites-enabled/
配下にconfファイルを設置することで設定を追加したりオーバーライドできる。
phpmyadmin
servicesでphpmyadminを起動してDBをGUIで編集できるようにする。
db
servicesではmysqlの環境を作成。ボリュームの設定をして永続化を行い、以上の設定を行ったらコンテナを立ち上げる。
version: '3' services: # php-apacheコンテナ web_1: container_name: laravel_umarche # Dockerfileを使って、コンテナをビルドするpath。web_umarcheディレクトリに宣言されたDockerfileがコンテナのビルドに使用される。 build: ./web_umarche/app # php-apacheコンテナの前にまずDBコンテナをビルドする必要があることをDockerに認識 depends_on: - db # コンテナとホスト側のディレクトリをマウントする volumes: # laravelのソースが入るpath - ./umarche/:/var/www/html/ # Apacheによりデフォルトで有効化されている000-default.confホストとアプリケーションの仮想ホストの設定をリンク - ./web_umarche/app/default.conf:/etc/apache2/sites-enabled/000-default.conf # php.iniにxdebugのport設定 - ./web_umarche/app/php.ini:/usr/local/etc/php/php.ini # コンテナ内部80番portを開いて、ホストの8005番にポートフォワーディング ports: - "8005:80" phpmyadmin: container_name: phpmyadmin image: phpmyadmin restart: always #コンテナ内部80番portを開いて、ホストの8080番にポートフォワーディング ports: - "8080:80" #自動ログイン環境設定、host、ログイン情報指定 environment: # 1に設定すると任意のサーバーへの接続が許可される - PMA_ARBITRARY=1 # SQLサーバーのportの設定 - PMA_HOST=db:3306 # SQLサーバーに接続するユーザー名 - PMA_USER=root # SQLサーバーに接続するユーザーのパスワード - PMA_PASSWORD=rootroot db: container_name: mysql # DockerHubからMySQL5.7イメージをDLしてくる指定 image: mysql:5.7 # 起動時のコマンド command: mysqld --character-set-server=utf8 --collation-server=utf8_unicode_ci # コンテナ内の環境変数→.envにも記載 environment: MYSQL_DATABASE: laravel_umarche MYSQL_USER: docker MYSQL_PASSWORD: root MYSQL_ROOT_PASSWORD: rootroot TZ: Asia/Tokyo # mysqlはデフォルトで3306port ports: - "3311:3306" # 設定ファイルとMySQLのデータが保存されるpathをマウント。コンテナは基本的に起動時に変更されてもコンテナ自体が止まるとデータが消えてしまうため、保存しておきたいものはホストマシンと同期しておく必要がある。 volumes: - ./web_umarche/db/data:/var/lib/mysql - ./web_umarche/db/my.cnf:/etc/mysql/conf.d/my.cnf
コンテナの立ち上げ
$ docker-compose down && docker-compose build && docker-compose up
立ち上がったら、web_1コンテナの中にはいる。
$ docker exec -it laravel_umarche /bin/bash
laravelをインストール、versionを指定しないと最新になるので指定する。
root@6931f1f75faf:/var/www# composer root@20cbaa7c67c0:/var/www/html# composer create-project --prefer-dist "laravel/laravel=8.*" .
これで/var/www/html
配下にLaravelプロジェクトが入る。コンテナの /var/www/html
はホストマシンのumarche/
に同期される
umarche/
配下にソースが生成されたのを確認できたら、.env
ファイルにDBの接続設定を記述する。
DB_CONNECTION=mysql #コンテナ名 DB_HOST=mysql #内部ポートを指定 DB_PORT=3306 #データベース名 DB_DATABASE=laravel #ユーザ名 DB_USERNAME=root #パスワード DB_PASSWORD=rootroot
DB_HOSTはdocker-compose.ymlのDBのサービス名を入力。
DB_DATABASEは、docker-compose.ymlのMYSQL_DATABASEを入力。
設定したらブラウザでlocalhost:8005にアクセス
Laravel Bleezeとvuejs3の導入
- breezeインストール時、追加・追記ファイル群
1: App/models/User.php→認証機能が追加される
use Illuminate\Foundation\Auth\User as Authenticatable;
class User extends Authenticatable
2: resources/css/app.css→tailwindcssを読み込み
resources/js/app.js→Alpine.jsを読み込む
3: resources/views/auth→認証関係、ログイン、登録など
4: App/View/components 、resources/views/components →たくさんの機能を部品化してたくさんのページで挿入できるようにしている
5: resources/views/layouts
resources/views/dashboard.blade.php
バージョンを指定しないとエラーになる。これでもエラーになるならパッケージjsonに直接かいてcomposer updateする。
composer require laravel/breeze "1.*" --dev
root@20cbaa7c67c0:/var/www/html# php artisan breeze:install
root@20cbaa7c67c0:/var/www/html# npm install
root@20cbaa7c67c0:/var/www/html# npm run dev
root@3ea1c3ec81ce:/var/www/html# php artisan migrate
マイグレーションが完了したらlaravelの構築は完了。
vite.config.jsファイル削除
2022/6/28:Laravel9.18:Viteに変更されたのでBreezeインストール時にViteが適応される
Laravel8を使い場合、mix.jsとvite.configの2つあるviteのほうを削除し、viewを書き換えないとログイン画面と登録画面のレイアウトが崩れる。
view側の@viteを削除し、下記に変更。
<!-- Scripts --> {{-- @vite(['resources/css/app.css', 'resources/js/app.js']) --}} <link rel="stylesheet" href="{{asset('css/app.css')}}"> <script src = "{{asset('js/app.js')}}" defer></script>
vue.js3
Vue.js2関連のライブラリをアンインストール
npm uninstall vue npm uninstall vue-loader npm uninstall vue-template-compiler
Vue.js3に関連するライブラリをインストール
npm install -D vue@next npm install -D @vue/compiler-sfc npm install -D vue-style-loader npm install -D vue-loader@16.1.2
package.json
にvueが追加される。
"devDependencies": { "@tailwindcss/forms": "^0.5.2", "@vue/compiler-sfc": "^3.2.41", "alpinejs": "^3.4.2", "autoprefixer": "^10.4.2", "axios": "^0.21", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", "postcss": "^8.4.6", "tailwindcss": "^3.1.0", "vue": "^3.2.36", "vue-loader": "^16.8.3", "vue-style-loader": "^4.1.3" }, "dependencies": { "vue-router": "^4.1.6" }
webpack.mix.js
に追記
mix.js('resources/js/app.js', 'public/js') .postCss('resources/css/app.css', 'public/css', [ // ]) .vue();
$ npm run dev
でビルド→vue-loaderなどがpackage.jsonに追加される
以下、エラーが出た場合はvue-loaderが古いのでnpm i vue-loader
を実行し再度npm run dev
もう一度ビルドするとapp.js,app.cssが作成される。
viewファイルの作成
<html> <body> <div id="counter"> カウント: @{{ counter }} </div> <script src="{{ mix('js/app.js') }}"></script> </body> </html>
bladeの中の{{ xxx }}は、Laravelの変数を扱うことができ、サーバーサイドでレンダリングできる。
Vue側も {{ number }} という文字列をレンダリングに使用するため、先頭に@を追加し、@{{ number }} と記述する。
bladeが@を削除し、HTML上ではそのまま {{ number }} が表示される。
resources\js\bootstrap.js
へ以下を追加するとvueが使えるようになる
window.Vue = require("vue");
resources\js\app.js
に記述。
import Alpine from 'alpinejs'; window.Alpine = Alpine; Alpine.start(); import './bootstrap'; require("./bootstrap"); const Counter = { data() { return { counter: 0, }; }, mounted() { setInterval(() => { this.counter++; }, 999); }, }; Vue.createApp(Counter).mount("#counter");
ルーティングの定義
Route::get('/vue', function () { return view('vue'); });
ビルドする→npm run dev
http://localhost:8005/vueへアクセス