はじめに

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

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

環境

Docker Desktop
WSL 2
Laravel
Vue3

想定読者

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

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

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

Vagrant から Docker への乗り換え

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

高速化に向けて

ブラウザの開発者ツールにて確認したところ、画面表示完了まで 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 じゃなくても良いと思います

コマンドでも導入する事が出来そうですが、今回は 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 を導入にて解消しました

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 導入編

高速化編

ubuntu 開発環境