WSL2 + Ubuntu + VSCodeでの開発環境構築

日常的にはMacを利用していますがWSLを利用する機会がありそうなのでメモ。

やりたいこと

• WSL2をインストール
• Ubuntu(20.02 LTS)をインストール
• (Win側の)VSCodeでUbutu内のファイル編集、実行

準備

個人的環境依存（MacのParallelsでWindowsを利用してる人向け）

私は基本的にMacを利用していてWindowsはParallels上で利用しています。
PrallelsではデフォルトでVMのネストはOFFになっているので作業前にONにしておく必要があります。

もしかするとネストできるのはParallelsのPro以上かもしれません。もしメニューがない人はそれが原因かも。FustionもProじゃないとネストできないみたいです。さらに、このメニューがでるのはWindowsのVMのときだけみたいです。ゲストOSがMacだと出ません。。。

そうしてないと

WslRegisterDistribution failed with error: 0x80370102 

というエラーでLinuxがうまく起動しません（インストールはできます）。

Windowsの実機でもBIOS等でVirtualization TechnologyがOFFになっていると同じエラーがでます。

Windows Updateの実行

Windowsのビルドバージョンによりインストールできないことがあるようなのでひどまず最新のWindows Updateをかけておくのが無難です（私がやったのは2021年3月15日）。

環境の確認

念の為winverコマンドを実行してバージョンを確認しておきましょう。
WSL2の要求はビルド18362以上だそうです。私の環境は、19042.867でした。

検索でwinverと入れれば見つかります。

その他

hostname等はwindowsのものがそのまま反映されるので不都合があるようなら変更したりします（しなくてもいいです）。

WSL2のインストール

WSLとは？

WSLはWindows Subsystem for Linuxの略で、端折って言えば「WindowsでLinuxを実行するための基盤」という感じです。
記事等ではUbuntuの利用がよく紹介されていますが、当然その他のディストリビューションも利用できます。

WSLはWindows 20H1でアーキテクチャが変更されWSL2となり、Docker等も利用可能になったようです。アーキテクチャの差はこちらの記事など見てはいかがでしょうか。WSL1を利用する理由は特に無いのでWSL2をセットアップしていきます。

WS2の利用手順は基本的にはここの（手動）手順の通りで大丈夫です。

Windows Insider Programに参加してごにょごにょすればwsl --installコマンド一発でインストールできるらしいのですが、今回は普通？のWindowsにインストールすることを想定して手動インストールをします。

WSLのセットアップ

PowerShellを管理者権限で起動し、以下のコマンドを実行していきます。

スタートボタンを右クリックで出ます。

WSLの有効化

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

仮想マシンプラットフォームの有効化

dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

ここで一旦マシンを再起動しておきます。じゃないと次のLinuxカーネル更新プログラムがコケます。

/norestartオプションを付けなければ再起動するか聞いてきます。

Linuxカーネル更新プログラムのインストール

WSLで利用するLinuxカーネル部の更新でしょうか。普通にダウンロードしてインストール。

WSL2を規定のバージョンに設定

wsl --set-default-version 2

ここまでの作業でLinuxが動く基盤環境はできました。

Linux(Ubuntu)のセットアップ

Ubuntuのダウンロードとインストール

Microsoft Storeを開く。

検索画面でUbuntu 20.04を見つけてインストール。

ubuntuを起動させます。
このときVirtualization Technology(VT-X)がONになっていないと準備で説明した0x80370102エラーがでます。
正常だとユーザー名、パスワードを聞いてきます。

ユーザーの登録が完了するとプロンプトが表示されます。

これでUbuntuのインストールは完了しました。

Windowsとの連携による開発環境構築（VSCode)

Windows側にインストールしたVSCodeと拡張機能を通してシームレスに連携しながら開発ができます。

VSCodeのインストール

まだならVSCodeをインストールしてください。
Microsoft storeには無いので、ネットで検索してダウンロードしてください。

私はオプションを全文ONにしました。

