WSL2+ubuntu20.04: GUI化して使う方法

# WSL2+ubuntu20.04: どうやってGUI化するか

WSL2＋ubuntu20.04環境がかなり良い。仮想環境よりずっと速い。
しかしCLI。…なのでGUI化したいと思って、ここQiitaやその他でもそのやり方をいろいろ拝見しましたがうまくいかず。

結局、べつの方法でなんとかした。

###### 結論としてはXRDPを使う

VcXsrvやX410とかDISPLAY環境変数の設定とかいらないからとても簡単。これでよいのでは？




では手順を述べていきます。

## WSLの設定
#### WSL2の有効化

PowerShellを管理者権限で立ち上げて以下のコマンド。

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

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

#### WSL2のアップグレード
https://docs.microsoft.com/en-us/windows/wsl/wsl2-kernel
へ行って、「download the latest WSL2 Linux kernel 」からwsl_update_x64.msiをダウンロード、インストールする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/17a8dc7f-f13d-19ae-a5d7-b0a4b37e095a.png)
<br />

#### WSLのバージョンのデフォルトをWSL2にする。

```powershell
wsl --set-default-version 2
```

確認コマンド

```powershell
PS C:\Users\atyah> wsl -l -v
  NAME            STATE           VERSION
* Ubuntu-20.04    Running         2
```


<br>

## ubuntuの設定

#### Microsoft Storeからubuntu20.04をインストール
Microsoft Storeでubuntu20.04を選んで
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/734a1e59-4213-817d-5f7a-f000f7678a78.png)

インストールする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/2c2e8bc1-d434-d492-6858-696d87c37b0d.png)

終わったら起動ボタンで起動。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/769bacc0-59c2-003f-e5be-6edfe6fcc56c.png)

<br />

#### ubuntuにXRDPをインストール

ubuntu20.04 on WSL2で以下のコマンド：

```bash
sudo apt update && sudo apt -y upgrade
sudo apt -y install xfce4
sudo apt-get install xrdp
```

インストール途中の以下のウィザードではgdm3を選ぶ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/3e6c451c-cea0-40bf-a184-1f2949b4a87e.png)



#### xrdp.iniを編集

xrdp.iniファイルのデフォルトポート番号などを変更する。

```bash
sudo cp /etc/xrdp/xrdp.ini /etc/xrdp/xrdp.ini.bak
sudo sed -i 's/3389/3390/g' /etc/xrdp/xrdp.ini
sudo sed -i 's/max_bpp=32/#max_bpp=32\nmax_bpp=128/g' /etc/xrdp/xrdp.ini
sudo sed -i 's/xserverbpp=24/#xserverbpp=24\nxserverbpp=128/g' /etc/xrdp/xrdp.ini
echo xfce4-session > ~/.xsession
```

port番号をデフォルトの3389から変更するのは以下のエラーが出てしまうから。どうもWSLで使ってるようだ。
> Your computer could not connect to another console session on the remote computer because you already have a console session in progress.

<br />

#### startwm.shを編集

```bash
sudo vim /etc/xrdp/startwm.sh
```

最後の2行をコメントアウトする。
そして、末尾に
startxfce4
を追記する。

```sh
#!/bin/sh
# xrdp X session start script (c) 2015, 2017 mirabilos
# published under The MirOS Licence

if test -r /etc/profile; then
        . /etc/profile
fi

if test -r /etc/default/locale; then
        . /etc/default/locale
        test -z "${LANG+x}" || export LANG
        test -z "${LANGUAGE+x}" || export LANGUAGE
        test -z "${LC_ADDRESS+x}" || export LC_ADDRESS
        test -z "${LC_ALL+x}" || export LC_ALL
        test -z "${LC_COLLATE+x}" || export LC_COLLATE
        test -z "${LC_CTYPE+x}" || export LC_CTYPE
        test -z "${LC_IDENTIFICATION+x}" || export LC_IDENTIFICATION
        test -z "${LC_MEASUREMENT+x}" || export LC_MEASUREMENT
        test -z "${LC_MESSAGES+x}" || export LC_MESSAGES
        test -z "${LC_MONETARY+x}" || export LC_MONETARY
        test -z "${LC_NAME+x}" || export LC_NAME
        test -z "${LC_NUMERIC+x}" || export LC_NUMERIC
        test -z "${LC_PAPER+x}" || export LC_PAPER
        test -z "${LC_TELEPHONE+x}" || export LC_TELEPHONE
        test -z "${LC_TIME+x}" || export LC_TIME
        test -z "${LOCPATH+x}" || export LOCPATH
fi

if test -r /etc/profile; then
        . /etc/profile
fi

# コメントアウト # test -x /etc/X11/Xsession && exec /etc/X11/Xsession
# コメントアウト # exec /bin/sh /etc/X11/Xsession

# xfce
startxfce4
```

