Home:0
きままな個人開発ブログ
WSL2上にWebStromをインストールしWeb開発の環境を作る
2020/08/14#WSL2
JetBrains IDEはWSL上のファイル読み込みがとても遅く、WSL上にインストールする必要がありました。実際に導入した際の手順をまとめました。

2020/08/16追記こちらの手順が長かったのでDockerfileにまとめました Dockerfileから簡単にWSL2の日本語環境を作れるようにしてみた

WSLのインストールとWSL2への更新

  • 環境 Windows 10 バージョン 2004、ビルド 19041 以上

私の場合Windows 10のMay 2020 Updateがリリース日をすぎても来ませんでした。 Windows 10 May 2020 Update を入手するに記載されている更新アシスタントを利用することで無事バージョン 2004、**ビルド 19041** 以上にアップデートをすることができました。

基本的にはWindows 10 用 Windows Subsystem for Linux のインストール ガイドに全て記載されている通りです。

下記を実行した際のメッセージは確認しましょう。 WSL2との主な違いについては... といったメッセージなら成功しているのですが、 WSL2を実行するには、カーネル コンポーネントの更新が必要です と表示されている場合はWSL 2 Linux カーネルの更新も必要になります。

PS > wsl --set-default-version  2
WSL2との主な違いについては、https://aka.ms/wsl2を参照してください

PS > wsl --list --verbose
 NAME           STATE       VERSION
* Ubuntu-18.04  Running     2

Ubuntuの実行

Microsoft Store からインストールしたUbuntuは通常のアプリ同様Windowsのスタートメニューなどから実行できます。

初回の場合ユーザーを作成した後はアップデートを行いました。

Enter new UNIX usename: xxx
New passowrd:
Retype new passowrd:
passwd: password updated successfully
Installation successfull!

$ sudo apt update && sudo apt upgrade -y

GUIアプリのためにX Window Systemを導入

Ubuntuにx11-appsのインストール

$ vi ~/.profileなどにて下記を記載します。WSL(1)のころはexport DISPLAY=:0.0の記載でよかったのですがWSL2から変更されていました。>> 参考

export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2}'):0.0  
$ sudo apt install x11-apps -y

Windows側にVcXsrvのインストール

VcXsrvのインストールし起動させます。設定はほぼデフォルト通りなのですが、3枚目の Disable access control にのみチェックを追加し設定を保存します。

VcXsrvの自動起動

毎回起動するのも手間なので自動起動させました。 [Windows]+[R]キーにてファイル名を指定して実行を開き shell:startup と入力すると自動起動用のフォルダが開きます。ここに先ほど保存した設定ファイル.xlaunchのショートカットを入れておくと次回起動時にはVcXsrvが立ち上がっています。

接続の確認

Ubuntuにて下記を実行し表示されていれば導入完了です。 ちなみにスクリーンショットで使っているターミナルはWindows Terminalを利用しています。こちらならPowerShellや複数のWSLをタブで切り替えることができます。

$ xeyes

xeyes

開発に必要なツール郡の導入

  • NVM Node Version Manager
  • Yarn パッケージマネージャー
  • Git
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
$ source ~/.bashrc
$ nvm install --lts
$ node -v
v12.18.3

$ npm install -g yarn
$ yarn -v
1.22.4

$ sudo apt-get install git
$ git --version
git version 2.17.1

Gitの設定

$ git config --global user.name "John Doe"
$ git config --global user.email johndoe@example.com

GitHubへSSH Keyを登録

$ ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
Enter a file in which to save the key (/home/you/.ssh/id_rsa): [Press enter]
Enter passphrase (empty for no passphrase): [Type a passphrase]
Enter same passphrase again: [Type passphrase again]

$ chmod 600 ~/.ssh/id_rsa

$ eval $(ssh-agent -s)
$ ssh-add ~/.ssh/id_rsa
Enter passphrase for /home/flapps/.ssh/id_rsa:
Identity added: /home/flapps/.ssh/id_rsa (/home/flapps/.ssh/id_rsa)

