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

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

## ちなみにどれくらい速くなるの？
これが
![Laravel-not-WSL2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253650/282a1eaf-3fee-f9f0-78f3-57ebe9cd1740.gif)
これくらい速くなる。(一度Ctrl+F5を押して見比べてみてほしい)
![Laravel-WSL2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253650/4749fc3d-8b24-ebd5-75b8-b3e2036757ab.gif)
ソースコードは同一のもので、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` をクリックするとこのようなエラーが出ていた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253650/7a124b67-911f-95f7-00f5-89b1fac9e45a.png)

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

## 解決方法
結果的にはパスを変更すれば今まで通りGitによるバージョン管理を利用することができた。
今まではこの.exeだったのが、
```
C:\Program Files\Git\bin\bash.exe
```

下記でないと動かない。(こちらはWindows上に配置しているプロジェクトでも使える)
```
C:\Program Files\Git\cmd\git.exe
```

# PhpStormでCannot Save Files
## 事象
コードを書いたりファイルを追加したりしていると次のようなポップアップが出るときがある。(パスが写ってしまうため画像は見切れてます)
恐らく、Laravelのmakeコマンドでファイルを生成したときに権限のないファイルが生成されて発生すると思われる。ファイルを保存しようとして発生したというが、新たに追加したファイルが勝手に削除されたり、Gitの差分が消滅するようなことは発生していない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253650/ddf920bd-7eba-f645-6b94-de969564ad98.png)
```
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)](https://qiita.com/devtoku/items/b88fc68d874b787a541e)


## 事象②
どのタイミングで出たエラーか忘れてしまったが、
```
The Mix manifest does not exist.
```
というExceptionが発生した。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253650/6f3e85e9-d64a-097d-616d-12b635f56bf9.png)



## 解決方法②
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](https://stackoverflow.com/questions/54831494/sh-1-cross-env-permission-denied-on-laravel-mix)