Breathnoteへようこそ。このブログではフロントエンドからバックエンドまでフルスタックなWeb技術の話題や備忘録を掲載しています。わかりやすい記事を心掛けて更新しているので、ドキュメントの確認やバグフィックスのお供にどうぞ。

Amazon.comにより提供されているクラウドコンピューティングサービス

コンピュータプログラムで問題を解決するための手順や計算方法のこと

Algorithm

継続的インテグレーション＆継続的デリバリーの略で、アプリケーションの構築、テスト、および展開の自動化を指す

CI/CD

コンテナ仮想化を用いてアプリケーションを開発・配置・実行するためのDocker​社製オープンソースソフトウェア

Docker

GitHub社によって運営されているソースコードの変更履歴を管理するホスティングサービス

GitHub

静的なHTMLをベースに、JavaScriptを用いたAPIを通じて動的なコンテンツを扱うWebサービスのアーキテクチャ

Jamstack

Facebook社がOSSとして開発を進めているJavaScript用テスティングフレームワーク

Jest

MVCモデルでWebアプリケーションを開発できるオープンソースWebアプリケーションフレームワーク

Laravel

GoogleのMaterialデザインをベースに開発された、ウェブ開発をより高速かつ簡単にするReactコンポーネント

Material-UI

Oracle社が中心となって開発しているオープンソースのリレーショナルデータベース管理システム

MySQL

Vercel社がOSSとして開発を進めているReactベースのフロントエンドフレームワーク

Next.js

The PHP Groupによってコミュニティベースで開発されているオープンソースの汎用プログラミング言語。

Facebook社とコミュニティによって開発されているUI構築のためのJavaScriptライブラリ

React

マイクロソフトが開発・販売しているGUIを採用したオペレーティングシステムの製品群

Windows

Breathnote - 時間を節約するための技術ブログ

定期的に最適化するので、自分用にまとめておきます。

