Docker Desktop + WSL2 + Laravel が遅いので高速化したい

# はじめに

元々は Vagrant + Homestead 環境にて開発を行っていましたが
Docker を使ってみたくなり環境を乗り換える事に

Docker Desktop を導入し環境を構築するところまでは良かったのだが
Homestead の時と比べて明らかに遅かった為、高速化するまでのお話

# 環境

- Docker Desktop
- WSL 2
- Laravel
- Vue3

# 想定読者

docker 導入したけど、なんか遅くない？と思っているピンポイントの人向け
docker 導入については、私自身参考にさせて頂いた記事を残しておきます

# どんなシステム構成なのか

フロントが Vue3 でバックエンドに Laravel を使用している、何の変哲もない構成
フロント及びバックエンドは、同一サーバ上に配置

# Vagrant から Docker への乗り換え

Windows10 Home でも Docker が使える事を知り、ノリで乗り換えを決意
詳しい手順等については以下を参考にさせて頂きました
ありがとうございます

https://yutaro-blog.net/2021/04/29/docker-laravel-vuejs-2/#index_id14

https://qiita.com/ucan-lab/items/5fc1281cd8076c8ac9f4

# 高速化に向けて

ブラウザの開発者ツールにて確認したところ、画面表示完了まで 3 ～ 4 秒掛かっており明らかに遅くなっている
元々は 0.2 秒ほどだったため、10 倍以上遅くなっている

## なぜ遅いのか？

色々調べているうちに似たような悩みを抱えている人がおり、解決している様に見える
そこでの原因として

> Windows（ホスト） と Linux の OS ファイルシステム間でのファイルの読み込みが遅い

### どういう事なのか

Windows と Linux では HDD のフォーマット形式が違い、その違う環境同士でファイルのやり取りを行うと時間が掛かる
という事からくりでした

### なんでそんなことになるのか

Windows（ホスト）の C ドライブのファイルは
WSL 上の「/mnt/c/」等にマウントされます

なので、特に意識せずに

> C:\work

この様な Path にて docker を起動すると

> /mnt/c/work

のファイルを WSL が読みに行ってしまい、時間が掛かってしまいます

## どう解決するのか

色々な記事に記載されいる解決策として

> /mnt/以外に置く
> ¥¥wsl$Ubuntu¥home¥ に置く

という解決策があるのですが、知識が浅い私は

で、どうしたらいいの？
と結局解決に至らずもやもや

# 高速化しよう

ベストプラクティスなのかは分からないが早くはなりました

## Ubuntu 導入

Microsoft Store から「Ubuntu 20.04 LTS」をインストール
※多分 Ubuntu じゃなくても良いと思います

https://docs.microsoft.com/ja-jp/windows/wsl/use-custom-distro

コマンドでも導入する事が出来そうですが、今回は Store からインストールしました

> \\\\wsl$

エクスプローラーで表示すると、Ubuntu が追加されているかと思います
※私の場合は、「Ubuntu-20.04」でした

## プロジェクト配置場所の変更

今回は以下ディレクトリへ配置することにします

> \\wsl$\Ubuntu-20.04\home

先ほど追加された、Ubuntu を開きプロジェクトを配置

## いざ docker 起動

Ubuntu のターミナルを起動し

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

ブラウザからアクセスし起動確認
・・・早くなってるはず！

### docker コマンドがエラー ①

> The command 'docker' could not be found in this WSL 1 distro. We recommend to convert this distro to WSL 2 and activate the WSL integration in Docker Desktop setting

WSL バージョンが 1 の為、バージョンアップしましょう

```
$ wsl -l -v
  NAME                   STATE           VERSION
* Ubuntu-20.04                 Running         1

$ wsl --set-version Ubuntu-20.04 2
```

### docker コマンドがエラー ②

> The command 'docker' could not be found in this WSL 2 distro.
> We recommend to activate the WSL integration in Docker Desktop settings.

Docker Desktop > 設定 > Resources > WSL INTEGRATION
にて「Ubuntu-20.04」のトグルを有効化する

# 早くなったのはいいけど、別の問題が

## 編集、ビルド出来ない？

私は VSCode にて作業をしているのですが、wsl 上にプロジェクトを配置したため
何やら、ファイルの編集やビルドが出来ない。。。

VSCode の Extention を導入にて解消しました

https://docs.microsoft.com/ja-jp/windows/wsl/tutorials/wsl-vscode

VSCode を起動する際は、ubuntu のターミナルにて開きたいディレクトリへ移動後

> code .
> にて起動
> ※VSCode 上からも起動可能な為、どちらでも良いです

## VSCode の拡張が消えた？

消えたわけではなく、Local と WSL 上では別管理の様です

VSCode の Extentions タブを開くと

> WSL UBUNTU - INSTALLED

が空っぽの為、Local と同じ Extention で良ければ、Install Local Extensions in 'Remote'... （雲のアイコン）にて、適用出来ました

## ビルドについて

以前までは、VSCode の terminal にて「npm run watch」でビルドしていましたが、コマンドが通りません

ubuntu のターミナルにて「npm run watch」を実行しておき
VSCode 上での更新を検知して build が走る事を確認

ブラウザを更新し、変更内容が適用されている事を確認して完了

# おわりに

もうちょっといいやり方あるんじゃないかと思っているが、現状方法が分からない為一旦これで進めようと思う
違うやり方や効率的な方法があれば教えてもらえると嬉しいです

## お世話になった記事

ありがとうございます！

### Docker 導入編

https://yutaro-blog.net/2021/04/29/docker-laravel-vuejs-2/#index_id14

https://qiita.com/ucan-lab/items/5fc1281cd8076c8ac9f4

### 高速化編

https://qiita.com/LemonmanNo39/items/e92ed9e3b9c812238006

https://www.aska-ltd.jp/jp/blog/197

https://snyt45.com/posts/20210806/wsl2-multiple-linux-distribution/

https://docs.microsoft.com/ja-jp/windows/wsl/use-custom-distro

### ubuntu 開発環境

https://zenn.dev/kathmandu/articles/4a86c3d75b93c3

https://docs.microsoft.com/ja-jp/windows/wsl/tutorials/wsl-vscode