Windows 開発環境構築

Windows の開発環境構築を一連の流れで行ってみたいと思います。
主なアプリケーションは以下になります。

• Windows Package Manager (winget)
• Windows Subsystem for Linux 2 (WSL2)
• Windows Terminal
• Visual Studio Code (VS Code)
• Docker Desktop

PowerShell を起動してインストールを行っていきます。
インストール中に止まる場合があるので、その際は「Enter」を押してください。

WSL は「Debian」をインストールします。

Windows 設定

# "登録されている拡張子は表示しない" 無効
PS> Set-ItemProperty HKCU:\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced -name "HideFileExt" -Value 0

# "隠しファイル、隠しフォルダ、および隠しドライブを表示する" 有効
PS> Set-ItemProperty HKCU:\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced -name "Hidden" -Value 1

# "自動的に現在のフォルダーまで展開する" 有効
PS> Set-ItemProperty HKCU:\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced -name "NavPaneExpandToCurrentFolder" -Value 1

# ダークモード
PS> Set-ItemProperty HKCU:\SOFTWARE\Microsoft\Windows\CurrentVersion\Themes\Personalize -Name AppsUseLightTheme -Value 0

winget インストール

PS> Invoke-WebRequest -Uri https://github.com/microsoft/winget-cli/releases/download/v1.0.11692/Microsoft.DesktopAppInstaller_8wekyb3d8bbwe.msixbundle -OutFile DesktopAppInstaller.appx -UseBasicParsing
PS> Add-AppxPackage -Path DesktopAppInstaller.appx
PS> rm DesktopAppInstaller.appx
PS> winget -v

gsudo インストール

PS> winget install gerardog.gsudo
PS> $env:Path = [System.Environment]::GetEnvironmentVariable("Path","Machine") + ";" + [System.Environment]::GetEnvironmentVariable("Path","User")

WSL2 インストール

Windows の機能の有効化または無効化。

# Linux 用 Windows サブシステム
PS> gsudo dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

# 仮想マシン プラットフォーム
PS> gsudo dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

再起動する。

PS> Restart-Computer

WSL デフォルトバージョン設定。

PS> wsl --set-default-version 2

WSL2 Linux カーネル更新プログラム パッケージ をダウンロードしてインストール。

# WSL 2 Kernel Update
PS> Invoke-WebRequest -Uri https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi -OutFile wsl_update_x64.msi -UseBasicParsing
PS> msiexec /i wsl_update_x64.msi /passive /norestart
PS> rm wsl_update_x64.msi

「Debian」をインストール。

PS> winget install Debian.Debian

「Debian」起動。ユーザ名・パスワードを設定する。

PS> debian

※exitで終了

バージョン確認。

PS> wsl -l -v

Windows アプリインストール

Git

PS> winget install Git.Git

Windows Terminal

PS> winget install Microsoft.WindowsTerminal

Visual Studio Code

PS> winget install Microsoft.VisualStudioCode

Docker Desktop

PS> winget install Docker.DockerDesktop

VcXsrv

PS> winget install marha.VcXsrv

再起動する。

PS> Restart-Computer

フォントインストール

