フロントエンド開発環境メモ 2021

  から , ,

前回似たようなメモをしたが、それから全然変わってしまい、安定してるので残して置く。

本職はAngularのフロントエンド・デベロッパーで、たまにバックエンドのJAVAも手伝うといった状況。

 

OSなど

  • Windows
  • WSL2 （なんのDistroでも良いがシンプルなDebianを、Microsoft Storeからダウンロード）
  • Windows Terminal（タブ機能がある。Microsoft Storeからダウンロード）
  • VxXsrv（E2Eテストで必要）
  • Docker （直接は必要無いがメモとして）

 

エディター兼IDE

  • Visual Studio Code （以下VSC）

 

お品書き

  1. ソースコードをWSL2内に置く
  2. ビルド
  3. デバッグ ビルドとアタッチ
  4. E2Eテストを実行
  5. WSL2内から、Docker環境へアクセス
  6. VSCプラグイン
  7. その他

 

それそれの細かいインストール方法は省く。

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は楽で良い。

関連した記事

ブックマーク パーマリンク.

コメントを残す

メールアドレスが公開されることはありません。