Windows 開発環境構築

Windows 開発環境。

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

winget インストール

※インストールされていない場合のみ
https://apps.microsoft.com/store/detail/9NBLGGH4NNS1

Windows Terminal インストール

※インストールされていない場合のみ
コマンドプロンプト起動。

cmd

CMD> winget install Microsoft.WindowsTerminal

gsudo インストール

Windows Terminal起動。

wt

PowerShellから設定。

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

Windows 設定

PowerShellから設定。

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

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

# "自動的に現在のフォルダーまで展開する" チェックON
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

# "高速スタートアップを有効にする" チェックOFF
PS> sudo Set-ItemProperty -Path "HKLM:\SYSTEM\CurrentControlSet\Control\Session Manager\Power" -Name HiberbootEnabled -Value 0

WSL2 インストール

PS> sudo wsl --install --distribution Debian

再起動する。

PS> Restart-Computer

ユーザ名・パスワードを設定する。

Windows アプリインストール

Git

PS> winget install Git.Git

Visual Studio Code

PS> winget install Microsoft.VisualStudioCode

Docker Desktop

PS> winget install Docker.DockerDesktop

nano

PS> sudo winget install GNU.Nano

その他

PS> winget install dbeaver.dbeaver

PS> winget install WinSCP.WinSCP

PS> winget install GIMP.GIMP

PS> winget install Inkscape.Inkscape

PS> winget install Levitsky.FontBase

RLogin

PS> Invoke-WebRequest -Uri https://github.com/kmiya-culti/RLogin/files/9193732/rlogin_x64.zip -OutFile rlogin_x64.zip -UseBasicParsing
PS> Expand-Archive -Path rlogin_x64.zip -DestinationPath ./RLogin
PS> rm rlogin_x64.zip

再起動する。

PS> Restart-Computer

フォントインストール

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

Windows Terminal 設定

Windows Terminal 起動

wt

設定

デフォルトを WSL に設定。
ターミナルでの配色やフォント設定など。

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

        "profiles":
        {
            "defaults":
            {
                "colorScheme": "One Half Dark",
                "font":
                {
                    "face": "HackGen Console NFJ",
                    "size": 11
                }
            },
        ],
...

WSL2 設定

.wslconfig

vi .wslconfig

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

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

wsl.conf

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

sudo vi /etc/wsl.conf

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

PowerShell を起動。

PS> wsl --shutdown

WSL を終了する。

sudo

sudo visudo

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

日本語設定

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 fonts-ipafont git imagemagick jq locales nfs-client patch rsync sqlite3 tree wget vim whois zip

GUI

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 feh

Node.js

nvm

sudo apt install curl 
curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
source ~/.profile

nvm install --lts

yarn

npm install -g yarn

シェル設定

vi ~/.bashrc

# some more ls aliases
alias ll='ls -l'
alias la='ls -A'
alias l='ls -CF'

alias ..='cd ..'
alias ...='cd ../..'
alias ....='cd ../../..'

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

vi ~/.profile

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

" ファイル保存時にディレクトリがなかったら作成するか問う
augroup vimrc-auto-mkdir
  autocmd!
  autocmd BufWritePre * call s:auto_mkdir(expand('<afile>:p:h'), v:cmdbang)

  function! s:auto_mkdir(dir, force)
    if !isdirectory(a:dir) && (a:force || input(printf('"%s" does not exist. Create? [y/N]', a:dir)) =~? '^y\%[es]$')
      call mkdir(iconv(a:dir, &encoding, &termencoding), 'p')
    endif
  endfunction
augroup END

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設定例
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 input
git config --global init.defaultBranch main

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

---

追加

mkdir ~/.ssh/conf.d/sample

vi ~/.ssh/conf.d/sample/config

Host sample
 HostName sample
 Port 22
 User sample
 IdentityFile ~/.ssh/conf.d/sample/id_rsa

chmod 600 ~/.ssh/conf.d/sample/config

※ワイルドカードがサポートされていない場合。
vi ~/.ssh/config

Include ~/.ssh/conf.d/sample/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.6.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 を起動。

# PowerShell
PS> sudo Set-Service ssh-agent -StartupType Automatic
PS> sudo Start-Service ssh-agent

起動ファイル作成
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/"

sudo apt install socat

vi ~/.bashrc

export SSH_AUTH_SOCK=$HOME/.ssh/agent.sock
ss -a | grep -q $SSH_AUTH_SOCK
if [ $? -ne 0 ]; then
    rm -f $SSH_AUTH_SOCK
    ( setsid socat UNIX-LISTEN:$SSH_AUTH_SOCK,fork EXEC:"/mnt/c/wsl-ssh-agent/npiperelay.exe -ei -s //./pipe/openssh-ssh-agent",nofork & ) >/dev/null 2>&1
fi

