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

Facebook

Twitter

Tumblr

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

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

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

OSなど

エディター兼IDE

お品書き

1. ソースコードをWSL2内に置く

2. ビルド

3. デバッグビルドとアタッチ

4. E2Eを実行

5. WSL2内から、Docker環境へアクセス

6. VSCプラグイン

7. その他

WSLリスタート

関連した記事

コメントを残すコメントをキャンセル

検索

過去記事一覧

カテゴリー

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

OSなど

エディター兼IDE

お品書き

1. ソースコードをWSL2内に置く

2. ビルド

3. デバッグ ビルドとアタッチ

4. E2Eを実行

5. WSL2内から、Docker環境へアクセス

6. VSCプラグイン

7. その他

WSLリスタート

関連した記事

コメントを残す コメントをキャンセル

検索

過去記事一覧

カテゴリー

タグ

3. デバッグビルドとアタッチ

コメントを残すコメントをキャンセル