「WSL2、Docker、VSCodeで劇的に改善されるWindows開発環境」を作った話

はじめに

「VS Code Meetup #7 - VSCodeConJPプレイベント」で発表されていたスライドを読んで実際にやってみた。

作成者は武井宜行さんという方。

twitter.com

構築していく中で詰まったところ、カスタマイズしたところをピックアップして備忘録とする。
自宅端末で環境構築をしたので、会社端末でも同じ環境を作成する際に補完できる記事とする。

内容を実践してできること

大きくはVSCodeでDockerを用いた快適な開発環境が作成できる。
細かいのは以下。

  • WSL2が使えるようになる
  • WindowsでLinux(Ubuntu)を使用できるようになる
  • Windows Terminalを導入し、cmdやbashなどターミナルを1つで管理することができるようになる
  • Windows Terminalをちょっと使いやすくする設定
  • WindowsでDockerが使えるようになる
  • VSCodeでDockerを用いたWeb開発ができるようになる
  • Dockerファイルを低コストで作れるようになる

構築した際の環境情報

  • OS: Windows Home
  • Docker DeskTop: 導入済
  • WSL2: 導入済
  • VSCode: 導入済

手順

有難い解説はすっ飛ばして構築手順。

１. WSLのインストール

スライド19～20に記載。
下記の記事でも解説されている。

tech-lab.sios.jp

PowerShellを管理者権限で起動し、以下のコマンドを実行する

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

２. Ubuntuのインストール

スライド21～27に記載。
「MicroSoft Store」で「WSL」を検索。
検索結果から「Ubuntu 18.04LTS」を選択して取得、インストール。

３. VSCodeのインストール

筆者は構築済だったので省略。

４. Windows Terminalのインストール

スライド32～33に記載。

「MicroSoft Store」で「Windows Terminal」を検索。
検索結果から「Windows Terminal（preview）」を選択して取得、インストール。

５. Docker Desktop For Windows のインストール

スライド78～80に記載。筆者は構築済だったので省略。

６. VSCodeで「Remote Development」拡張機能をインストール

code.visualstudio.com

７. VSCodeでDocker開発を体験

スライド81～92に記載。
（GitプッシュとDockerのデプロイは未実施）

tech-lab.sios.jptech-lab.sios.jp

  • 「.devcontainer/devcontainer.json」
{
  # 設定を一意に識別する任意の名称です。
  "name": "Hello",
 
  # コンテナを作成するためのDockerfileのファイル名を指定します。
  # Dockerfileの内容については後述します。
  "dockerFile": "Dockerfile",
 
  # この設定によりホストOSの80宛の通信がコンテナの80に転送されます。
  # ホストPCからブラウザで動作確認するために必要です。
  "forwardPorts": [80],
 
  # デフォルトではVisual Studio Codeからのコンテナ起動時のコマンドは
  # while sleep 1000; do :; doneに上書きされてしまいますが、それを防止します。
  "overrideCommand": false,
 
  # Gitリポジトリのsrcディレクトリを、Apacheのドキュメントルートである/var/www/htmlに
  # マウントします。
  "mounts": [
    "source=${localWorkspaceFolder}/src,target=/var/www/html,type=bind,consistency=cached"
  ]
}
  • 「.devcontainer/Dockerfile」
# PHPとApacheがインストールされたOfficialイメージをPullします。
FROM php:7.2.30-apache

# 修正したソースコードをGitリポジトリにアップするために
# コンテナ上にGitをインストールします。
RUN apt-get update && apt-get -y install git
  • 「src/index.php」
<?php
    echo "hogehoge";
?>

スライド92の内容まで実施すると「http://localhost:80/index.php」でindex.phpの内容が参照できるようになる。

WindowsとWSLの親和性

相互にアクセスができる。

Windows→WSLへのアクセス

パス「\wsl$」でアクセスできる。
Ununtuなら\wsl$\Ubuntu18.04

WSL→Windowsへのアクセス

パス「/mnt」でアクセスできる。
Cドライブなら/mnt/c

Windows TerminalのデフォルトターミナルをUbuntuにする

設定ファイル「setting.json」の defaultProfileにUbuntuのguidを設定する。

Windows Terminalのデフォルトフォント変更

設定ファイル「setting.json」の defaultsのfontFaceにフォントを設定する。

Windows Terminalをファイル名を指定して実行で実行できるようにする

1. CommandLine-Boot-WindowsTerminal.zipをダウンロードして展開します。
2. 管理者権限で「CommandLine-Boot-WindowsTerminal.reg」をダブルクリックして結合します。

「ファイル名を指定して実行」で wt を入力すると実行できるようになる。

UbuntuからDockerコマンドを実行できるようにする

おわりに

なんとなく使い方が見えたので、使ってみてプロジェクトに導入していきたい。
まずは社内PCに環境の構築を行う。