前提

WSL2(CentOS)
Laravel:8
nodeも使えるようなマルチビルドな構成にする

ファイル構成

docker-compose.yml

version: "3.8"
services:
  app:
    # どのポートを開いて繋ぐか。下記はコンテナの80番ポートを開いて、ホストの8000番につなぐ
    ports:
       - "50080:80" # localhost:50080
    build: ./docker/app
    container_name: app
    volumes:
      - ./src:/var/www/html
  db:
    build: ./docker/db
    container_name: laravel_db
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: laravel_db
      MYSQL_USER: laravel_user
      MYSQL_PASSWORD: laravel_pass
      TZ: 'Asia/Tokyo'
    # 起動時のコマンド
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    # ディレクトリ同期。設定ファイルとMySQLのデータが保存される場所を同期している。コンテナは基本的に起動時に変更されてもコンテナ自体が止まるとデータが消えてしまうため、保存しておきたいものはホストマシンと同期しておく必要がある。
    volumes:
      - ./docker/db/data:/var/lib/mysql
    #  - ./docker/db/my.cnf:/etc/mysql/conf.d/my.cnf
    ports:
      - 53306:3306

app/000-default.conf

<VirtualHost *:80>
       ServerAdmin webmaster@localhost
       DocumentRoot /var/www/html/src/public
       ErrorLog ${APACHE_LOG_DIR}/error.log
       CustomLog ${APACHE_LOG_DIR}/access.log combined
       <Directory /var/www/html/src/public>
           AllowOverride All
       </Directory>
</VirtualHost>

FROM node:14-buster as node
FROM php:7.4-apache
ADD php.ini /usr/local/etc/php/
ADD 000-default.conf /etc/apache2/sites-enabled/
RUN cd /usr/bin && curl -s http://getcomposer.org/installer | php && ln -s /usr/bin/composer.phar /usr/bin/composer
RUN curl -SL https://deb.nodesource.com/setup_14.x | bash
RUN apt-get update \
    # Laravel実行には必要
    && apt-get install -y \ 
    git \
    zip \
    unzip \
    vim \
    libpng-dev \
    libpq-dev \
    nodejs \
    && docker-php-ext-install pdo_mysql \
    && npm install -g npm@latest \
    && npm install -g @vue/cli
ENV COMPOSER_ALLOW_SUPERUSER 1
ENV COMPOSER_HOME /composer
ENV PATH $PATH:/composer/vendor/bin
WORKDIR /var/www
RUN composer global require "laravel/installer"

# Laravelで必要になるmodRewriteを有効化する
RUN mv /etc/apache2/mods-available/rewrite.load /etc/apache2/mods-enabled
RUN /bin/sh -c a2enmod rewrite

app/php.ini

[Date]
date.timezone = "Asia/Tokyo"
[mbstring]
mbstring.internal_encoding = "UTF-8"
mbstring.language = "Japanese"

FROM mysql:8

ADD my.cnf /etc/mysql/conf.d/my.cnf
RUN chmod 644 /etc/mysql/conf.d/my.cnf # 権限が644じゃないとWarning発生の為
CMD ["mysqld", "--character-set-server=utf8mb4", "--collation-server=utf8mb4_unicode_ci"]

db/my.cnf

[mysqld]
character-set-server=utf8mb4
collation-server=utf8mb4_unicode_ci
default-authentication-plugin = mysql_native_password
# エラーログの設定
log-error = /var/lib/mysql/mysql-error.log

# スロークエリログの設定
slow_query_log = 1
slow_query_log_file = /var/log/mysql/mysql-slow.log
long_query_time = 5.0
log_queries_not_using_indexes = 0

# 実行ログの設定
general_log = 1
general_log_file = /var/log/mysql/mysql-query.log

# mysqlオプションの設定
[mysql]
# 文字コードの設定
default-character-set = utf8mb4

# mysqlクライアントツールの設定
[client]
# 文字コードの設定
default-character-set = utf8mb4

ここまでファイルを作成したら、
docker-compose build --no-cache
docker-compose build up -d
docker-compose exec app bash
(appコンテナに入った後) cd html
composer create-project --prefer-dist laravel/laravel src
cd src
chmod -R 777 storage
↓でデバッグバー入れる
composer require barryvdh/laravel-debugbar
php artisan vendor:publish --provider="Barryvdh\Debugbar\ServiceProvider" 参考
composer require laravel/ui "3.x" --dev Laravelのバージョンによって、LaravelUIのバージョンも違うので注意。参考

そのほかインストール

Tailwind

npm install mix-tailwindcss --save-dev

/webpack.mix.js

const mix = require('laravel-mix');
require('mix-tailwindcss');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .tailwind();

トラブルシューティング

dbコンテナでmysqlがクラッシュ

こちらの記事とか見たが、結局はdataディレクトリを削除し再度ビルドすることで解決した。
※docker-compose down→dataディレクトリ削除→docker-compose build --no-cache