Windows11でWSL+vscode+Docker環境を整備した時のメモ 2024-05

# 概要
- 2024-05ごろに Windows11環境で vscodeを使って WSL(ubuntu)+dockerで何かしらの開発作業を行える環境をざっくり整備した時のメモ
- PCを新調して まっさらのWindows11Proに開発環境を1から構築する機会があったが、Windows環境に触るのが久しぶりすぎて構築方法が浦島太郎状態だったので改めて調べた
- 最近はマイクロソフトが丁寧なドキュメントを揃えて提供してくれている事を認識した

# とりあえず実現したかった事
- WSL(ubuntu)を使える状態にしたい
- vscodeを使ってWSLファイルシステム上の環境で開発できる状態にしたい
- Docker desktopなしで WSLだけでDocker使いたい
- WSLでnginxコンテナを起動し WindowsのChromeから`http://localhost:8080`にアクセスしてWelcomeページを見られる状態にしたい

# 作業開始時の状態
- PCを買って来てWindows初期セットアップ完了し、ネットにつないでWindowsアップデートを最新まで適用、Chromeをインストールして標準ブラウザに設定してからYoutubeを少し見ながら休憩した。くらいの状態から

# WSLの導入ガイドが用意されている
- ありがたいことに https://learn.microsoft.com/ja-jp/windows/wsl/ でとても良い感じにまとめられていたのでガイドに沿って作業した
## WSL インストール
- https://learn.microsoft.com/ja-jp/windows/wsl/setup/ この辺に従う
- 管理者モードPowerShellからコマンド打てば完了
    ```
    wsl --install
    ```
- インストール処理後に Windowsを一度再起動すれば WSLを使えるようになった
- `wsl --list --online` コマンドでインストール可能なディストリビューション一覧を見られるのは知らなかったな
    ```
    wsl --list --online
    インストールできる有効なディストリビューションの一覧を次に示します。
    'wsl.exe --install <Distro>' を使用してインストールします。
    
    NAME                                   FRIENDLY NAME
    Ubuntu                                 Ubuntu
    Debian                                 Debian GNU/Linux
    kali-linux                             Kali Linux Rolling
    Ubuntu-18.04                           Ubuntu 18.04 LTS
    Ubuntu-20.04                           Ubuntu 20.04 LTS
    Ubuntu-22.04                           Ubuntu 22.04 LTS
    Ubuntu-24.04                           Ubuntu 24.04 LTS
    OracleLinux_7_9                        Oracle Linux 7.9
    OracleLinux_8_7                        Oracle Linux 8.7
    OracleLinux_9_1                        Oracle Linux 9.1
    openSUSE-Leap-15.5                     openSUSE Leap 15.5
    SUSE-Linux-Enterprise-Server-15-SP4    SUSE Linux Enterprise Server 15 SP4
    SUSE-Linux-Enterprise-15-SP5           SUSE Linux Enterprise 15 SP5
    openSUSE-Tumbleweed                    openSUSE Tumbleweed
    ```

## Ubuntu初期設定
https://learn.microsoft.com/ja-jp/windows/wsl/setup/environment#set-up-your-linux-username-and-password に従う
- user名とPasswordを設定
- ここで設定したPasswordはsudoなどでも使うので厳重管理する

## Ubuntu上でaptパッケージ最新化
- sudoするので先に設定したPasswordを聞かれる
    ```
    sudo apt update
    sudo apt-get install wget ca-certificates
    sudo apt upgrade
    ```
# vscode と WSL拡張をインストール
- https://learn.microsoft.com/ja-jp/windows/wsl/tutorials/wsl-vscode#install-vs-code-and-the-wsl-extension このあたりに従う

## vscode
- ガイドではvscodeの公式サイトが案内されていたがアップグレード管理などをMicrosoft storeへ任せたかったのでMicrosoft Storeから導入した。好きな方法でインストールすれば良いとは思う
  - https://apps.microsoft.com/store/detail/XP9KHM4BK9FZ7Q?ocid=pdpshare

## WSL拡張を含むRemote Development拡張の導入
- `Remote Development`として導入すると`WSL` `Dev Containers` `Remote - SSH` `Remote -Tunnles`の拡張機能がまとめて導入される
- vscode のプラグインで `Remote Development` として検索して導入した
  - https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack

## WSLからvscode を起動
- https://learn.microsoft.com/ja-jp/windows/wsl/tutorials/wsl-vscode#open-a-wsl-project-in-visual-studio-code この辺に従う
- ターミナルでWSLへ接続して vscodeで開きたいディレクトリに移ってから `code .`を実行するとWSLファイルシステムのディレクトリが vscodeで開けるようになった。すごい
- 仕組みはこの辺で説明されていた https://learn.microsoft.com/ja-jp/windows/wsl/tutorials/wsl-vscode#extensions-inside-of-vs-code-wsl

ここまでで WSLとvscodeを連動できるようになったので続けてDokcer環境を整備していく