<br />

## RDPでWindowsから接続

#### ubuntuでXRDPを立ち上げ

```bash
sudo /etc/init.d/xrdp start
```

`* Starting Remote Desktop Protocol server`
 てなる。

※ この後もしかしたらWSL2の再起動も必要かもしれない。
Powershellで再起動コマンド↓

```powershell
wsl --shutdown
```

#### RDPで接続

localhost:3390に接続。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/a60aa164-6f34-41d6-9638-99dcfb80eda2.png)



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/4e8dfb01-500d-9a48-0a25-5be41014b96f.png)


## ubuntuにFirefoxのインストール

RDP接続できたら、Firefoxをインストール（しないとデフォルトブラウザを立ち上げようとしてもエラー）。

```bash
sudo apt install firefox -y
```

OK。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/80a53f53-5c14-1cfd-52f7-987d7325d894.png)


以上です。

# 本の宣伝
### Gatsbyバージョン５>>>>改訂２版

**前編**の『Gatsby５前編ー最新Gatsbyでつくるコーポレートサイト』と**後編**の『Gatsby５後編ー最新GatsbyとmicroCMSでつくるコーポレートサイト《サイト内検索機能付き》』を合わせ、次のようなデモサイトを構築します。
→ **https://yah-space.work**
<hr />


静的サイトジェネレーターGatsby**最新バージョン５**の基本とFile System Route APIを使用して動的にページを生成する方法を解説。またバージョン５の新機能《**Slicy API**》《**Script API**》《**Head API**》を紹介、実装方法も。《**Gatsby Functions**》での問い合わせフォーム実装やGatsby Cloudへのアップロード方法も！


<a href="https://www.amazon.co.jp/gp/product/B0BXNJTJMY?&linkCode=li3&tag=kokkahasan-22&linkId=93c5e3bf1f226141ddc807300e81b07a&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B0BXNJTJMY&Format=_SL250_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=kokkahasan-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=kokkahasan-22&language=ja_JP&l=li3&o=9&a=B0BXNJTJMY" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
<a target="_blank" href="https://www.amazon.co.jp/gp/product/B0BXXBDJDJ?&linkCode=ll1&tag=kokkahasan-22&linkId=df7e600968c58c0090cd735681c6732c&language=ja_JP&ref_=as_li_ss_tl">Gatsby５前編ー最新Gatsbyでつくるコーポレートサイト ～基礎の基礎から応用、新機能の導入まで（書籍2,980円）</a>

<br />
<br />

**最新Gatsby５**とmicroCMSを組み合わせてのコーポレートサイト作成手順を解説。《**サイト内検索機能**》をGatsbyバージョン４からの新機能《**Gatsby Functions**》と《**microCMSのqパラメータ**》で実装。また、**SEOコンポーネントをカスタマイズ**して**microCMS APIをツイッターカードに表示**させる**OGPタグ**実装方法も解説。

<a href="https://www.amazon.co.jp/gp/product/B0BXN99WSV?&linkCode=li3&tag=kokkahasan-22&linkId=68f1905bf915f6bd365559a0c65bcdd1&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B0BXN99WSV&Format=_SL250_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=kokkahasan-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=kokkahasan-22&language=ja_JP&l=li3&o=9&a=B0BXN99WSV" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
<a target="_blank" href="https://www.amazon.co.jp/dp/B0BXN99WSV?_encoding=UTF8&qid=&sr=&linkCode=li2&tag=kokkahasan-22&linkId=f02e2f9c50736e3f074b38b4cd73894a&language=ja_JP&ref_=as_li_ss_il">Gatsby５後編ー最新GatsbyとmicroCMSでつくるコーポレートサイト《サイト内検索機能付き》（書籍 2,790円）</a>

<br />