まえがき

普段 React や Vue を触るなら、Windows上にnode.jsを入れて動かせば十分ですが、
実環境で動作テストしたいとか、Linux上にある何かしらのライブラリを叩きたいときには不便です。

Ubuntu内にIDEをインストールしてXServとかで飛ばすのもナシではないですが、
WSL上でGUIを動かすと重かったりなんとなくイマイチな感じです。

ということで、Windows上でのWebstormにWSLを繋いで環境構築を行ってみました。
基本的にはかなり簡単ですが、yarnだけコケがちなので注意です。

前提

以下の環境があることが前提です。

WebStorm (Windows上)
WSL2が動作する環境 (今回はUbuntu 20.04を使用)

WSL環境へのnode.jsのインストール

とりあえずWSL上にnode.jsが入っていないことには始まりません。

パッケージマネージャを利用した Node.js のインストール | Node.js
にあるように、Ubuntuでは公式のバイナリがNodeSourceによって提供されているため、こちらを使いました。

curl -sL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

インストールが終わったら、ついでにyarnも入れます。
Installation | Yarn - Package Manager

sudo npm install -g yarn

WebStormの初期設定

ここからはWebStormの設定を行っていきます。

Node.js interpreter

WebStormを開き、プロジェクトの作成を行います。
Node.jsをするとインタプリタの設定が出てくるので、プルダウンを押してAddをクリック。
下図のように、Add WSL...が出てくるのでそれを選択。

ディストリビューションやNode.jsの場所を聞かれます。
自動で認識してくれるので特に何もしなくても簡単に設定できます。

Package Manager (npmの場合)

次はパッケージマネージャの設定です。
WSL上のnode.jsが選択されたタイミングで、パッケージマネージャのパスも自動で変更されます。
npmを使用する場合はこのままプロジェクトを作成してOKです。

[Optional]Package Manager (yarnの場合)

パッケージマネージャのリストの中には、yarnも存在しています。

しかし、そのままプロジェクトを作成しようとすると…？　(◞‸◟)ﾃﾞｭﾝ…

Error: Cannot find module '/usr/share/yarn/bin/yarn.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
    at internal/main/run_main_module.js:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}
Done

これはnpm install -g yarnでyarnをインストールしたため、
WebStormにおいてのWSLの初期設定になっている/usr/share/yarnに実体がないことが原因です。
(このパスの指定って、Webstormくんが走査してくれるわけじゃなくて決め打ちなんですね…)

/usr/lib/node_modules/yarnが正しいパスになります。
Package managerのプルダウンからSelect...を押して手動でパスを指定してやります。

Terminalの設定

Node interpreterおよびPackage Managerが適切に設定出来たら、
テスト用にプロジェクトを作成して起動してみましょう。
きちんと動いていればinitが走り、package.jsonが自動的に生成されるはずです。

しかしTerminalをいざ開いてみると、こちらはcmd.exeのままになってしまっています。
これだと実用性がないので、WSLのターミナルをきちんと表示できるように設定しましょう。

まず最初にコマンドプロンプトを開いて、WSLのデフォルトのディストリビューションを確認。
今回使用するディストリビューションが (規定) になっていればOKです。

C:\Users\hoge>wsl -l
Linux 用 Windows サブシステム ディストリビューション:
Ubuntu-20.04 (既定)

確認ができたら、実際にWebStorm側の設定を行います。
左上のFile→Settings...を開きます。
Settingsのウィンドウが出たら、Tools→Terminalを選択。
Shell pathをcmd.exeからwsl.exeに変更します。

OKを押して設定画面を閉じ、下のTerminalを×で消して開きなおして
きちんとLinuxのターミナルが表示されていれば成功です。
フォントの設定を変えることで、このようにPowerlineの表示も可能です。

動作確認

以上でWebStormでWSLを走らせるための最低限の設定は終了です。
実際の動作確認として、作った仮のプロジェクト内でReactを試しに動かしてみましょう。

# package.jsonがconflictするので一度削除する
$ rm package.json

# カレントディレクトリにReactのサンプルプロジェクトを作成
$ npx create-react-app .

# 実行
$ npm start

こんな感じでメッセージが表示されれば起動完了です。
WSL2は仮想マシンとして動いているので、localhostではなく、IPを指定して繋ぎましょう。
起動後に**On Your Network:**として表示されているのがWSLのIPです。

Compiled successfully!

You can now view untitled4 in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://xxx.xx.x.xxx:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

ブラウザから接続し、ちゃんと接続できればOKです。お疲れさまでした。

おわりに

WebStorm側がかなりWSLに寄り添ってくれているため、簡単に環境構築を行うことができました。
ただしYarnのパスがうまく認識してくれない例もあるので、エラーが出てしまった場合は
注意深くエラーメッセージを読んで原因を特定する必要があります。

使い始めなのでまだ見えていない部分もありますが、何かあったら追記していく予定です。
デバッグ周りの機能やCPUプロファイリングなども時間があったらまた記事にしようと思います。