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, // 行末のスペース削除
"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有効
"[markdown]": {
"files.trimTrailingWhitespace": false,
"editor.formatOnSave": false
},
"[text]": {
"files.trimTrailingWhitespace": false,
"editor.formatOnSave": false
},
"":""
}
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
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 input
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/"
WSL2の場合
https://github.com/rupor-github/wsl-ssh-agent#wsl-2-compatibility
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
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/ からサイトにアクセス可能です。
コメント