DockerプロジェクトをWSL上に置き、ホットリロード問題解決を試みる

前回、Dockerで起動したプロジェクトをホットリロードするように色々試みたけど、挫折した。丁寧に説明すると、フロントエンドのホットリロードは成功したけど、バックエンドは更新すらかからなかった。詳細は前回の記事を参考にしてほしい。その状況をなんとか打破してみる。

目次

Dockerで立ち上げたサーバーが遅すぎる。

「はい、サーバーが立ち上がるまで、5分かかりました」

なんていう先生の声が脳内でリフレインする。

docker compose up -d

コマンドを打った後の話である。

何が言いたいかというと、Dockerで立ち上げたサーバーが以上に重い。

立ち上げ後、ブラウザが表示されるまで5分以上かかり、更新をクリック後、更新がかかるまで5分以上かかる。

これじゃ、なかなか作業が進まない。

それに前述、前回書いたようにホットリロードがかからないし、そもそも遅すぎてホットリロードが正常に機能しているかがわからない。

どう解決するか

じゃあ、どうするべきか。

うまくいくかはわからないが、これもまた前回の記事で書いたように、「wsl上にファイルを置く」ということで少なくともホットリロードは解決するかもしれない。

またDockerもWSL上で動かしているので、開発環境のスピードも上がるかもしれない。

というのも下記のような内容のコメントを見つけた。

特殊な理由がない限り、複数のオペレーティング システム間でファイルを操作しないことをお勧めします。 Linux コマンド ライン (Ubuntu、OpenSUSE など) で作業している場合、最速のパフォーマンス速度を実現するには、ファイルを WSL ファイル システムに格納します。
Microsoft公式 – OS ファイル システム間でのパフォーマンス

ということでやってみる。

ファイルを WSL ファイル システムに格納する

まずはUbuntuを開く。そうするとターミナルが開くので

pwd

コマンドで自身がどこにいるかを確認する。たぶん/home/UserNameにいる。

次にそこにプロジェクトフォルダを作成する。

mkdir projectName

作成したプロジェクトに移動し、

cd projectName

VsCodeを開く。

code .

そこでプロジェクトを作成する。
今回は「DockerでnextJsとnestJsの環境構築をする」で作成したものと同じものを作成した。

次に拡張機能WSLを取ると、リモート接続してくれる。

そこで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 integrationUbuntuonにする。

これによりDockerコマンドは使えるようになったが、まだ起動しない。

よくわからないのでdocker compose upを実行(-d)を取って実行すると、エラーログなようなものが出てきた。

$ docker compose up
[+] Running 2/0
 ⠿ Container nextnestdockerbase-frontend-1  Created                                                                                         0.0s
 ⠿ Container nextnestdockerbase-backend-1   Created                                                                                         0.0s
Attaching to nextnestdockerbase-backend-1, nextnestdockerbase-frontend-1
nextnestdockerbase-backend-1   | 
nextnestdockerbase-backend-1   | > backend@0.0.1 start:dev
nextnestdockerbase-backend-1   | > nest start --watch
nextnestdockerbase-backend-1   | 
nextnestdockerbase-backend-1   | sh: 1: nest: Permission denied
nextnestdockerbase-frontend-1  | 
nextnestdockerbase-frontend-1  | > frontend@0.1.0 dev
nextnestdockerbase-frontend-1  | > next -p 3333
nextnestdockerbase-frontend-1  | 
nextnestdockerbase-frontend-1  | sh: 1: next: Permission denied
nextnestdockerbase-backend-1 exited with code 126
nextnestdockerbase-frontend-1 exited with code 126

ちなみに-d

コンテナはバックグランドで起動し、そのまま実行し続けます。

とのことらしい。

……解決できない。
環境構築の時間をかけすぎるのも問題なので、ここでいったんDockerと仲違いすることにした。

次に読むおすすめ記事

Dockerで立ち上げたNextJs・NestJsのプロジェクトでホットリロードを可能にする

Dockerに座学でざっくり入門してみる

Go LangでWebAPIを作成するために、まずはDockerでMySQLを構築する

windows11にDockerをインストールする

DockerでnextJsとnestJsの環境構築をする

この記事に対するコメント

お気軽にコメントを下さい

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このブログは製作者の開発ログであり、厳密なテックブログではありません。
問題解決にいたらず、筆を置いているページもありますので、ご了承ください🙇‍♀️