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ディレクトリ作成。
phpapacheDockerfileapp/ディレクトリに作成する。
docker-compose.ymlapachephpをDBと連携させる。

Dockerfileの設定

apachephpのDockerfileを作成
phpapacheが入った状態で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でapachephpの環境をビルドし、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へアクセス