# WSLにDocker CEを導入
- https://docs.docker.com/engine/install/ubuntu/ 公式を見た
- https://docs.docker.com/engine/install/ubuntu/#installation-methods こちらに従い作業
  - aptリポジトリの設定
  ```
    # Add Docker's official GPG key:
    sudo apt-get update
    sudo apt-get install ca-certificates curl
    sudo install -m 0755 -d /etc/apt/keyrings
    sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
    sudo chmod a+r /etc/apt/keyrings/docker.asc
    
    # Add the repository to Apt sources:
    echo \
      "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \
      $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \
      sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
    sudo apt-get update
  ```
  - Dockerパッケージのインストール
  ```
   sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
  ```
  - Service起動とServiceが起動しているかの確認
  ```
  sudo service docker start
  ```
  ```
  sudo service docker status
  ```
  - hello-world
  ```
  $ sudo docker run hello-world
  ```
  ```
    Hello from Docker!
    This message shows that your installation appears to be working correctly.
    
    To generate this message, Docker took the following steps:
     1. The Docker client contacted the Docker daemon.
     2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
        (amd64)
     3. The Docker daemon created a new container from that image which runs the
        executable that produces the output you are currently reading.
     4. The Docker daemon streamed that output to the Docker client, which sent it
        to your terminal.
    
    To try something more ambitious, you can run an Ubuntu container with:
     $ docker run -it ubuntu bash
    
    Share images, automate workflows, and more with a free Docker ID:
     https://hub.docker.com/
    
    For more examples and ideas, visit:
     https://docs.docker.com/get-started/
    ```
## (必要に応じて)WSLのユーザがsudoしなくてもDockerを操作できるようにする
- sudoしなくてもDockerを操作できるようにdockerグループにWSLユーザを追加
    ```
    sudo usermod -aG docker ${USER}
    ```
- コマンドの実行後、一度WSLのターミナルからログアウトして再ログインすると sudo せずにDockerコマンドを使えるようになる
  - `id`コマンドで dockerグループに属していることを確認できるはず
  ```
  $ id
  uid=1002(user01) gid=1002(user01) groups=1002(user01),4(adm),20(dialout),24(cdrom),25(floppy),27(sudo),29(audio),30(dip),44(video),46(plugdev),100(users),107(netdev),989(docker)
  ```

## WSL上でnginxコンテナを起動して WindowsのChromeから確認する
- WSL上でポートマッピングしてnginx コンテナを起動してみる
    ```
    docker run -p 8080:80
    ```
- WindowsのChromeから `http://localhost:8080`へアクセスすると Welcomeページを確認できた
- ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75076/1aec2ec1-0139-58f6-6b5c-89187d545d49.png)

# そのほか
いくつかアプリ更新と追加導入をした
## PowerShell 7
- Windowsの初期セットアップ後、PwerShellを起動したところ `新機能と改善のために最新の PowerShell をインストールしてください! https://aka.ms/PSWindows`とのメッセージが出ていたのでガイドに従い `PowerShell 7`を導入した
  - https://learn.microsoft.com/ja-jp/powershell/scripting/whats-new/migrating-from-windows-powershell-51-to-powershell-7?view=powershell-7.4
    - 機能差分のドキュメントなどがあった : https://learn.microsoft.com/ja-jp/powershell/scripting/whats-new/differences-from-windows-powershell?view=powershell-7.4
- このメッセージはwin10の頃からあったと思ったが WindowsUpdateの時に自動で導入してくれてもよさそう？PowerShell 7を入れても古いPowerShell 5がPC上から消えるわけでもないようだ...と思っていたが、 5(.NET Framework)と7(.NET Core)でライブラリが違うようなので古いものが動かなくなったりいろいろあるんだろうかという気持ちになった https://learn.microsoft.com/ja-jp/dotnet/core/compatibility/fx-core

## winget
- Windowsのパッケージ管理ツールとして`winget`を導入した
  - https://learn.microsoft.com/ja-jp/windows/package-manager/winget/
- CLIでパッケージ管理できるので便利

## Windows Terminal
- SSHなど使いたい場合はTeraTermなどのフリーアプリを自分で用意していたが、最近はMicrosoft純正のターミナルアプリが用意されているらしいのを知ったので導入した
- Microsoft Storeからインストールすればアップデート等の適用も自動化されるので安心
  - https://apps.microsoft.com/detail/9n0dx20hk701?hl=ja-jp&gl=JP
- タブ別にWSLだったりPwerShellだったりを指定できて結構よさそうな雰囲気

### Oh My Posh による Windows Terminal と WSL プロンプトのカスタマイズ
- https://learn.microsoft.com/ja-jp/windows/terminal/tutorials/custom-prompt-setup この辺りに書いてあった
  - https://ohmyposh.dev/
  - Nerd Fontをインストールして、テーマ選んで、パスを通したり shellの初期設定ファイルを作ったりする

## WSL on ubuntuにbrewを導入
- https://brew.sh/ と https://docs.brew.sh/Homebrew-on-Linux あたりを見てインストール
  - 前提ツールインストール 
    ```
    sudo apt-get install build-essential procps curl file git
    ```
  - インストールスクリプトの実行
    ```
    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
    ```
  - PATHの設定
    ```
    test -d ~/.linuxbrew && eval "$(~/.linuxbrew/bin/brew shellenv)"
    test -d /home/linuxbrew/.linuxbrew && eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv)"
    echo "eval \"\$($(brew --prefix)/bin/brew shellenv)\"" >> ~/.bashrc
    ```
  - 動作確認
    ```
    brew install hello
    ```

## devcontainer
- あとは必要に応じて 開発言語周りをWSLに入れて行けば良いか...と思っていたが どうせvscodeを使うのなら `devcontainer` https://code.visualstudio.com/docs/devcontainers/containers で開発できるようにしたほうが時代についていけそうな気配を感じた
  - https://www.google.com/search?q=devcontainer
- wsl から直接 devcontainer を起動する場合
  - vscode 設定で `Dev > Containers: Execute In WSL`を有効にする
  - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75076/65b6ce4e-cb27-2594-bfe5-92404fc34ad1.png)

---

以上でWSL環境を使って開発作業できる環境をざっくり用意できた。
調べながらだったので疲れたけど いろいろ新しくなっているのを感じられて楽しかった

以上