「WSL2、Docker、VSCodeで劇的に改善されるWindows開発環境」を作った話
はじめに
「VS Code Meetup #7 - VSCodeConJPプレイベント」で発表されていたスライドを読んで実際にやってみた。
作成者は武井宜行さんという方。
構築していく中で詰まったところ、カスタマイズしたところをピックアップして備忘録とする。
自宅端末で環境構築をしたので、会社端末でも同じ環境を作成する際に補完できる記事とする。
内容を実践してできること
大きくは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: 導入済
手順
有難い解説はすっ飛ばして構築手順。
1. WSLのインストール
スライド19~20に記載。
下記の記事でも解説されている。
PowerShellを管理者権限で起動し、以下のコマンドを実行する
Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux
2. Ubuntuのインストール
スライド21~27に記載。
「MicroSoft Store」で「WSL」を検索。
検索結果から「Ubuntu 18.04LTS」を選択して取得、インストール。
3. VSCodeのインストール
筆者は構築済だったので省略。
4. Windows Terminalのインストール
スライド32~33に記載。
「MicroSoft Store」で「Windows Terminal」を検索。
検索結果から「Windows Terminal(preview)」を選択して取得、インストール。
5. Docker Desktop For Windows のインストール
スライド78~80に記載。筆者は構築済だったので省略。
6. VSCodeで「Remote Development」拡張機能をインストール
7. VSCodeでDocker開発を体験
スライド81~92に記載。
(GitプッシュとDockerのデプロイは未実施)
-
「.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に環境の構築を行う。