Dockerに限らず、Linuxディストリビューション等の最適化も可能ですが、まとめて最適化したいときは、[WSL2 Compacter](https://github.com/mikemaccana/compact-wsl2-disk)というスクリプトを利用したほうが良いでしょう。

## Windows 10 Pro

<div className="codeblock-filename">PowerShell</div>

```powershell
# WSLを停止
wsl --shutdown

# 仮想ディスクイメージファイルが存在するディレクトリに移動
cd C:\Users\admin\AppData\Local\Docker\wsl\data

# 最適化
Optimize-VHD -Path .\ext4.vhdx
```

## Windows 10 Home

<div className="codeblock-filename">PowerShell</div>

```powershell
# WSLを停止
wsl --shutdown

# diskpartを起動
diskpart

# 仮想ディスクイメージファイルを指定
DISKPART> Select vdisk file="C:\Users\admin\AppData\Local\Docker\wsl\data\ext4.vhdx"

# 読み取り限定でアタッチしないと最適化できない
DISKPART> attach vdisk readonly

# 最適化
DISKPART> compact vdisk

# 終了
DISKPART> detach vdisk
DISKPART> exit
```

Dockerファイルの増加に伴って肥大化する仮想ディスクですが、コンテナやイメージのキャッシュを削除しても、ディスクは自動で解放されません。本記事では、そんな仮想ディスクを手動で最適化する方法を記載しています。

WSL2に載せたDockerが、仮想ディスクを自動で解放してくれないので、手動で最適化する

SQLのJOINは、`ON`以降を`AND`で連結しますが、クエリビルダでは`on ()`のチェーンで同じ挙動になりました。

<div className="codeblock-filename">SQL</div>

```sql
SELECT *
FROM A
LEFT JOIN B
    ON A.PK1 = B.PK1
    AND A.PK2 = B.PK2
```

<div className="codeblock-filename">PHP</div>

```php
DB::table('a')->leftJoin('b', function ($join) {
    $join->on('a.pk1', 'b.pk1')->on('a.pk2', 'b.pk2');
})->get();
```

複合主キーテーブル同士をJOINするクエリビルダの書き方を紹介します。

Laravelのクエリビルダで複合主キーテーブルをJOINする

再帰クエリをサポートしていないDBMSではアンチパターンとなるナイーブツリー。

今回は、ナイーブツリーの中でも扱いが面倒な「隣接リストモデル」のテーブルを用いて、子孫レコードを取得、Laravel Bladeを用いて階層表示してみます。

## 開発環境

- PHP 7.3
- Laravel 6.20
- MySQL 5.7

## テーブル定義

本記事では以下の`divisions`テーブルを使用します。`id`と`parent_id`で部署の関係を表している階層構造のテーブルです。

| id | parent_id | name |
| :-------: | :------: | :-------: |
| 1 | NULL | 技術部 |
| 2 | 1 | 開発チーム |
| 3 | 1 | 設計チーム |
| 4 | 2 | クライアント班 |
| 5 | 2 | サーバ班 |
| 6 | 3 | 研究設計班 |
| 7 | 3 | 生産技術班 |
| 8 | NULL | 企画部 |
| 9 | NULL | 営業部 |

## 子孫レコードを取得してみる

技術部以下の部署を配列形式で取得します。

<div className="codeblock-filename">Division.php</div>

```php
<?php

namespace App\Models;

class Division extends Model
{
    protected $table = 'divisions';
    protected $primaryKey = ['id'];

    // 直下の部署を取得
    public function childDivs()
    {
        return $this->hasMany('App\Models\Division', 'parent_id', 'id');
    }

    // 傘下の部署を再帰的に取得
    public function allChildDivs()
    {
        return $this->childDivs()->with('allChildDivs');
    }

    // 指定した部署 + 傘下の部署を配列形式で取得
    public static function getDivFamily(Division $model)
    {
        static $divs = [];

        if ($model) {
            $divs[] = $model;

            foreach ($model->allChildDivs as $childDivs) {
                getDivFamily($childDivs);
            }
        }

        return $divs;
    }
}
```

<div className="codeblock-filename">DivisionController.php</div>

```php
<?php

namespace App\Http\Controllers;

use App\Models\Division;

class DivisionController extends Controller
{
    public function index(Request $request)
    {
        $div = Division::find('1');

        $divFamily = Division::getDivFamily($div);
    }
}
```

## 階層表示してみる

`Laravel Blade`を利用して、傘下の部署を階層表示します。レイアウトには[TreeGrid jQuery plugin](https://www.jqueryscript.net/demo/Simple-Flexible-jQuery-Tree-Grid-Plugin-TreeGrid/)を使いました。導入方法は本題から逸れるので解説に含みません。

まず初めにコントローラを作りましょう。

<div className="codeblock-filename">DivisionController.php</div>

```php
<?php

namespace App\Http\Controllers;

use App\Models\Division;

class DivisionController extends Controller
{
    public function index(Request $request)
    {
        $rootDivs = Division::whereNull('parent_id')->get();

        return view('parent', [
            'rootDivs' => $rootDivs ?? [],
        ]);
    }
}
```

次に、親となるBladeファイルを作ります。

<div className="codeblock-filename">parent.blade.php</div>

```html
<table class="tree">
    <thead>
        <tr>
            <th>部署ID</th>
            <th>部署名</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($rootDivs as $rootDiv)
            <tr class="treegrid-{{ $rootDiv->id }}">
                <td>{{ $rootDiv->id }}</td>
                <td>{{ $rootDiv->name }}</td>
            </tr>
            @each('child', $rootDiv->allChildDivs, 'div')
        @endforeach
    </tbody>
</table>
```

最後に、子供となるBladeファイルを作ります。

<div className="codeblock-filename">child.blade.php</div>

```html
<tr class="treegrid-{{ $div->id }} treegrid-parent-{{ $div->parent_id }}">
    <td>{{ $div->id }}</td>
    <td>{{ $div->name }}</td>
</tr>
@each('child', $div->allChildDivs, 'div')
```

`child.blade.php`を再帰的に呼び出すことで、ツリー構造のテーブル表示を実現しています。

## 所感

正直なところ、あまり使い道は無いと思います。

再帰クエリをサポートしていないDBMSではアンチパターンとなるナイーブツリー。今回は、ナイーブツリーの中でも扱いが面倒な「隣接リストモデル」のテーブルを用いて、子孫レコードの取得や、Laravel Bladeを用いた階層表示を試してみます。

Laravel + MySQL：隣接リストモデルのテーブルからレコードを取得する

[こちらの記事](https://zenn.dev/datsukan/articles/a479f3e98a70c4)で紹介されている方法で解決しなかったので調べました。

- [xDebug not working using docker, vscode and WSL 2](https://stackoverflow.com/questions/62026240/xdebug-not-working-using-docker-vscode-and-wsl-2)

## 解決策

VSCodeのデバッグ構成ファイルに以下の設定を追加。

<div className="codeblock-filename">launch.json</div>

```json
{
    "configurations": [
        {
            "hostname": "0.0.0.0",
        }
    ]
}
```

Docker + VSCode + WSL2を用いた開発環境で、Xdebugがブレークポイントで止まらず、デバッグできませんでした。Xdebug用の設定ファイルを修正することで解決したので共有します。

Docker + VSCode + WSL2：Xdebugがブレークポイントで止まらない

参考記事とほぼ同じ内容ですが、すぐ見返せるようまとめておきます。

- [Laravelでuniqueの対象から自分自身の値を外す](https://qiita.com/kaitaku/items/d38e9e498b094405dede)

## 記法

`user`テーブルの`email`カラムを更新します。

フォームリクエストを用いると以下になります。

<div className="codeblock-filename">Request.php</div>

```php
public function rules()
{
    return [
        'id' => 'required|string|max_len:20|exists:user,id',
        'email' => 'required|string|unique:user,email,' . $this->id . ',id',
    ];
}
```

単純なユニーク制約だと、更新前の自分自身を見つけてバリデーションエラーとなりますので、一緒に入力された`user`テーブルの主キー（ここでは`id`）を用いて、除外対象を指定します。

## 所感

[公式ドキュメント](https://readouble.com/laravel/8.x/ja/validation.html#rule-unique)には、上記以外の記法も紹介されていますので、参考にしてください。

Laravelのバリデーションでunique制約を付与する際、チェック対象のレコードをバリデーションの対象外とする方法を紹介します。

Laravel：uniqueバリデーションで自分自身を対象外としたい

以下の記事が参考になりました。

- ['docker build' error: "failed to solve with frontend dockerfile.v0"](https://github.com/docker/buildx/issues/415#issuecomment-806953587)

## エラー内容

<div className="codeblock-filename">PowerShell</div>

```
>> docker compose up -d --build

[+] Building 1.1s (6/10)
[+] Building 1.2s (10/10) FINISHED
 => [project_db internal] load build definition from Dockerfile 0.0s
 => => transferring dockerfile: 170B 0.0s
 => [project_web internal] load build definition from Dockerfile 0.0s
 => => transferring dockerfile: 542B 0.0s
 => [project_app internal] load build definition from Dockerfile 0.1s
 => => transferring dockerfile: 32B 0.0s
 => [project_db internal] load .dockerignore 0.1s
 => => transferring context: 2B 0.0s
 => [project_web internal] load .dockerignore 0.1s
 => => transferring context: 2B 0.0s
 => [project_app internal] load .dockerignore 0.1s
 => => transferring context: 2B 0.0s
 => CANCELED [project_db internal] load metadata for docker.io/mysql/mysql-server:8.0      0.9s
 => ERROR [project_web internal] load metadata for docker.io/library/nginx:1.20-alpine     0.9s
 => CANCELED [project_web internal] load metadata for docker.io/library/node:16-alpine     0.9s
 => CANCELED [project_app internal] load metadata for docker.io/library/php:7.3-fpm-buster 0.9s
------
 > [project_web internal] load metadata for docker.io/library/nginx:1.20-alpine:
------
failed to solve: rpc error: code = Unknown desc = failed to solve with frontend dockerfile.v0: failed to create LLB definition: rpc error: code = Unknown desc = error getting credentials - err: exit status 1, out: ``
```

## 解決策

コマンドをスーパーユーザ権限で実行することで、問題なくビルドできました。

<div className="codeblock-filename">PowerShell</div>

```
sudo docker compose up -d --build
```

WSL2のUbuntuでDockerコンテナをビルドしたところ、「failed to solve with frontend dockerfile.v0 ...」というエラーが発生したため、これを解消します。

Dockerコンテナのビルド中にエラー（failed to solve with frontend dockerfile.v0）

Laravelを使ったとあるWEBシステムに、メール送信機能を実装しました。このシステムでは、メールを一括送信する要件があったため、メール送信部分は非同期で実装しました。

Laravelでは、タスクをバックグラウンドで処理させる仕組みとして「キュー」が存在します。Laravelキューは、データベース、Amazon SQS、Redisといったドライバをサポートしていますが、今回はAmazon SQSの「FIFOキュー」を利用して実装しました。

この記事では、Amazon SQSを用いたメールキューの実装方法をまとめています。

- [Laravel Queueを利用して非同期によるメール送信](https://noumenon-th.net/programming/2020/06/02/laravel-queue/)
- [LaravelでAmazon SQSのFIFOキューを使う方法](https://qiita.com/suzumurakk/items/d23e39c322c44c99f0ed)

## 動作環境

- Laravel 7.0
- `aws/aws-sdk-php`を導入済み
- メール送信機能を実装済み
- Amazon SQSのFIFOキューを準備済み

## 実装

### 1. キューにメッセージを送るサービスを作成

<div className="codeblock-filename">SqsFifoQueue.php</div>

```php
<?php

namespace App\Services;

use Illuminate\Queue\SqsQueue;

class SqsFifoQueue extends SqsQueue
{
    public function pushRaw($payload, $queue = null, $options = [])
    {
        $response = $this->sqs->sendMessage([
            'QueueUrl' => $this->getQueue($queue),
            'MessageBody' => $payload,
            'MessageGroupId' => uniqid(),
            'MessageDeduplicationId' => uniqid(),
        ]);

        return $response->get('MessageId');
    }
}
```

### 2. キューに接続するサービスを作成

<div className="codeblock-filename">SqsFifoConnector.php</div>

```php
<?php

namespace App\Services;

use Aws\Sqs\SqsClient;
use Illuminate\Support\Arr;
use Illuminate\Queue\Connectors\SqsConnector;

class SqsFifoConnector extends SqsConnector
{
    public function connect($config)
    {
        $config = $this->getDefaultConfiguration($config);

        if ($config['key'] && $config['secret']) {
            $config['credentials'] = Arr::only($config, ['key', 'secret']);
        }

        return new SqsFifoQueue(new SqsClient($config), $config['queue']);
    }
}
```

### 3. キュー接続用のサービスプロバイダを作成

<div className="codeblock-filename">SqsFifoServiceProvider.php</div>

```php
<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

use App\Services\SqsFifoConnector;

class SqsFifoServiceProvider extends ServiceProvider
{
    public function register()
    {
        $this->app->afterResolving('queue', function ($manager) {
            $manager->addConnector('sqsfifo', function () {
                return new SqsFifoConnector;
            });
        });
    }
}
```

<div className="codeblock-filename">config/app.php</div>

```php
return [
    'providers' => [
        App\Providers\SqsFifoServiceProvider::class,
    ],
];
```

### 4. キューの接続情報を追加

<div className="codeblock-filename">config/queue.php</div>

```php
return [
    'connections' => [
        'sqsfifo' => [
            'driver' => 'sqsfifo',
            'key' => env('AWS_QUEUE_ACCESS_KEY_ID'),
            'secret' => env('AWS_QUEUE_SECRET_ACCESS_KEY'),
            'queue' => env('SQS_QUEUE'),
            'region' => env('AWS_DEFAULT_REGION'),
        ],
    ],
];
```

### 5. 環境変数を追加

<div className="codeblock-filename">.env</div>

```ini
# 変更
QUEUE_CONNECTION=sqsfifo

# 新規追加
AWS_QUEUE_ACCESS_KEY_ID=<[KEY_ID]>
AWS_QUEUE_SECRET_ACCESS_KEY=<[SECRET_KEY]>
SQS_QUEUE=<[END_POINT]>
AWS_DEFAULT_REGION=<[REGION]>
```

### 6. ジョブクラスの作成

<div className="codeblock-filename">SendSampleMail.php</div>

```php
<?php

namespace App\Jobs;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Foundation\Bus\Dispatchable;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Queue\SerializesModels;
use Illuminate\Support\Facades\Mail;

use App\Mail\SampleMail;

class SendSampleMail implements ShouldQueue
{
    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;

    public $tries = 3; // 処理失敗時の最大試行回数

    public $data;

    public function __construct(array $data)
    {
        $this->data = $data;
    }

    public function handle()
    {
        Mail::to('<[YOUR_ADDRESS]>')->send(new SampleMail(
            $this->data,
        ));
    }
}
```

### 7. メール送信部分を修正

実装済みのメール送信部分を`dispatch()`に置き換えます。

<div className="codeblock-filename">SampleController.php</div>

```php
<?php

namespace App\Http\Controllers;

class SampleController extends Controller
{
    public function index(Request $request)
    {
        // Mail::to('<[YOUR_ADDRESS]>')->send(new SampleMail($request));

        SendSampleMail::dispatch($request);
    }
}
```

### 8. キューワーカーを起動して動作確認

`php artisan queue:work`でキューワーカーを起動して、実際にメールを送信してみましょう。

Amazon SQSのモニタリング画面でレスポンスの返却が確認できればOKです。

## 所感

本番環境でキューサービスを利用する際は、Supervisorの導入が欠かせません。

[こちらの記事](/posts/amazon-ilnux-2-supervisor)でSupervisorの導入方法を説明しています。興味のある方はどうぞ。

Webアプリケーションによくあるメール一括送信機能ですが、「キュー」を用いてバックグラウンドで処理させる場合が多いです。今回は、Amazon SQSを利用したキューサービスを、Laravelのメール送信機能に追加してみます。

Amazon SQSを使ったLaravelメールキューを実装する

Laravelのキューワーカーを用いたメール送信機能を実装したのですが、コマンド永続化のため、サーバへSupervisorを導入する必要がありました。

今回の案件では、サーバにAWSのEC2（Amazon Linux 2）を採用していたので、以下の記事を参考にしながら作業を行いました。

本記事は参考記事とほぼ同じ内容ですが、自分で見返してサッと導入できるようにまとめています。

- [Amazon Linux 2にSupervisorを設定する](https://blog.e2info.co.jp/2021/04/11/amazon-linux-2_supervisor/)

## 手順書

これより下のコマンドでは`sudo`を省略しています。コマンドの実行ユーザに応じて追加してください。

### 1. サーバ環境を確認

Supervisorが未導入であることを確認します。

<div className="codeblock-filename">shell</div>

```
supervisord -v
```

Supervisorのインストールに必要な`pip3`が導入済みであることを確認します。

<div className="codeblock-filename">shell</div>

```
pip3 -V
```

### 2. インストール

<div className="codeblock-filename">shell</div>

```
pip3 install supervisor
```

### 3. Supervisorを設定

各種ディレクトリを作成します。

<div className="codeblock-filename">shell</div>

```
mkdir /etc/supervisord

mkdir /etc/supervisord/conf.d
```

設定ファイルの雛形を作成します。

<div className="codeblock-filename">shell</div>

```
echo_supervisord_conf > /etc/supervisord/supervisord.conf
```

設定ファイルの最下部に、ファイルパスを追加します。

<div className="codeblock-filename">supervisord.conf</div>

```
[include]
files = /etc/supervisord/conf.d/*.conf
```

### 4. Laravel用の設定ファイルを追加

`/etc/supervisord/conf.d`の直下に`laravel-queue-worker.conf`を作成します。

<div className="codeblock-filename">laravel-queue-worker.conf</div>

```
[program:laravel-queue-worker]
process_name=%(program_name)s_%(process_num)02d
command=php /<[PROJECT_PATH]>/artisan queue:work --sleep=60
autostart=true
autorestart=true
user=ec2-user
numprocs=1
redirect_stderr=true
stdout_logfile=/<[PROJECT_PATH]>/storage/logs/laravel-worker.log
```

### 5. サービスとして登録

`systemctl`コマンドで呼び出せるようにします。

<div className="codeblock-filename">shell</div>

```
vi /etc/systemd/system/supervisord.service
```

<div className="codeblock-filename">supervisord.service</div>

```
[Unit]
Documentation=http://supervisord.org
After=network.target

[Service]
Type=forking
ExecStart=/usr/local/bin/supervisord -c /etc/supervisord/supervisord.conf
ExecReload=/usr/local/bin/supervisorctl reload
ExecStop=/usr/local/bin/supervisorctl shutdown
User=root
KillMode=process
Restart=on-failure
RestartSec=50s

[Install]
WantedBy=multi-user.target
```

### 6. 動作確認 ＆ 自動起動の設定

各種`systemctl`コマンドで動作確認。

<div className="codeblock-filename">shell</div>

```
# 起動
systemctl start supervisord

# 再起動
systemctl restart supervisord

# ステータスを確認
systemctl status supervisord

# 停止
systemctl stop supervisord
```

問題なければ自動起動するよう設定しておきます。

<div className="codeblock-filename">shell</div>

```
systemctl enable supervisord
```

## 所感

どうでもいい話ですが、稼働中の本番環境でこういった作業するの緊張しますよね。

Supervisorの導入に関連して、[Amazon SQSを使ったLaravelメールキューの実装に関する記事](/posts/laravel-mail-queue-amazon-sqs)も書いてます。

興味のある方はどうぞ。

サーバ上で、Laravelのキューワーカーを永続的に実行させるためにSupervisorを導入しました。その際の知見をまとめておきます。

EC2（Amazon Linux 2）にSupervisorを導入する

AWSのロードバランサを経由してLaravel（EC2）にアクセスすると、SSL通信にならない場合があります。

Laravel側の設定で解消できるので、対処法をアウトプットしておきます。

- [Amazon CloudFrontを経由したL製のaravelがHTTPSにならないとき](https://liginc.co.jp/490895)

## 原因

クライアントとLaravelのあいだにロードバランサを挟むことにより、元々のクライアントリクエストがSSL通信か否か、Laravelが判断できなくなるからです。

本件において、最終的にLaravelへアクセスするのはロードバランサです。Laravelがロードバランサからのアクセスを信用せず、リクエストヘッダを読み取らない場合、HTTPで通信してしまうようです。

## 対処法

Laravelが信用するプロキシの一覧に、ロードバランサのIPアドレスを追加しましょう。

AWSのロードバランサはIPアドレスが動的なので、ワイルドカードで全て許可するようにしています。

<div className="codeblock-filename">TrustProxies.php</div>

```php
<?php

namespace App\Http\Middleware;

use Fideloper\Proxy\TrustProxies as Middleware;
use Illuminate\Http\Request;

class TrustProxies extends Middleware
{
    // protected $proxies;
    protected $proxies = '*';
}
```

Laravelに対してロードバランサ以外からアクセスがある場合は、別途リクエストヘッダのカスタマイズも実施しておくことをおすすめします。

AWSのロードバランサを経由してLaravelにアクセスすると、SSL通信にならない場合があります。Laravel側の設定で解消できるので、対処法をアウトプットしておきます。

ロードバランサを経由してLaravelにアクセスするとSSL通信にならない

## ※ 追記（2022年3月30日）

直近のWindows Insider Programで落ちてきたバージョン「Build 22581」で修正されていました。私の環境だけでしょうか？

## 症状

ある日の朝、いつものようにWindows TerminalからUbuntuを起動すると、以下のエラーメッセージが表示されました。

<div className="codeblock-filename">shell</div>

```
['wsl.exe -d Ubuntu-20.04' の起動時にエラー 0x8007010b が発生しました]
先頭のディレクトリ "Z:\home\shinki" にアクセスできませんでした
```

Ubuntuを動かしているWSL2自体が起動していないようなので、PowerShellから直接起動してみたのですが、ここでまたエラー。

<div className="codeblock-filename">PowerShell</div>

```
C:\Users\admin> wsl
ファイル システムの 1 つをマウント中にエラーが発生しました。詳細については、「dmesg」を実行してください。
```

エラーを特定するためにも`dmesg`を叩きたいのですが、そもそもUbuntuが動いてないので叩けません。

どうしたものかと色々試したんですが、エクスプローラからUbuntu用仮想ドライブ`Z:`にアクセスすることで、WSL2を起動できることがわかりました。

ということで、さっそくUbuntuのターミナルで`dmesg`を実行。どうやら`/mnt/c/`以下が読み込めずエラーを吐いている様子。`/mnt/c/`といえば、Windows側のドライブをマウントしているディレクトリ。

最近コアファイルに変更を加えたことといえばWindowsのバージョンを11にしたことぐらい…。

上記のヒントを軸にネットを漁ると、[こんな記事](https://log.mkuriki.com/windows11-wsl2-system-mount/)を見つけました。

WSL2自体を更新したら治ったとのことなので、私も倣ってアップデート。

<div className="codeblock-filename">PowerShell</div>

```
C:\Users\admin> wsl.exe --update
更新をチェック中...
利用できる更新はありません。
カーネル バージョン: 5.10.
```

既に最新版でした。

## 現状

もう打つ手がないので、PCを起動するたびにエクスプローラのUbuntu用仮想ドライブをダブルクリックしてWSL2を起動しています。

Windows 11の正式リリース日が10月5日に決まったので、リリースバージョンで修正されることを祈りつつ、日々を過ごすことにします。

Windows OSのバージョンを11にアップデートしたところ、PC起動時にWSL2が起動しなくなってしまいました。色々と試したことを記録しています。

Windowsを11にアップデートしたらWSL2が自動起動しなくなった

[この記事](https://qiita.com/ucan-lab/items/5fc1281cd8076c8ac9f4)を参考に、LaravelのDocker環境を構築したのですが、データベースのマイグレーションでエラーが発生しました。エラーの原因はつまらないものでしたが、備忘録として残しておきます。

## エラー内容

<div className="codeblock-filename">shell</div>

```
user@Desktop:~/workspace/project$ make fresh
docker compose exec app php artisan migrate:fresh --seed

   Illuminate\Database\QueryException  : SQLSTATE[HY000] [2002] Connection refused (SQL: SHOW FULL TABLES WHERE table_type = 'BASE TABLE')

  at /work/backend/vendor/laravel/framework/src/Illuminate/Database/Connection.php:664
    660|         // If an exception occurs when attempting to run a query, we'll format the error
    661|         // message to include the bindings with SQL, which will make this exception a
    662|         // lot more helpful to the developer instead of just the database's errors.
    663|         catch (Exception $e) {
  > 664|             throw new QueryException(
    665|                 $query, $this->prepareBindings($bindings), $e
    666|             );
    667|         }
    668|

  Exception trace:

  1   PDOException::("SQLSTATE[HY000] [2002] Connection refused")
      /work/backend/vendor/laravel/framework/src/Illuminate/Database/Connectors/Connector.php:70

  2   PDO::__construct("mysql:host=127.0.0.1;port=3306;dbname=forge", "forge", "", [])
      /work/backend/vendor/laravel/framework/src/Illuminate/Database/Connectors/Connector.php:70

  Please use the argument -v to see more details.
make: *** [Makefile:74: fresh] Error 1
```

## 原因

Dockerの環境変数が、Laravelの環境変数を上書きできていませんでした。

Docker側のDB接続設定は以下のとおり。

<div className="codeblock-filename">docker-compose.yml</div>

```yaml
services:
  app:
    environment:
      - DB_CONNECTION=mysql
      - DB_HOST=db
      - DB_PORT=3306
      - DB_DATABASE=laravel
      - DB_USERNAME=root
      - DB_PASSWORD=secret
```

しかしエラーには`PDO::__construct("mysql:host=127.0.0.1;port=3306;dbname=forge", "forge", "", [])`とあります。

LaravelのDB設定を確認。

<div className="codeblock-filename">database.php</div>

```php
'connections' => [
    'mysql' => [
        'driver' => 'mysql',
        'url' => env('DATABASE_URL'),
        'host' => env('DB_HOST_1', '127.0.0.1'),
        'port' => env('DB_PORT_1', '3306'),
        'database' => env('DB_DATABASE_1', 'forge'),
        'username' => env('DB_USERNAME_1', 'forge'),
        'password' => env('DB_PASSWORD_1', ''),
    ],
],
```

Docker側で指定した環境変数名と、プロジェクトで利用されている環境変数名が異なっていました。

## 解決策

環境変数名を既存プロジェクトの名称で統一しました。

<div className="codeblock-filename">docker-compose.yml</div>

```yaml
services:
  app:
    environment:
      - DB_CONNECTION=mysql
      - DB_HOST_1=db
      - DB_PORT_1=3306
      - DB_DATABASE_1=laravel
      - DB_USERNAME_1=root
      - DB_PASSWORD_1=secret
```

`php artisan config:clear`でキャッシュを削除して再挑戦。

<div className="codeblock-filename">shell</div>

```shell
docker compose exec app php artisan migrate:fresh --seed

Dropped all tables successfully.
Migration table created successfully.
Database seeding completed successfully.
```

うまくいきました。

ネット記事を参考に、Laravelの開発環境をDockerで構築してみたのですが、データベースのマイグレーション中にエラーが発生しました。エラーの原因はつまらないものでしたが、備忘録として残しておきます。

Docker × Laravel × MySQL：データベースのマイグレーション中にエラー（Connection refused ...）

Laravelを使ったWEBシステムの帳票発行機能に[laravel-dompdf](https://github.com/barryvdh/laravel-dompdf)を利用したのですが、CSSを用いた改行ルールの変更に苦労しました。

## 問題点

dompdfは、Bladeに記述したHTMLをもとに、PDFを生成します。

HTMLを利用できるため、レイアウトもCSSを用いてスタイリングできるわけですが、dompdfは、改行関係のCSSプロパティとして`white-space`のみ有効です。

<div className="codeblock-filename">CSS</div>

```css
/* 効く */
white-space: nowrap;

/* 効かない */
line-break: anywhere;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-all;
```

何故でしょうか？

## 原因

PDF生成時、dompdf側で独自の改行処理を行っているからです。

コードとしては`vendor\dompdf\dompdf\src\FrameReflower\Text.php`の`$_wordbreak_pattern`。

<div className="codeblock-filename">Text.php</div>

```php
// The regex splits on everything that's a separator (^\S double negative), excluding nbsp (\xa0), plus dashes
// This currently excludes the "narrow nbsp" character
public static $_wordbreak_pattern = '/([^\S\xA0]+|\-+|\xAD+)/u';
```

上記の正規表現に合致する文字列が強制的に改行対象となるため、CSSでスタイリングしても意味がないのです。

## 対処法

パッケージのオーバーライドが大変かもしれませんが、正規表現を書き換えましょう。

<div className="codeblock-filename">Text.php</div>

```php
// The regex splits on everything that's a separator (^\S double negative), excluding nbsp (\xa0), plus dashes
// This currently excludes the "narrow nbsp" character
// public static $_wordbreak_pattern = '/([^\S\xA0]+|\-+|\xAD+)/u';
public static $_wordbreak_pattern = '//u';
```

これで、dompdf側が改行処理を挟まなくなりました。CSSで指定した改行ルールが適用されます。

## 所感

パッケージライブラリって、大多数がアルファベット前提でセッティングされているので、思わぬ部分で困る時があります。

Laravelを使ったWEBシステムの帳票発行機能にlaravel-dompdfを利用したのですが、CSSを用いた改行ルールの指定に苦労しました。忘れないよう備忘録として残しておきます。