DockerをWSL2で動かしたのにPhpStormがまともに動かないとき

概要

WindowsでDockerを使う時、正しくファイル配置しないと激重になるので注意
こちらの記事を参考にWindowsにUbuntuディストリビューションをインストールし、DockerをWSL2で使えるようにして爆速で動くようになったはいいものの、
PhpStormでGitが正しく動かなくなったり、ファイルを生成したり編集しようとすると編集できないとエラーが出た。
問題解決のためにやったことをまとめる。

ちなみにどれくらい速くなるの？

これが

これくらい速くなる。(一度Ctrl+F5を押して見比べてみてほしい)

ソースコードは同一のもので、1つ目はWindows上のソースをマウントしていて、2つ目はUbuntu上のソースをマウントしている。
画面上でどんな操作をするかによって差はあるだろうが、秒数にして1.5倍～2倍くらいになる。体感としてはブラウザでウェブサイトを見るときと変わらないくらいの速さになる。もちろん、Laravelの各種コマンドなど、CLIによる操作も速い。ということは開発のスピードも速くなる。
詰まっているときはともかく、画面が遷移したりコンパイルが終わるのをただ待っているあの時間が苦痛だったのでこれは嬉しい。

確認環境

Git(Windows側) 2.33.0
Git(Ubuntu側。デフォルトで入ってるもの)2.25.1
PhpStorm 2021.3.2
Ubuntu 20.04
PHP 8.1.3
Laravel 9.2.0

PhpStormでGitが使えない

事象

パスが読み取れないらしく、Gitブランチをcheckoutしたり、pullができない。git status git rm などはファイルそのものの変更ではないためか分からないが利用できた。
設定ファイルを開いて Test をクリックするとこのようなエラーが出ていた。

試したこと

• .gitディレクトリ内の権限を chmod -R 777 で変えてみても変わらない。
• 「Gitが無いからインストールしてね」と要求される始末。さっきまで使ってたのに・・・。試しにアンインストール→再インストールしてみたけど、だめだった。
• 環境変数もとくに変えてない。
• 認証関係が怪しいと踏んだが、この記事の内容を試しても解決しなかった。(もしかしたらこのコマンド実行しておいたおかげで認証エラーにはならずに済んだのかも)
  WSL2に切り替えたけど、Gitが「Permission denied (publickey).」する時

解決方法

結果的にはパスを変更すれば今まで通りGitによるバージョン管理を利用することができた。
今まではこの.exeだったのが、

C:\Program Files\Git\bin\bash.exe

下記でないと動かない。(こちらはWindows上に配置しているプロジェクトでも使える)

C:\Program Files\Git\cmd\git.exe

PhpStormでCannot Save Files

事象

コードを書いたりファイルを追加したりしていると次のようなポップアップが出るときがある。(パスが写ってしまうため画像は見切れてます)
恐らく、Laravelのmakeコマンドでファイルを生成したときに権限のないファイルが生成されて発生すると思われる。ファイルを保存しようとして発生したというが、新たに追加したファイルが勝手に削除されたり、Gitの差分が消滅するようなことは発生していない。

Following errors occurred on attempt to save files:

Cannot save \\wsl$\Ubuntu-20.04\home\haruna-nagayoshi\projects\source\Xxxxx.php.
Unable to open the file for writing.

解消方法

local環境に限った話なので、Dockerコンテナに入りとりあえず権限を変えている。

root@08f7ce2752b5:/var/www/html# chmod 777 -R ./

ディレクトリの権限エラー

事象

\\wsl$\Ubuntu-20.04\home\{Ubuntuのユーザ名}\{任意のディレクトリ} に移動したのち、git cloneしようとすると下記のようなエラーが発生した。

haruna-nagayoshi@S759:~/projects$ git clone https://github.com/xxx.git
fatal: could not create work tree dir 'xxx': Permission denied

解決方法

chownコマンドで所有者を変更した。

haruna-nagayoshi@S759:~/projects$ sudo chown haruna-nagayoshi .
haruna-nagayoshi@S759:~/projects$ git clone https://github.com/xxx.git

