Windows VSCode+WSL2+Docker 開発環境構築

はじめに

普段はMacで開発をしているのですが某ゲームを遊ぶためにWindowsを買ったので
Macに近い開発環境のために諸々調べて設定しました。その備忘録として記事を残します。

WSL 2とDocker for Desctopの導入

参考1: Windows 10 Home で WSL 2 + Docker を使う
参考2: Windows Subsystem for Linux Installation Guide for Windows 10(Microsoft公式)

コマンド一発でWSLを有効化できる Simplified install は執筆時点ではオススメしません。少なくともPSO2 NGSは遊べなくなります。

Enable Virtualization

• Task Managerを起動。 Performance > CPU で Virtualization: Enabled を確認
• もしEnabledになっていない場合は BIOSを開いて CPU Configuration > Intel (AMD) Virtualization Technology: Enabled に設定する
  • BIOSの開き方はPCによって異なるため説明書などで調べてください

Enable Windows Feature

• 管理者モードの Windows PowerShell で以下を実行

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
# `y` を入力することで、設定の有効化のためPCを再起動してください

Install WSL 2 kernel

Step 4 - Download the Linux kernel update package | Microsoft Docs
WSL2 Linux kernel update package for x64 machines のリンクからInstallerをダウンロードして実行

Install Ubuntu (Linux OS)

• Microsoft Store で Ubuntu を検索
• Ubuntu 20.04 LTS をインストール（最新バージョンは時期によって変わっている可能性があります）
• インストールした Ubuntu を実行
• 初回実行時、新たに作成するユーザー名とパスワードの入力を求められます
• この手順では以下の値として進めます（オススメ）
  • ユーザー名: ubuntu
  • パスワード: password

WSL 2 の設定と実行確認

Command Prompt (cmd) で以下を実行

wsl --set-default-version 2
wsl --set-version Ubuntu-20.04 2
wsl -l -v # 設定を確認

Install Docker Desktop

• Docker Desktop にアクセス
• Installerをダウンロードして実行
  • Enable WSL 2 Windows Features のチェックを外さないこと
• Docker for Desctopを実行し、上の歯車マークでSettingを開く
• 以下の設定を確認し、チェックがOFFの場合はONにする
  • General > Use the WSL 2 based engine
  • Resource > WSL INTEGRATION > Enable integration with my default WSL distro
    • その下の Enable integration with additional distro: は無視でOK

localhostへのフォワーディング設定を追加

• C¥Users¥{User名} ファルダの中に .wslconfig ファイルを作成
• メモ帳で開いて、以下の内容を記入して保存してください

.wslconfig

localhostForwarding=True

この設定はDockerで起動したアプリをWindowsのlocalhostにバインドするために必要です。
保存したらWindowsを再起動してください。

VSCodeをインストールし、WSL 2をデフォルトシェルにする

• Visual Studio Code にアクセス
• Installerをダウンロードし、実行
• VSCodeを実行する
• 起動したら Ctrl + Shift + X で拡張機能を開く
• 拡張機能の検索に wsl と入力し Remote - WSL をインストール
• Ctrl + Shift + P -> reload と打ち Reload Window を選択
• Ctrl + Shift + P -> terminal と打ち Terminal: Select Default Profile で wsl を選択
• 一度VSCodeを終了する。タスクバーから右クリック→閉じるのが良い
• VSCodeを起動し Ctrl + Shift + @ でTerminalを表示する
• シェルが bash で、ユーザーが ubuntu になっていることを確認する

DockerからlocalhostへPortForwardingされていることを確認する

VSCodeのbash(wsl shell)で以下を実行。

docker run --rm -it -p 80:80 yeasy/simple-web:latest
# ブラウザで `http://localhost` にアクセスし、画面が表示されればOK

おわりに

WindowsでMac相当の開発体験を得るためには、キーボードの設定等まだまだたくさんやることがありますが、
これでひとまずは同じアプリを開発できるようになりました。めでたしめでたし。