完全版 WSL2にTeraTermでアクセスし、かつX-Windowアプリを簡単に起動する方法

#ラクラクLinux (Ubuntu) 環境を Windows で作りましょう

Fedora派（厳密にはCentOS派）で、DebianやUbuntuをほとんど知らない人が書いてみました。

もっと厳密にいえばFreeBSDヲタクかもしれないの。

ここではブラウザヲタクを目指すためにできる限り多くのブラウザをインストールします。

#インストールするもの
* [VcXsrv](https://sourceforge.net/projects/vcxsrv/)
* [WSL2に関するインストール](https://docs.microsoft.com/ja-jp/windows/wsl/install-manual)
* [Windows NT用AUTOEXEC.BAT](https://qiita.com/nanakochi123456/items/0bd346df592f85f5a7ce)

#このHowtoの読み方
どちらのOSで行うのか、セクションの先頭にWindows、もしくはUbuntu と記載してあります。

#WSL2 + X Serverの導入方法

##Windowsのデバイス名を設定する
コントロールパネルのシステムからこのPCの名前を変更して、再起動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/c406322b-cc6f-4b1a-a687-7f6cec206e4c.png)


デフォルトのWindowsインストール時に自動設定されたランダムな名前を使用するならそのままでも構いません。

##ルーターで対象PCのDHCPを固定IPにしておくとよいかもしれません。

Windows PCのMACアドレスを調べ、そのPCをDHCPの固定IPとします。


:::note info
ここまでは公式に記載されていません。これ以下が公式に記載されているものです。
:::

##WindowsでWSL2 Ubuntuのインストール
公式に示されている方法でインストールするとよいかもしれません。

（ここは当たり前のことを行っていますので、わかる方は[スキップ](#windowsでwsl2のlocalhostを有効にする)してください）

* プログラムと機能の中のWindowsの機能の有効化または無効化の中で

 「Linux用Windowsサブシステム」
 「仮想マシン プラットホーム」

にチェックを入れて、再起動

* [x64 マシン用 WSL2 Linux カーネル更新プログラム パッケージ](https://docs.microsoft.com/ja-jp/windows/wsl/install-manual#step-4---download-the-linux-kernel-update-package)をインストール
* コマンドプロンプト（もしくはPowerShell）の管理者権限で、以下を実行

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

* [このリンクよりMicrosoft StoreからUbuntuをインストール] (https://docs.microsoft.com/ja-jp/windows/wsl/install-manual#step-6---install-your-linux-distribution-of-choice)

* Windowsでインストールされた Ubuntu アプリを起動し、ユーザー名とパスワードを設定

:::note info
ここまでは公式で記載されていることを記載しています。
:::


##WindowsでWSL2のlocalhostを有効にする

localhostを有効にすると、WSL2の使い勝手が遥かに良くなります。

WindowsのC:\Users\username の配下に、以下の内容の.wslconfig (dot wslconfig)を作成します。

```.wslconfig
[wsl2]
localhostForwarding=True
```
##ご注意：wslは決してシャットダウン（再起動）しないでください localhostでアクセスできなくなります。

```
wsl --shutdown
```
このコマンド単体で再起動をしないでください。


シャットダウンをしてしまったら、sshデーモンを起動しなおさないといけません。

バッチファイルについては下記に記載します。

:::note info
ただし、ubuntu コマンドからシェルを起動することはできます
:::

## WindowsのTeraTermMenuに登録する

| 項目 |入力するもの|
|:-----------|------------:|
|登録名       | 好きな名前|
|ホスト名     | localhost|
|ユーザー     | ユーザー名|
|パスワード   | パスワード|
|その他|ttsshを使う|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/eff3eda3-d5f7-e31d-4bb6-7b547048d969.png)


なお、登録するだけで、まだsshは起動しません。

##WindowsでUbuntuアプリを立ち上げて作業をする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/4d9eccfd-2563-e053-8e87-04cb768abdac.png)

##Ubuntuのパッケージをアップデート

```
sudo apt update
sudo apt upgrade
```

## Ubuntu でsshに関するファイルを編集する

Ubuntu コマンドを起動し、その中で

```
sudo vi /etc/ssh/sshd_config
```
を実行し、

```
PasswordAuthentication yes
```
に変更する


## Ubuntu のssh鍵を作成する

```
sudo ssh-keygen -A
```

## Ubuntuにnslookupをインストールする

```
sudo apt-get install dnsutils
```

##Ubuntu の .bashrc に記載する

最後のほうに記載すれば良いです。

```
vi ~/.bashrc
```


```
export __BASEIP=192
export __XSERVERHOST=NANOKO
export DISPLAY=$(nslookup $__XSERVERHOST | grep " $__BASEIP" | awk '{print $2}'):0
```

__BASEIPは、Windows端末がDHCPで割り当てられるだろうプライベートIPの頭の数字 192 を記載します。

__XSERVERHOSTは、Windows端末のデバイス名を指定します。

## Ubuntuにsshd等のサービスを起動するコマンドを記載する

```
vi ~/service_start.sh
```

```~/service_start.sh
#!/bin/sh

ROOTPASS=ここにパスワードを記載する

echo $ROOTPASS | sudo -S service ssh start
echo $ROOTPASS | sudo -S service dbus start
echo $ROOTPASS | sudo -S service avahi-daemon start
echo $ROOTPASS | sudo -S service cron start
```

##上記で作成したファイルのパーミッションを設定する

```
chmod a+x ~/service_start.sh
```

##WindowsにWSLでsshデーモンを自動起動するコマンドを記載する

```C:\WSL\service_start.bat
wsl -u root "/home/ユーザー名/service_start.sh"
```

##Windows でservice_start.bat のショートカットを作成する

service_start.lnkを作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/195513b8-c744-69f4-5c7f-96add66baef2.png)


##Windows で service_start.lnk を[Windows NT用AUTOEXEC.BAT](https://qiita.com/nanakochi123456/items/0bd346df592f85f5a7ce)の startup\normal に登録する

実は

c:\users\%USERNAME%\appdata\roaming\microsoft\windows\start menu\programs\startup

に上記のショートカットをおいてもかまいません。

##Windowsで再起動用のバッチファイルを設置しておく。
sshデーモンを再度立ち上げるバッチファイルとなります。

```C:\WSL\reboot.bat
wsl --shutdown
timeout /t 30 /nobreak
call service_start.bat
```

##WindowsでVcXsrvの XLaunch を起動する

そのまま次へ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/9a243676-bf51-0d13-0389-c2f1472ef93e.png)

↓↓↓↓↓↓↓

そのまま次へ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/bcff1110-7dfd-194d-8ebb-e7a03ccbf063.png)

↓↓↓↓↓↓↓

Addtional parameters for VcXsrvに

「-ac」
と記載する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/e6fbef4d-da57-a9b1-775f-82697dfbe47e.png)

