【WSL2】VSCode+Chrome+vcXsrvでWEB開発環境を構築
パンジェンシー『東の森でシステムエンジニアをしております、パンジェンシーと申します。
最近、テレワークなど、自宅でお仕事することが多くなりましたが、暑くてエアコンをガンガン入れているので電気代が怖いです…。
』
WEB開発の環境を作ってみよう！
前回のエントリーで、Windows 10にWSL2を導入しました。
今回は、実際にプログラミングなどの作業をしていくためのツールの導入していこうと思います！
『実際の開発ではもっと色々必要かと思いますが、今回は必要最低限のものに絞って入れていきます。』
1. VSCodeの導入（Windows側）
VSCode（Visual Studio Code）は、Microsoftが開発している無料のコードエディターです。動作が軽く、拡張機能もたくさん用意されており、WSL2への接続も簡単にできます。
コチラからインストーラーをダウンロードしてインストールしましょう。
インストール後、VSCode起動時にWSLを導入済みであれば、拡張機能Remote - WSLをインストールするよう促されると思いますので、インストールしましょう。
これで、WSL内のファイルやフォルダーに簡単にアクセスできます！
↓のように、画面左のアイコンをクリックして、アクセスしたいWSLを選んで右クリックし、「connect to WSL」を選択するだけです。
新しいVSCodeのウィンドウが立ち上がるので、適当にフォルダーを開いてみましょう。VSCode内のエクスプローラーから、ファイルの一覧、追加、編集などもできるので、とても分かりやすいですね。
『普段使いのテキストエディタとしても非常に使いやすいデス！オススメの拡張機能などもそのうち書こうと思います。』
2. Chromeの導入（WSL側）
エンジニアでChromeを知らない人は多分いないと思いますが、Chrome（Google Chrome）は、Googleが開発しているWEBブラウザです。世界で一番使われているブラウザらしいです。また、「F12」を押すと起動するデベロッパーツールは、フロントエンド開発にとても便利です。
WSL2のターミナルまたはVSCodeのターミナルを使ってインストールしてみましょう。VSCodeのターミナルを使う場合は、メニューバーの「ターミナル」から、「新しいターミナル」を選択して、ターミナルを開きましょう（今、ターミナルって何回言ったかしら…）。
以下のコマンドを順番に実行しましょう。
// GDebiとWgetのインストール $ sudo apt install gdebi-core wget // WgetでChromeのdebパッケージをダウンロード $ wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb // GDebiでdebパッケージをインストール $ sudo gdebi google-chrome-stable_current_amd64.deb
『無事Chromeはインストールされましたか？早速起動したいところですが、WSLはデスクトップ環境を持ってないので、このままではWSL上でChromeを実行しても何も表示されません！そこでvcXsrvを使いましょう！』
参考ページ
How to install Google Chrome web browser on Ubuntu 20.04 Focal Fossa - LinuxConfig.org
3. vcXsrvの導入（Windows側）
vcXsrvは、画面の描画をしてくれるXサーバという部類のソフトウェアです。WSL側で実行したソフト（Chromeなど）のGUIをWindows側のXサーバに送って描画してもらうことで、あたかもWindows側で実行したソフトのように使えます。
vcXsrvのインストールと起動
上記サイトからインストーラーをダウンロードしてインストールし、vcXsrvを起動しましょう。
設定画面が開かれるので、以下の２点だけ変更して「完了」まで進みましょう。
Display numberを"0"に変更Disable access controlにチェックを入れる
これで、vcXsrvが起動しました。タスクバーのアイコンのところに「X」のマークが増えていればOKです。
『ちなみに、今のままだとWindowsを起動するたびにvcXsrvを手動で起動しないといけません。』
『上記設定の最後にSave configurationで設定ファイルを出力し、Windowsのスタートアップフォルダに置いておけば、Windows起動時に自動でvcXsrvを起動させることができます。』
『スタートアップフォルダへは、「Windows + R」を押し、shell:startupと入力すればアクセスできます。』
WSL側の設定を行う
VSCodeから操作しましょう。
メニューバーから、「ファイル」ー「ファイルを開く」を選択し、.profileを開きます（/home/[ユーザー名]/の直下にあるはず）。
ファイルの末尾に以下の行を追加します。
export DISPLAY=`ip route | grep 'default via' | grep -Eo '[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}'`:0.0
『環境変数DISPLAYには、WSL→WindowsへアクセスするためのIPアドレスを入力すればいいのですが、現在のWSLの仕様ではこのアドレスはWindows再起動のたびに変わるらしく、⇧のようにスクリプトを使って取り出しています。ちとややこしいですね。』
.profileを編集して保存したら、新しいターミナルを開き（もしくは、既に開いているターミナルでsource ~/.profileを実行し）、Chromeを実行してみましょう。
$ google-chrome-stable
Chromeのウインドウが表示されればOKです！
参考ページ
WSL2側からWindows側のIPアドレスを調べる方法 - Qiita
4. 日本語対応
しかし、今の状態だとChromeの画面が英語のままです。表示を日本語にしましょう。
// 日本語言語パックをインストール $ sudo apt -y install language-pack-ja // ロケールを日本語に変更 $ sudo update-locale LANG=ja_JP.UTF8 // Takaoフォントのインストール $ sudo apt install fonts-takao
次に、日本語入力ができるようにしましょう。
$ sudo apt install fcitx-mozc dbus-x11
VSCodeから、.profileを開き、以下の行を追加します。
export GTK_IM_MODULE=fcitx export QT_IM_MODULE=fcitx export XMODIFIERS="@im=fcitx" export DefaultIMModule=fcitx if [ $SHLVL = 1 ] ; then xset -r 49 > /dev/null 2>&1 fcitx-autostart > /dev/null 2>&1 fi
ターミナルを閉じて、再度開いてからChromeを起動してみましょう。表示が日本語になり、日本語入力ができるようになっていればOKです。
参考ページ
- WSLのUbuntu環境を日本語化する：Tech TIPS - ＠IT
- 【Windows 10】WSLでGUIアプリを動かす方法と日本語入力設定方法【VcXsrv】 - あんりふ！
- fcitxで作るWSL日本語開発環境 - Qiita
まとめ
今回は、WEB開発に必須のツールを導入してみました。
仮想環境が入ってくると途端に話がややこしくなりますね…。とりあえず動かしてみて、分からないところはググって詳細を調べてみるなどして、少しずつ理解していければいいなぁと思います。
『今回の報告は以上です！ではまた！』