PS> Invoke-WebRequest -Uri https://github.com/yuru7/HackGen/releases/download/v2.3.5/HackGenNerd_v2.3.5.zip -OutFile HackGenNerd.zip -UseBasicParsing
PS> Expand-Archive -Path HackGenNerd.zip -DestinationPath .
PS> $fonts = (New-Object -ComObject Shell.Application).Namespace(0x14)
PS> dir HackGenNerd_v2.3.5/*.ttf | %{ $fonts.CopyHere($_.fullname) }
PS> rm HackGenNerd* -Recurse

VS Code 設定

拡張インストール

日本語化

PS> code --install-extension MS-CEINTL.VSCODE-LANGUAGE-PACK-JA

Remote Development

PS> code --install-extension ms-vscode-remote.vscode-remote-extensionpack

Docker

PS> code --install-extension ms-azuretools.vscode-docker

ユーザ設定

VS Code 起動

PS> code

※2 回目の起動で日本語になる

settings.jsonを開いて設定を保存。

Ctrl + Shift + P でjsonとコマンド入力。
設定を開く。

「基本設定：設定（JSON）を開く」
Preferences: Open Settings (JSON)

{
  "files.encoding": "utf8", // 既定のエンコード
  "files.eol": "\n", // 既定の改行文字
  "files.autoGuessEncoding": true, // エンコード自動判別
  "files.insertFinalNewline": true, // 最終行に改行
  "files.trimFinalNewlines": true, // 最終行をトリミング
  "files.trimTrailingWhitespace": true, // 行末のスペース削除
  "[markdown]": {
    "files.trimTrailingWhitespace": false // Markdownは行末のスペースを削除しない
  },

  "editor.fontFamily": "HackGenNerd",
  "editor.tabSize": 4,
  "editor.detectIndentation": false, // 開いたファイルからインデントを自動判別
  "editor.insertSpaces": true, // タブキーをスペース入力
  "editor.renderControlCharacters": true, // 制御文字を表示
  "editor.minimap.enabled": false, // ミニマップを表示

  "terminal.integrated.defaultProfile.windows": "Debian (WSL)",
  "terminal.integrated.scrollback": 2000,
  "terminal.integrated.windowsEnableConpty": true, // 選択したテキストを自動コピーする

  "emmet.triggerExpansionOnTab": true // Emmet有効
}

Windows Terminal 設定

Windows Terminal 起動

PS> wt

設定でsettings.jsonを VS Code で開く。

デフォルトを WSL(Debian) に設定。
配色やフォントの設定。

//...
        "defaultProfile": "{58ad8b0c-3ef8-5f4d-bc6f-13e4c00f2530}",
        "theme": "dark",

        "profiles":
        {
            "defaults":
            {
                "colorScheme": "One Half Dark",
                "fontFace": "HackGenNerd Console",
                "fontSize": 11
            },
//...
        }
//...

WSL(Debian) のホームを初期位置にする。

    "profiles":
    {
//...
        "list":
        [
//...
            {
                "guid": "{58ad8b0c-3ef8-5f4d-bc6f-13e4c00f2530}",
                "hidden": false,
                "name": "Debian",
                "source": "Windows.Terminal.Wsl",
                "commandline": "wsl.exe ~ -d Debian"
            },
//...
        ]
    },

WSL2 設定

Windows Terminal を起動し、WSL(Debian) を操作する。

sudo 設定

sudo visudo

%sudo  ALL=(ALL:ALL) NOPASSWD:ALL

.wslconfig

vi .wslconfig

[wsl2]
memory=8GB
processors=4
swap=0

mv .wslconfig /mnt/c/Users/$(/mnt/c/Windows/System32/cmd.exe /c "<nul set /p=%UserName%" 2>/dev/null)/

wsl.conf

デフォルトの状態だと、Windows 側のファイル・ディレクトリは、WSL 側から見るとすべて 777 のパーミッションになるので、/etc/wsl.conf ファイルを使って調整。

sudo vi /etc/wsl.conf

[automount]
options = "metadata,umask=22,fmask=11"

PowerShell を起動。
※Ctrl + Shift + 1で PowerShell 起動
WSL を再起動する。

PS> wsl -t Debian

再び Windows Terminal を起動し、WSL(Debian) を操作する。

日本語設定

sudo sed -i -E 's/# (ja_JP.UTF-8)/\1/' /etc/locale.gen
sudo locale-gen
sudo update-locale LANG=ja_JP.UTF-8
export LANG=ja_JP.UTF-8

パッケージアップグレード

sudo apt update
sudo apt upgrade -y

基本パッケージインストール

sudo apt install -y bash-completion curl dnsutils git jq locales nfs-client rsync ssh tree unzip vim wget zip fonts-ipafont

Node.js

sudo apt install -y nodejs npm
sudo npm install n -g
sudo n stable
sudo apt purge -y nodejs npm
sudo apt autoremove -y
exec $SHELL -l
node -v

yarn

sudo npm install -g yarn

ターミナル設定

vi ~/.bashrc

alias ls='ls -F --color=auto'
alias ll='ls -AlF --color=auto'
alias ..='cd ..'
alias ...='cd ../..'
alias ....='cd ../../..'

alias explorer='explorer.exe'
alias cdw='cd $USERPROFILE'

vi ~/.profile

export SSH_AUTH_SOCK="/mnt/c/wsl-ssh-agent/ssh-agent.sock"

USERPROFILE_RAW="$(/mnt/c/Windows/System32/cmd.exe /c "<nul set /p=%UserProfile%" 2>/dev/null)"
export USERPROFILE="$(wslpath $USERPROFILE_RAW)"

反映

source ~/.bashrc
source ~/.profile

Vim 設定

vi ~/.vimrc

syntax on
set encoding=utf-8
set number
set tabstop=4
set softtabstop=4
set expandtab
set shiftwidth=4
set backspace=indent,eol,start
set paste

Git

Windows 側をリンク。

touch /mnt/c/Users/$(/mnt/c/Windows/System32/cmd.exe /c "<nul set /p=%UserName%" 2>/dev/null)/.gitconfig
ln -s /mnt/c/Users/$(/mnt/c/Windows/System32/cmd.exe /c "<nul set /p=%UserName%" 2>/dev/null)/.gitconfig ~/.gitconfig

touch /mnt/c/Users/$(/mnt/c/Windows/System32/cmd.exe /c "<nul set /p=%UserName%" 2>/dev/null)/.git-credentials
ln -s /mnt/c/Users/$(/mnt/c/Windows/System32/cmd.exe /c "<nul set /p=%UserName%" 2>/dev/null)/.git-credentials ~/.git-credentials

git config --global user.name "name"
git config --global user.email name@email
git config --global credential.helper store
git config --global core.filemode false
git config --global core.autocrlf false

SSH

Windows 側をリンク。

mkdir /mnt/c/Users/$(/mnt/c/Windows/System32/cmd.exe /c "<nul set /p=%UserName%" 2>/dev/null)/.ssh
ln -s /mnt/c/Users/$(/mnt/c/Windows/System32/cmd.exe /c "<nul set /p=%UserName%" 2>/dev/null)/.ssh ~/.ssh

鍵作成

ssh-keygen -t rsa -b 4096 -C ""

SSH Config

mkdir ~/.ssh/conf.d

vi ~/.ssh/config

# VS Code Wildcards don't supported
Include ~/.ssh/conf.d/**/config