↓↓↓↓↓↓↓

Save configration をクリックして、config.xlaunch を保存して、完了

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/dbc6127b-ec15-287c-96d3-0fdc099221fd.png)


↓↓↓↓↓↓↓

作成された config.xlaunch を直接開き、XLaunchアプリと関連付けを行う

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/a01705b7-defb-ec95-c313-c58db85552b2.png)

このリストには表示されてない可能性があり、その他のアプリをクリックすると XLaunch が出てきますのでクリックします。


##Windowsで上記生成されたconfig.xlaunchのショートカットを作成する

config.xlaunch.lnk を作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/c472ad8e-6a17-837d-0912-a7f9b7ec65b0.png)


##Windows で config.xlaunch.lnk を[Windows NT用AUTOEXEC.BAT](https://qiita.com/nanakochi123456/items/0bd346df592f85f5a7ce)の startup\normal に登録する

実は

c:\users\%USERNAME%\appdata\roaming\microsoft\windows\start menu\programs\startup

に上記のショートカットをおいてもかまいません。

##Windowsを再起動する

##TeraTerm Menuから試しに起動する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/1addd01a-3bb9-9c51-f782-56c1e11be39c.png)


##Ubuntu でX Windowのテストアプリをインストールする

```
sudo apt-get install xterm
```

##Ubuntuでテストアプリを立ち上げる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/5231ad46-0114-2afe-d242-8b6206af8ad4.png)
なぜかfirefoxですが。。。

:::note info
この時点で実際にFirefoxを起動して、日本語のページを閲覧すると文字化けします。下記の日本語環境のインストールが必要です。
:::


##Ubuntuの最低限の日本語環境をインストールする

```
sudo apt-get install language-pack-ja
sudo apt-get install fonts-ipafont
fc-cache -fv
```

実際にはこれでもフォント不足で文字化けすることがあります。

より多くの適切なフォントをインストールするとよいでしょう。

#ブラウザヲタクになる

今回の目的はWeb開発です。

その目的を満たすために、ブラウザヲタクを実装します。

##Ubuntuで簡単にインストールできるブラウザー

```
sudo apt-get install firefox
sudo apt-get install midori
sudo apt-get install epiphany-browser
sudo apt-get install palemoon
```

##Ubuntuにsnapdをインストールする
snapに移行したアプリもあるのでインストールをしておく

```
sudo apt-get install -yqq daemonize dbus-user-session fontconfig
sudo daemonize /usr/bin/unshare --fork --pid --mount-proc /lib/systemd/systemd --system-unit=basic.target
exec sudo nsenter -t $(pidof systemd) -a su - $LOGNAME

```
##Ubuntuにchromiumをインストール

```
sudo apt-get install chromium-browser
sudo snap install chromium
```


![2021-12-29 (29).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/aea67d7d-b2eb-b94c-8643-e55d7bd8eb0c.png)



