はじめに
元々は 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 開発環境