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


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

## やりたいこと

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

## 準備

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

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



![スクリーンショット_2021-03-28_8_24_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/30de4d9b-a3e7-e4b4-c2e8-562ae3bd62dd.png "スクリーンショット_2021-03-28_8_24_05.png")


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

そうしてないと

```bash
WslRegisterDistribution failed with error: 0x80370102 
```

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

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


### Windows Updateの実行

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

### 環境の確認

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

![スクリーンショット 2021-03-28 15.27.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/e1dcdb23-894a-c0cd-1c87-c1ebeb7fde03.png "スクリーンショット 2021-03-28 15.27.40.png")


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

### その他

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


## WSL2のインストール

### WSLとは？

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

WSLはWindows 20H1でアーキテクチャが変更されWSL2となり、Docker等も利用可能になったようです。アーキテクチャの差は[こちらの記事](https://www.atmarkit.co.jp/ait/articles/1906/14/news019.html)など見てはいかがでしょうか。WSL1を利用する理由は特に無いのでWSL2をセットアップしていきます。


WS2の利用手順は基本的には[ここ](https://docs.microsoft.com/ja-jp/windows/wsl/install-win10)の（手動）手順の通りで大丈夫です。

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


## WSLのセットアップ

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

![スクリーンショット 2021-03-28 15.28.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/311de8dc-2eea-a697-26ce-372c8bd14910.png "スクリーンショット 2021-03-28 15.28.04.png")


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

### WSLの有効化

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

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

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

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

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

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

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

https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi

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

```bash
wsl --set-default-version 2
```

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

## Linux(Ubuntu)のセットアップ

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

Microsoft Storeを開く。

![スクリーンショット 2021-03-28 15.34.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/3540f85b-1289-6f75-e5dd-9df1b08692f3.png "スクリーンショット 2021-03-28 15.34.34.png")


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


![スクリーンショット 2021-03-28 15.35.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/b88ceacf-707b-d521-9dbc-3a1fcc2c12cb.png "スクリーンショット 2021-03-28 15.35.17.png")


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

![スクリーンショット 2021-03-28 15.41.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/878bbe76-170b-c5e8-bbe3-a992d8122481.png "スクリーンショット 2021-03-28 15.41.45.png")

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

![Kobito.bfN2r1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/d9f52488-beac-0e17-8482-68a513b21134.png "Kobito.bfN2r1.png")


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


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

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

### VSCodeのインストール

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

https://code.visualstudio.com/Download


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


![Kobito.0KgtVT.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/a5dd65f9-16e2-8b33-b9f8-6ce13b6aa847.png "Kobito.0KgtVT.png")


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

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

![Kobito.jMgN9v.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/2d9ff46e-389e-5162-dc6c-faa6e19ccd61.png "Kobito.jMgN9v.png")


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

![Kobito.Arnz5H.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/9dc61cd1-14f9-fa34-72fd-ee52c5dc67c1.png "Kobito.Arnz5H.png")

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

### 連携動作確認

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

```bash:ubuntu側での処理
mkdir test
cd test
code .
```

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

![スクリーンショット 2021-03-28 15.54.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/e0bcd838-f1b2-0068-2766-0ca74a944e4e.png "スクリーンショット 2021-03-28 15.54.51.png")



## 開発メモ

いくつかメモ。

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

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

### シャットダウン

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

Windows側で

```bash
 wsl --shutdown
```

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

### ubuntuの最低限の設定

#### update

```bash
sudo apt update
sudo apt upgrade -y
```

#### locale

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

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

#### timezone

標準でJSTみたい。

### rootになる

```bash
sudo su -
```

### リセット

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

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

![Kobito.A1R3US.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/3070411a-21e6-8b8d-e04e-28cf979cf3fc.png "Kobito.A1R3US.png")

### Windows Terminalの設定

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


```json: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" }
    ]
}
```