More than 1 year has passed since last update.

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

Last updated at 2024-05-08Posted at 2024-05-07

概要

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ページを確認できた

そのほか

いくつかアプリ更新と追加導入をした

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を有効にする

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

以上

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up