VSCode拡張機能(Remote WSL)のインストール

VSCodeを起動するとRemote WSL拡張をインストールするか？と聞いてくるのでここでOKでもいいです。

後から拡張機能のところからRemote WSLを選択してインストールすることももちろんできます。

このときUbuntuが起動していたら一度終了させてください（ctr + D）。そうじゃないとうまく動作しません。

連携動作確認

ubuntuを起動させログインします（しています）。
適当な作業ディレクトリを作成し（しなくてもいいです）、vscodeを起動させます。

ubuntu側での処理

mkdir test
cd test
code .

すると拡張機能がインストールされ、Windows側でvsocdeが起動します。
Terminalを開くとubuntu側の作業ディレクトリにマッピングされているのがわかります。あとは開発するだけです。

開発メモ

いくつかメモ。

ubuntu側の（Web)サーバにアクセスする

http://localhost:3000 等、localhostとしてアクセス可能です。127.0.0.1はダメみたいでlocalhostにリダイレクトされます。

シャットダウン

ubuntu上でrebootやshutdownが効きません。そのためには

Windows側で

 wsl --shutdown

とするか、ctr + Dをすればよいいようです。

ubuntuの最低限の設定

update

sudo apt update
sudo apt upgrade -y

locale

sudo apt install language-pack-ja -y
sudo update-locale LANG=ja_JP.UTF8

再度コンソールを開いてlocaleコマンドで確認してください。日本語にもなっています。

timezone

標準でJSTみたい。

rootになる

sudo su -

リセット

ubuntuはインストール時の状態（user作成前）に戻すことができる（スナップショットも取れるがあまり実用的ではない）。
環境がぐちゃぐちゃになったらリセットするのもあり。

[設定]->[アプリ]->[アプリと機能]->[Ubuntu]-[詳細オプション]->[リセット]

Windows Terminalの設定

storeからWindows Terminalを追加インストール。いらないといえばいらないが、コピペとかができるのでまあ便利。
標準はPowerShellになっているので標準をUbuntuかつログインディレクトリを/home/usernameに設定。

setting.json

{
    "$schema": "https://aka.ms/terminal-profiles-schema",
    "defaultProfile": "{07b52e3e-de2c-5db4-bd2d-ba144ed6c273}", //ubuntu profileのgidをコピー
    "copyOnSelect": false,
    "copyFormatting": false,
    "profiles":
    {
        "defaults":
        {
        },
        "list":
        [
            {
                // Make changes here to the powershell.exe profile.
                "guid": "{61c54bbd-c2c6-5271-96e7-009a87ff44bf}",
                "name": "Windows PowerShell",
                "commandline": "powershell.exe",
                "hidden": false
            },
            {
                // Make changes here to the cmd.exe profile.
                "guid": "{0caa0dad-35be-5f56-a8ff-afceeeaa6101}",
                "name": "コマンド プロンプト",
                "commandline": "cmd.exe",
                "hidden": false
            },
            {
                //ubuntu 20.04 profile
                "guid": "{07b52e3e-de2c-5db4-bd2d-ba144ed6c273}",
                "hidden": false,
                "name": "Ubuntu-20.04",
                "source": "Windows.Terminal.Wsl",
                "startingDirectory": "//wsl$/Ubuntu-20.04/home/demouser" //start directory
            },
            {
                "guid": "{b453ae62-4e3d-5e58-b989-0a998ec441b8}",
                "hidden": false,
                "name": "Azure Cloud Shell",
                "source": "Windows.Terminal.Azure"
            }
        ]
    },


    "schemes": [],
    "actions":
    [
        { "command": {"action": "copy", "singleLine": false }, "keys": "ctrl+c" },
        { "command": "paste", "keys": "ctrl+v" },
        // Press Ctrl+Shift+F to open the search box
        { "command": "find", "keys": "ctrl+shift+f" },
        { "command": { "action": "splitPane", "split": "auto", "splitMode": "duplicate" }, "keys": "alt+shift+d" }
    ]
}