##UbuntuにMicrosoft Edgeをインストール

* [Microsoft Edge 公式サイト](https://www.microsoft.com/ja-jp/edge)より .deb をダウンロード
* WindowsであればUbuntuに転送する

```for-Windows.bat
copy microsoft-edge-stable_xxxxxx_amd64.deb \\wsl.local\Ubuntu\home\username
```

* Ubuntuでインストール

```for-Ubuntu.sh
sudo apt-get install libatomic1
sudo dpkg -i microsoft-edge-stable_xxxxxx_amd64.deb
```

![2021-12-29 (19).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/570c10ee-8c2e-bfba-4773-a6d2ea3f1c80.png)

##UbuntuにGoogle Chromeをインストール

* [Google Chrome オフラインインストーラ](https://www.google.com/chrome/?standalone=1&platform=linux)より .deb をダウンロード
* WindowsであればUbuntuに転送する

```for-Windows.bat
copy google-chrome-stable_current_amd64.deb \\wsl.local\Ubuntu\home\username
```


* Ubuntuでインストール

```for-Ubuntu.sh
sudo apt install google-chrome-stable_current_amd64.deb
```

* 起動して設定する

google-chrome-stable をシェルから起動し、以下の画面で適切にチェックを行い、開始をします。

![2021-12-29 (26).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/5f64d93f-f84b-b4f7-2f3d-c477a4b954dc.png)

![2021-12-29 (28).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/2cde3ae4-57f3-6b6a-d2ce-7bc5d2f6735e.png)

##Ubuntuにoperaをインストール
```
sudo snap install opera
```
![2021-12-29 (30).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/b06391ec-17ae-74b6-52de-15f1d14ffa0c.png)



##Windowsから上記ブラウザーを起動するバッチファイルを設定してみる

残念ながらこちらのバッチファイルで実行すると、ウインドウサイズが変更しにくい状況で、小さく表示されると思います。

[公式](https://answers.microsoft.com/ja-jp/windows/forum/all/surface-pro-8/f68a1793-c226-4943-b997-334d88f3e4dc)でもサポート対象外となります。

直接UbuntuコマンドのシェルかTeraTerm等のsshのシェルから起動することをおすすめしますが、参考までに記載します。


```firefox.bat
wsl firefox
```

```midori.bat
wsl midori
```

```palemoon.bat
wsl palemoon
```

```epiphany.bat
wsl epiphany
```

```edge.bat
wsl microsoft-edge
```

```chrome.bat
wsl google-chrome-stable
```

```opera.bat
wsl opera
```

```chromium.bat
wsl chromium
```

##それなら、WindowsのTeraTerm Menuから起動する ttl ファイルを作ればよいです。

```ubuntu-firefox.ttl
connect 'localhost:22 /ssh /2 /auth=password /user=ユーザー名 /passwd=パスワード'

wait '$'
sendln 'firefox 2>&1 >/dev/null &'
wait '$'
sendln 'exit'
```

その後、TeraTerm Menu で

マクロファイルを指定して実行

で、作成した ttlファイルを登録するのみとなります。

firefox の部分を書き換えれば、どのアプリでも使用できます。


#WSLあれこれ

##ところでこれどうなったのかしら？

各種サイトで、.bashrcに以下を追加するように紹介されています。

```.bashrc
export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2}'):0
```

しかし、WSL配下の仮想マシンは毎回動的IPであるため、変化してしまいます。

X Windowのサーバーを正しく指定できない現象も起きています。

その為、今回最も使われそうなプライベートIP 192.168.xxx.xxx をベースとして
利用して Xサーバーを指定することを考え、

かつ、localhost でTeraTermを起動することで、
簡単にWSLにアクセスできるような環境にしました。

##Windows から Ubuntuのファイルを見る

:::note info
Quitaの仕様上、ネットワークドライブの￥￥は正しく記載されないため、全角文字にて記載を行っています。
:::

エクスプローラーで ￥￥wsl$ を開くと見ることができます。

今回の設定を行うと、コマンドプロンプトで見たり、ネットワークドライブを割り当てるとしたら、以下の通りとなります。

```
dir ￥￥wsl.localhost\Ubuntu
```

```
net use u:  ￥￥wsl.localhost\Ubuntu
```

##Ubuntu から Windowsのファイルを見る

/mnt/c にアクセスをすれば見れます。

##ブラウザから音を出すには？

* [WSLで音を出す。最新版](https://qiita.com/nanakochi123456/items/0c3dbdd49baef080ea2f) を参照して下さい。

#さいごに。

必要なものをすべて起動時に自動実行するので

UbuntuのシェルにTeraTermを使ってTeraTerm Menuからラクラクアクセス

X-Windowサーバーの起動を忘れても、X-Windowアプリも立ち上げられます。

これでブラウザヲタクになれて、Web開発に専念できることとなりました。