$ sudo apt-get install xclip
$ xclip -sel clip < ~/.ssh/id_rsa.pub

これでクリップボードにPublic Keyがコピーされているので、GitHubの設定から登録します。

再起動時にはssh-agentがリセットされます。登録したキーが保持されないので.bash_profileに登録を記載しても良さそうです。詳細はこちら >> Remote Development Tips and Tricks

Webstormのインストール

snapdを使って常に最新のバージョンを利用できるようにしたかったのですが、WSL2上ではsystemdが起動していないためそのままではインストールできませんでした。

Systemdを起動するように

こちらは後から知ったのですがsystemd-genieを使っても良さそうです。今回はubuntu-wsl2-systemd-scriptのshellを導入しました。

$ git clone https://github.com/DamionGans/ubuntu-wsl2-systemd-script.git
$ cd ubuntu-wsl2-systemd-script/
$ bash ubuntu-wsl2-systemd-script.sh

PowerShellにてWSLを再起動させます。

PS > wsl --shutdown

Snapdのインストール

再度Ubuntuを実行するとSystemdが起動していますのでエラーせずインストールできました。

$ sudo apt install snapd

WebStormのインストールと起動

$ sudo snap install webstorm --classic
$ webstorm

WebStormがクラッシュする場合

今回Ubuntuのデスクトップ環境を導入せず進めてみたので、Markdownプラグインがクラッシュし開けなくなったりしました。 最低限のパッケージで利用したかったのでエラーになっているライブラリのログから必要なパッケージを導入してみました。

$ sudo apt-get install -y libnss3-tools libxss1 libasound2

これらはUbuntu MATEなどのデスクトップ環境を導入していれば依存関係でインストールされているはずです。ubuntu-mate-20.04.1-desktop-amd64.manifest

日本語入力をできるように

こちらを参考にさせていただきました。 >> PhpStorm on WSL2でWindowsに依存しない開発環境を作る

$ wget -q https://www.ubuntulinux.jp/ubuntu-ja-archive-keyring.gpg -O- | sudo apt-key add -
$ wget -q https://www.ubuntulinux.jp/ubuntu-jp-ppa-keyring.gpg -O- | sudo apt-key add -
$ sudo wget https://www.ubuntulinux.jp/sources.list.d/bionic.list -O /etc/apt/sources.list.d/ubuntu-ja.list
$ sudo apt update && sudo apt upgrade -y
$ sudo apt install ubuntu-defaults-ja

$ sudo apt install fcitx fcitx-mozc
$ sudo apt install fonts-noto-cjk fonts-noto-color-emoji
$ sudo update-locale LANG=ja_JP.UTF8

~/.profileへ下記を記載

export GTK_IM_MODULE=fcitx  
export QT_IM_MODULE=fcitx  
export XMODIFIERS="@im=fcitx"  
export DefaultIMModule=fcitx  

fcitx-autostart > /dev/null 2>&1  

PowerShellにてWSLを再起動させます。

PS > wsl --shutodown

Ubuntuを起動すると下記設定にMozcが追加されていると思います。

$ fcitx-config-gtk3

全体の設定 > 入力メソッドのオンオフ を変更することで日本語入力の切り替えを変更できます。今回は英字キーボードを使っていることもあってCapsLockキーで切り替えるようにしました。

  • 一旦使わないキー(F12)に割り当てる
  • Windows側にKeySwapをインストールしてCapsLockとF12を入れ替える

fcitx設定

KeySwapはWindows10でも動きました。キーを入力した後ファイルへ保存を行い閉じる際に設定変更のアラートが表示されます。設定変更後PCを再起動も必要ですが、こちらの設定ソフトの起動は必要なかったです。

KeySwap

WSL環境を作り直したい時

Ubuntuを再インストールした際にMicrosoft Storeからのインストールに失敗することがありました。<user>\AppData\Local\Packages\CanonicalGroupLimited.UbuntuonWindows を削除すれば再インストールできました。 >> 参考