Host *
    IdentitiesOnly yes
    TCPKeepAlive yes
    ServerAliveInterval 60
    ServerAliveCountMax 10
    ForwardAgent yes

chmod 600 ~/.ssh/config

SSH 接続時背景色変更

vi ~/ssh-change-color.sh

#!/bin/bash

CMD_SSH=/usr/bin/ssh

COLOR_WORD_DEFAULT="#ffffff"
COLOR_BG_DEFAULT="#282c34"

COLOR_BG_1="#005563"

function color_change() {
  word=$1
  back=$2
  echo -ne "\e]10;${word}\a\e]11;${back}\a"
}

trap "color_change \"${COLOR_WORD_DEFAULT}\" \"${COLOR_BG_DEFAULT}\"" 2

color_change "${COLOR_WORD_DEFAULT}" "${COLOR_BG_1}"

$CMD_SSH "$@"

color_change "${COLOR_WORD_DEFAULT}" "${COLOR_BG_DEFAULT}"

chmod +x ~/ssh-change-color.sh

vi ~/.bashrc

alias ssh='~/ssh-change-color.sh'

反映

source ~/.bashrc

ssh-agent

wget https://github.com/rupor-github/wsl-ssh-agent/releases/download/v1.5.2/wsl-ssh-agent.zip
unzip wsl-ssh-agent.zip -d wsl-ssh-agent
mv wsl-ssh-agent /mnt/c/
rm wsl-ssh-agent.zip

ssh-agent 起動
PowerShell を起動。

PS> gsudo Set-Service ssh-agent -StartupType Automatic
PS> gsudo Start-Service ssh-agent
PS> exit

起動ファイル作成
Windows スタートアップにバッチ登録。