今のところこれで問題なさそう。Local環境だし、これ以上調べてもいろいろ滞るし、深く考えるのはやめた。
sudo実行時に求められるパスワードは、Ubuntuのユーザ作成時に指定したパスワード。
PhpStormでプロジェクトを開いたときに生成される.ideaも、Permission deniedのせいか何度開き直しても生成されない場合があった。
cpコマンドで.env.exampleから.envをコピーした場合や、Laravelのコマンドで新たにファイルを生成した場合も所有者を変更する必要があるっぽい。cpコマンドはsudoつければ問題なかったかもしれない。LaravelのコマンドはDockerコンテナ側で生成したファイルだからかもしれない。要検証。

node run dev ができない

事象①

git関連のエラーが解消されたから、今度こそ開発するぞ～とおもったらコンパイルすることができない。ﾄﾞｳｼﾃ...

haruna-nagayoshi@S759:~/projects/$ docker-compose run --rm node run dev
Creating node_run ... done

> dev
> npm run development

glob error [Error: EACCES: permission denied, scandir '/root/.npm/_logs'] {
  errno: -13,
  code: 'EACCES',
  syscall: 'scandir',
  path: '/root/.npm/_logs'
}
npm WARN logfile Error: EACCES: permission denied, scandir '/root/.npm/_logs'
npm WARN logfile  error cleaning log files [Error: EACCES: permission denied, scandir '/root/.npm/_logs'] {
npm WARN logfile   errno: -13,
npm WARN logfile   code: 'EACCES',
npm WARN logfile   syscall: 'scandir',
npm WARN logfile   path: '/root/.npm/_logs'
npm WARN logfile }

> development
> mix

/bin/sh: 1: webpack: Permission deniedError: EACCES: permission denied, scandir '/root/.npm/_logs'
npm notice 
npm notice New minor version of npm available! 8.3.1 -> 8.5.4
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.5.4
npm notice Run npm install -g npm@8.5.4 to update!
npm notice
ERROR: 126

試したこと

npm関連でありがちな「node_modulesを一旦削除して再度install」という解決方法を試みたが効果がなかった。

解決方法①

userをnodeにしたらこのエラーは出なくなった。rootだとだめ・・・ってなんでなんだろう。

docker-compose.yml

  node:
    image: node:16.14.0
    container_name: node
    volumes:
      - ./source:/var/www/html
    working_dir: /var/www/html
    user: node   // ←これを追加
    entrypoint: npm

参考記事

Node.js on Dockerでエラー発生(Error: EACCES: permission denied, errno: -13)

事象②

どのタイミングで出たエラーか忘れてしまったが、

The Mix manifest does not exist.

というExceptionが発生した。

解決方法②

ubuntuではなくwindows上でbuildしたプロジェクトから mix-manifest.json をコピーして、Laravelのpublicディレクトリ配下に配置する。
もともとwindowsからubuntuに移行したくてcloneやbuildはしていたのでよかったものの、そうでない場合はちょっと手間かも。
(もしかしたら事象③を解決すればやらなくていいことだったかもしれない。)

事象③

今度こそ・・・！とおもったらまたpermissionエラー。

haruna-nagayoshi@S759:~/projects$ docker-compose run --rm node run dev
Creating node_run ... done

> dev
> npm run development


> development
> mix

/bin/sh: 1: webpack: Permission denied
npm notice
npm notice New minor version of npm available! 8.3.1 -> 8.5.4
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.5.4
npm notice Run npm install -g npm@8.5.4 to update!
npm notice
npm notice
npm notice New minor version of npm available! 8.3.1 -> 8.5.4
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.5.4
npm notice Run npm install -g npm@8.5.4 to update!
npm notice
ERROR: 126

解決方法③

node_modules ディレクトリ配下の権限を与えたらrun devできるようになった。

chmod -R a+x ./source/node_modules

参考記事

sh: 1: cross-env: Permission denied on laravel mix