💻

Windows10 / Web系開発環境はこれで決まり

2022/02/02に公開

前置き

複数のWindows端末を持っているが端末購入時期やバージョンによって開発環境の構築手順が違い、端末間で環境を揃えるのに苦労する事がよくある。
きっと同じような苦労を経験した多いと思うし、今でも何がベストか定まっていない人も多いと思う。
そこで自分がこれまで試した中で安牌だと思う開発環境の構築手順を紹介する。

開発環境の種類って

Windowsだけでも下記の方法がある。

  1. Windowsホスト直
  2. Hyper-Vなどの仮想PC
  3. VPSなどの安いサーバー
  4. WSL
  5. WSL2
  6. Docker

プログラムに携わった時期によると思うが大体上から順に経験しているのではないだろうか。

それぞれの開発環境を見る

1. Windowsホスト直

本番サーバーはLinuxになると思う、その為Windowsに直接開発環境を構築してしまうとOS自体の違いによるバグや動作差異が起きるリスクがある。OSが違う為に不具合発生時の調査にも時間がかかる可能性がある。

2. Hyper-Vなどの仮想PC

本番サーバーとほぼ同様の環境を用意出来るしネットワークの設定など何でも出来る、バックアップもコピペで済む、重い、ネットワーク回りなどで躓き易い。

3. VPSなどの安いサーバー

GlobalIPが振られておりネットワークに関わる設定やミドルウェアのテストなどもし易い、本番環境に似せられるまたは同一の環境を用意出来る。
使用言語によるがまともに使おうと思うと毎月2000円ぐらいかかる。ubuntuなら1000円ぐらいでもいいかもしれない。

4. WSL

WindwosでありながらLinuxと同じような環境に出来る、ファイルの処理速度も速い。
Linuxに似せているだけでありLinuxではない。

5. WSL2

これで良い、Ubuntu以外も使える

6. Docker

これがいくつかのパターンがある

6-1. Docker Desktop

WSL2バックエンドで動かす場合、データの永続化の為にはNamed Volumeを使うかホスト側(windows)のファイルをマウントする必要がある。しかしマウントしたらしたでファイルアクセスが非常に遅いという問題がある。ファイルシステムの違いが原因だと思われるので改善不可能。
Windows10Proの場合はHyper-Vバックエンドで動かす事でこの問題を回避出来る。
コンテナが増えると管理し辛い

6-2. Docker Desktop on WSL2

マウントしてもファイルアクセス速度の低下は無い。これでいい。

6-3. Docker Desktop on VPS

ちょっと設定を加える事でローカルで扱うdockerの対象をVPSのものに変更できる。VSCodeもちょっと設定を加える事でリモートコンテナに直接アクセスする事が出来る。
これはこれで良い。
VPSを使うので月額費用が掛かる事には変わりない。

やりたい事

ホストの環境を汚したくない。言語やプロジェクト毎に環境を分けたい。
5または6-2にしつつ、WSL2のイメージを複数用意する。
どんな状態かと言うとwsl -lと打った時に以下のような表示となるようにする。

> wsl -l
Linux 用 Windows サブシステム ディストリビューション:
Ubuntu-20.04-sandbox (既定)
Ubuntu-20.04-php
Ubuntu-20.04-rust
Ubuntu-20.04-deno

希望を満たせる環境構築の為の事前準備

必要なツールのインストール

  1. PowerShell7
  2. scoop
  3. Windows Terminal
  4. VSCode
  5. WSL2
  6. Ubuntu20.04のインストール

1. PowerShell 7のインストール

デフォルトのPowerShellを開いたら

ps
新しいクロスプラットフォームの PowerShell をお試しください https://aka.ms/pscore6

と表示されるので、URLに従いインストール

2. scoopのインストール

PowerShell 7
Set-ExecutionPolicy RemoteSigned -scope CurrentUser
iwr -useb get.scoop.sh | iex

https://scoop.sh/

3. windows terminalのインストール

PowerShell 7
scoop install windows-terminal

4. VSCodeのインストール

PowerShell 7
scoop install vscode

5. WSL2のインストール

https://docs.microsoft.com/ja-jp/windows/wsl/install

6. Ubuntu20.04のインストール

マイクロソフトストアを開いてubuntuと検索し、20.04をインストール
※ストアを使わず好きな方法でインストールしてもOK

ベースとなるイメージの構築

以下は前の手順でインストールしたUbuntu20.04内での作業となる

/etc/wsl.confの設定

wsl.cnf
[automout]
enabled = true
mountFsTab = false
options = "metadata,umask=22,fmask=11"

[interop]
appendWindowsPath = false

[user]
default=windowsusername

汎用的なミドルウェアのインストール

wsl2
$ sudo apt install build-essential zip gzip curl git pkg-config libssl-dev language-pack-ja manpages-ja manpages-ja-dev
$ sudo update-locale LANG=ja_JP.UTF-8

dockerインストール

wsl2
sudo apt update
sudo apt install apt-transport-https ca-certificates gnupg lsb-release
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
echo "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt update
sudo apt install docker-ce docker-ce-cli containerd.io
sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose

windowsのvimへリンク張る(重要)

wsl2
ln -s /mnt/c/Users/username/scoop/apps/vscode/current/bin/code

汎用的な設定(省略)

自分がよく設定するもの

  • vimrc
  • molokai
  • デフォルトエディタの設定
  • パスワード未設定に戻す
  • bashrc ※dockerやasdf関係などのサービスを起動するスクリプトを仕込んどく

ベースイメージのexport

ps
wsl --shutdown
wsl --export Ubuntu-20.04 ubuntu20_04_baseimage.tar

希望を満たせる環境構築手順

1. ベースイメージを基にイメージ作成

ベースイメージからUbuntu-20.04-rustを作る例

wsl --import Ubuntu-20.04-rust F:\path\to\rust\ .\ubuntu20_04_baseimage.tar

2. 環境構築

Ubuntu-20.04-rustの起動

ps
wsl.exe -d Ubuntu-20.04-rust

環境構築をする!

wsl2
apt install ~~~~

3. WindowsTerminalの設定(重要)

以降は1~3を繰り返す
不要になったイメージはunregister

まとめ

  • scoopを使う
  • windows terminalを使う
  • イメージのベースとなる環境を構築する
  • ベースのイメージをエクスポートする
  • エクスポートしたベースを使い改めてイメージに名前を付けてインポートし環境を構築する

Discussion