echo "start C:\wsl-ssh-agent\wsl-ssh-agent-gui.exe -socket C:\wsl-ssh-agent\ssh-agent.sock" > wsl-ssh-agent.bat
mv wsl-ssh-agent.bat "/mnt/c/Users/$(/mnt/c/Windows/System32/cmd.exe /c "<nul set /p=%UserName%" 2>/dev/null)/AppData/Roaming/Microsoft/Windows/Start Menu/Programs/Startup/"

VcXsrv (X サーバー) 設定

WSL の GUI アプリを VcXsrv で表示できるように設定する。

パッケージインストール

sudo apt install -y libgtk2.0-0 libgtk-3-0 libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb libgbm-dev fonts-ipafont

ディスプレイ設定

vi ~/.profile

export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2}'):0

反映

source ~/.profile

Windows のスタートアップに設定ファイル設置。

vi config.xlaunch

<?xml version="1.0" encoding="UTF-8"?>
<XLaunch
  WindowMode="MultiWindow"
  ClientMode="NoClient"
  LocalClient="False"
  Display="-1"
  LocalProgram="xcalc"
  RemoteProgram="xterm"
  RemotePassword=""
  PrivateKey=""
  RemoteHost=""
  RemoteUser=""
  XDMCPHost=""
  XDMCPBroadcast="False"
  XDMCPIndirect="False"
  Clipboard="True"
  ClipboardPrimary="True"
  ExtraParams="-ac"
  Wgl="True"
  DisableAC="False"
  XDMCPTerminate="False"
/>

mv config.xlaunch "/mnt/c/Users/$(/mnt/c/Windows/System32/cmd.exe /c "<nul set /p=%UserName%" 2>/dev/null)/AppData/Roaming/Microsoft/Windows/Start Menu/Programs/Startup/"

最後に

PowerShell を起動。
再起動する。

PS> Restart-Computer

---

動作確認

WSL GUI アプリ

WSL 上で Node.js のライブラリ Puppeteer 動かし、Chrome を操作します。

Windows Terminal を起動し、プロジェクトフォルダを作成します。

mkdir -p ~/projects/chromeOpen
cd ~/projects/chromeOpen

VS Code を起動します。

code .

Windows Terminal は終了して、VS Code 上のターミナルを起動します。
ターミナル起動 Ctrl + @

Puppeteer をインストールします。

npm install puppeteer

ファイルを作成して編集します。

touch open.js

const puppeteer = require("puppeteer");

(async () => {
  try {
    const browser = await puppeteer.launch({
      headless: false,
      slowMo: 30,
      args: [
        "--no-sandbox",
        "--disable-setuid-sandbox",
        "--window-size=1024,768",
      ],
    });

    const page = (await browser.pages())[0];

    await page.goto("https://yahoo.co.jp");

    await page.screenshot({ path: 'screenshot.png'});

    await page.waitForTimeout(5000);

    await browser.close();

  } catch (e) {
    console.log(e);
  }
})();

実行

node open

VS Code Remote Container

VS Code から Docker Desktop にコンテナを作成し起動します。

Windows Terminal を起動し、プロジェクトフォルダを作成します。

mkdir -p ~/projects/wordpress
cd ~/projects/wordpress

VS Code を起動します。

code .

コンテナ起動・接続の開発環境設定

mkdir .devcontainer
touch .devcontainer/docker-compose.yml
touch .devcontainer/devcontainer.json

version: '3'

services:

  wordpress:
    depends_on:
      - mariadb
    image: wordpress:latest
    ports:
      - "8000:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: mariadb
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress

  mariadb:
    image: mariadb:10.4
    volumes:
      - mariadb:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: wordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress

volumes:
  mariadb:
    driver: local

{
    "name": "WordPress",

    "dockerComposeFile": [
        "docker-compose.yml"
    ],

    "service": "wordpress",
    "workspaceFolder": "/var/www/html",

    "settings": {
    },

    "extensions": [
        "bmewburn.vscode-intelephense-client"
    ]
}

コマンドパレットもしくは、ステータスバーの左下からReopen in Containerを選択します。
VS Code が再起動されコンテナの構築が始まります。
完了後、指定のコンテナに接続した状態で再開されます。
この状態でコンテナ内での開発が行えます。

サンプルでは 8000 ポートを割り当てているので、http://localhost:8000/ からサイトにアクセス可能です。