chmod 755 /mnt/c/wsl-ssh-agent/npiperelay.exe

反映

source ~/.bashrc

VS Code 設定

# PowerShell
PS> nano $env:APPDATA\Code\User\settings.json

{
    "editor.fontFamily": "HackGen Console NFJ",
}

拡張機能をインストール。

# 日本語化
PS> code --install-extension MS-CEINTL.vscode-language-pack-ja

# リモート開発
PS> code --install-extension ms-vscode-remote.vscode-remote-extensionpack

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

---

動作確認

WSL GUI アプリ

mkdir -p ~/projects/test-chrome
cd ~/projects/test-chrome
code .

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

feh screenshot.png

VS Code Remote Container GUI アプリ

mkdir -p ~/projects/test-chrome-container
cd ~/projects/test-chrome-container
code .

mkdir .devcontainer

touch .devcontainer/devcontainer.json

{
    "name": "Node",
    "dockerComposeFile": [
        "docker-compose.yml"
    ],
    "service": "node",
    "workspaceFolder": "/app",
    "remoteUser": "node"
}

touch .devcontainer/Dockerfile

FROM node:lts-bullseye

RUN apt update && apt install -y \
    libgtk2.0-0 libgtk-3-0 libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb libgbm-dev fonts-ipafont feh

touch .devcontainer/docker-compose.yml

services:
  node:
    build:
      context: ./
    tty: true
    environment:
      - DISPLAY=:0
      - PULSE_SERVER=$PULSE_SERVER
      - WAYLAND_DISPLAY=$WAYLAND_DISPLAY
      - XDG_RUNTIME_DIR=$XDG_RUNTIME_DIR
    volumes:
      - ../:/app
      - /tmp/.X11-unix:/tmp/.X11-unix
      - /mnt/wslg:/mnt/wslg

Ctrl + Shift + P で VS Code コマンド入力。

Dev Container: Reopen in Container

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

feh screenshot.png

その他

WSL のプロンプトをカスタマイズ

Starship

Starship: Cross-Shell Prompt

Starship is the minimal, blazing fast, and extremely customizable prompt for any shell! Shows the information you need, ...

starship.rs

インストール

curl -fsSL https://starship.rs/install.sh | sh

vi ~/.bashrc

eval "$(starship init bash)"

反映

source ~/.bashrc

設定

mkdir -p ~/.config && touch ~/.config/starship.toml

vi ~/.config/starship.toml

scan_timeout = 10

[battery]
full_symbol = "🔋"
charging_symbol = "🔌"
discharging_symbol = "⚡"

[battery.display]
threshold = 30
style = "bold red"

[character]
disabled = false
success_symbol = "[✔ ](bold green)"
error_symbol = "[✖ ](bold red)"

[cmd_duration]
format = "[ ⌚ $duration]($style)"
style = "bold yellow"

[directory]
truncation_length = 5
format = "[$path]($style)[$lock_symbol]($lock_style) "

[docker_context]
format = " [🐋 $context](blue bold)"

[git_branch]
symbol = " "

[git_commit]
commit_hash_length = 8
style = "bold white"

[git_state]
format = '[\($state( $progress_current of $progress_total)\)]($style) '

[git_status]
conflicted = "⚔️ "
ahead = "🏎️ 💨 ×${count}"
behind = "🐢 ×${count}"
diverged = "🔱 🏎️ 💨 ×${ahead_count} 🐢 ×${behind_count}"
untracked = "🛤️  ×${count}"
stashed = "📦 "
modified = "📝 ×${count}"
staged = "🗃️  ×${count}"
renamed = "📛 ×${count}"
deleted = "🗑️  ×${count}"
style = "bright-white"
format = "$all_status$ahead_behind"

[nodejs]
format="[ 🍀 ($version )]($style)"
disabled = false

[memory_usage]
threshold = 70
style = "bold dimmed blue"
format = "[ 🧺 (${ram_pct})]($style) "
disabled = false

[package]
disabled = true

[time]
time_format = "%T"
format = "🕙 $time($style) "
style = "bold dimmed white"
disabled = false

[username]
style_user = "bold dimmed blue"
show_always = true

バックアップ

PowerShellから設定。

PS> mkdir backup

PS> nano backup.ps1

## WSLバックアップ
$CurrentDir = Split-Path $MyInvocation.MyCommand.Path
wsl --export debian $CurrentDir"/backup/debian.tar"

PS> $Trigger = New-ScheduledTaskTrigger -Weekly -DaysOfWeek Thursday -At 19:30
PS> $Action = New-ScheduledTaskAction -Execute "%Systemroot%\System32\WindowsPowerShell\v1.0\powershell.exe" -Argument "%UserProfile%\backup.ps1"
PS> Register-ScheduledTask -TaskName "バックアップWSL" -Action $Action -Trigger $Trigger