前回似たようなメモをしたが、それから全然変わってしまい、安定してるので残して置く。
本職はAngularのフロントエンド・デベロッパーで、たまにバックエンドのJAVAも手伝うといった状況。
OSなど
- Windows
- WSL2 (なんのDistroでも良いがシンプルなDebianを、Microsoft Storeからダウンロード)
- Windows Terminal(タブ機能がある。Microsoft Storeからダウンロード)
- VxXsrv(E2Eテストで必要)
- Docker (直接は必要無いがメモとして)
エディター兼IDE
- Visual Studio Code (以下VSC)
お品書き
- ソースコードをWSL2内に置く
- ビルド
- デバッグ ビルドとアタッチ
- E2Eテストを実行
- WSL2内から、Docker環境へアクセス
- VSCプラグイン
- その他
それそれの細かいインストール方法は省く。
1. ソースコードをWSL2内に置く
Windows上に置くとコンパイルが凄い遅いので、WSL2内のどっかに置く。個人的には/optを利用。
Windows Terminalを起動。既定でPower Shellなので、設定からDebianに変更。
git clone などでソースコードをコピーする。
cd /opt git clone git@github.com:y16i/portfolio-angular.git
2. ビルド
VSCを起動し、Remote WSL というのを入れると、Win上のVSCからWSL内のコードをいじれるようになる。
左下の緑をクリック
Open Folder in WSL.. を選択
手順1でダウントードした、/opt/portfolio-angularへ誘導して完了。
Ctrl+Shift+` でターミナルが開くので、そこからng serveなり、yarn startして、Window EdgeやChromeからlocalhost:4200などへアクセス。
3. デバッグ ビルドとアタッチ
始めに、「Debugger for Chrome」をVSCにインストールする。Chromeにアタッチするにはオプション付きで起動するのだが、毎度コマンドは面倒なので、ショートカットに埋め込む。ツールバーなどにピンして、アイコンを右クリック>アイコンを右クリックで、プロパティを選ぶ。
Target欄で、”の後ろに -remote-debugging-port=9222 と入れる。このショートカットから起動すると自動的にオプション付きになる。
そして、VSCのデバッグ設定。Ctrl+Shift+D でデバッグ ウィンドウに切り替えて、歯車をクリックして、launch.json を開く。
Angularの場合は、これ。ブラウザでlocalhost:4200/home を開いて、F5キーするとアタッチするので、好きな所にブレークポイントを設定して、そこが通過するように、ブラウザ上からページを操作する。
{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "attach", "name": "Attach Chrome", "port": 9222, "url": "http://localhost:4200/home", "webRoot": "${workspaceFolder}" } ] }
Reactの場合はこんな感じ
{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "attach", "name": "React: Chrome attach", "port": 9222, "url": "http://localhost:3000", "webRoot": "${workspaceRoot}/src", "sourceMaps": true, "sourceMapPathOverrides": { "/*": "/__vscode-remote-uri__/*" } } ] }
Go言語の場合はこれ。processId をps aux とかで探さないといけないし、起動の度に変わるので、自動ビルドでデバッグという方法が無いはかなり痛い。Goチームが色々やってるみたいなので、そのうち出来るようになるだろう。
{ "version": "0.2.0", "configurations": [ { "name": "Go: Attach local", "type": "go", "request": "attach", "mode": "local", "processId": 6945 } ] }
JAVAも試みたが、Gradle使ってるせいか簡単には行かず。5回のデバッグ起動で、1回アタッチ成功とか、そんななので使いものにならない。最新版のIntelliJはWSL2のファイルが開けてビルドもデバッグもできるので、IntelliJ使った方が早いが、Community Editionは無料じゃないので、Spring Frameworkが完全サポートじゃない。ビルドは出来るんだけど。EclipseはWSL上のファイル開けたけど、ビルドエラー。そんなに詳しくないのでちゃんと設定したらいけるのかも?
4. E2Eを実行
これがかなりの難関で、XwindowをWSL2から起動して、その中でChromeが立ち上がって、Cypressなどのテスト行う、という手順になる。その為、WSL2内にデスクトップ環境が必要。VxXsrv をインストールし、起動後のウィザードは以下
One Large Window を選択
そのままでOK
Disable access controlにチェックを入れて、完了。
次は、Shellの設定。
nano ~/.bashrc # Nanoで開いたら、以下を最後に足して保存。 export DISPLAY=`grep -oP "(?<=nameserver ).+" /etc/resolv.conf`:0.0 #テスト時にChromeが無いとかのエラーになったら、以下を足す。インストールしてなかったら、apt install chromium でインストール export CHROME_BIN=/usr/bin/chromium #保存したら、ロードし直す。再起動でも良い。 source ~/.bashrc
そして、xfce4とDbus をインストール
apt update && apt upgrade -y apt install xfce4 -y apt install dbus -y # Dbus を起動 service dbus start # xfce4 を起動 startxfce4
xfce4 が起動したら成功。色々試して、この組合わせで動いてるが、環境によっては違うのかもしれない。少なくともデスクトップ、ラップトップどちらの環境も、これでxfce4を起動できている。
あとは、cypress を起動してe2e テストを走らせる。Headless でもHeadlessじゃなくても動く。
5. WSL2内から、Docker環境へアクセス
おまけのDocker。WSL2上にDockerを入れるのではなく、Windows版をインストールする必要がある。日本語版があるのかは知らないが、Docker Desktopをインストールする。必要な設定は2か所
GeneralでUse the WSL2 based engineにチェックを入れる。
Resources → WSL INTEGERATIONで、Enable Integration with additional distors:にチェックを入れる。
あとは、このツールからイメージを操作してもいいし、WSL上からdockerコマンドで操作しても良い。
# 基本的な操作 docker image ls docker image rm <image id> docker container ls docker container start <image id> docker container stop <image id> docker container rm <image id> # ターミナルアクセス docker exe -it <image id> /bin/bash ♯ ビルは何を作りたいかによるので、省略
6. VSCプラグイン
全般
- Material Icon
- Remote – WSL
- Beautify
- Code Spell Checker
- Diff Folders
- GitLens
- NPM Dependency Links
- Visual Studio IntelliCode
- SVG
Angular
- Angular Snippets (Version 12)
- Angular Schematics
SCSS
- SCSS IntelliSense
Test
- Jasmine ES5 Code Snippets
7. その他
WSLリスタート
Windowsのコマンドから
# リスト wsl --list --running # シャットダウン wsl -t debian # 起動 wsl -d debian
Windowsでなく、WSL2にインストールしてるもの
- git
- nginx/apach2
- mysql/postgresql/mongoDB
- PHP
という事で、開発に必要な物はほぼWSL2上に入れるので、Virtual Machine、XAMP、cygwinとかはもう必要ない。WSLは楽で良い。