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

Docker

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

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

Algorithm

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

CI/CD

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

Docker - 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が、仮想ディスクを自動で解放してくれないので、手動で最適化する

[こちらの記事](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がブレークポイントで止まらない

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

- ['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）

[この記事](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

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

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

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

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