今更windows10でVSCode+WSL2(Ubuntu)の開発環境を作る

環境構築の覚書
散々擦られているので他の記事に書いてあることの焼き直し

環境
Windows 10 Pro 21H2

1. まずはWSLのインストール

わからなければ公式ドキュメント参照

wsl --install

2. Linuxディストリビューションのインストール

1で勝手にUbuntuがインストールされる時もあるらしいが、自分はインストールされてなかったので手動インストールする
wsl -l -oでインストールできるLinuxディストリビューションが確認できる

とりあえず新し目のUbuntuが良かったのでUbuntu-20.04をインストールする

wsl --install -d Ubuntu-20.04

スタートメニューに（Ubuntuをインストールした場合）Ubuntuが追加されてるので起動する→エラーがでる
文字化けして読めないがLinux カーネル更新プログラム パッケージってのをダウンロードし、インストールしろと言われるのでする
改めてUbuntuを起動し、アカウント名・パスワードを設定する
powershellでwsl -l -vを打つとUbuntuが動いているか確認できる

3. Docker Desktopのインストール

どこかからDocker Desktopをダウンロードしてきてインストールする
基本デフォルト設定で問題ないが、
「Install required Windows components for WSL 2」のチェックが入っているかだけ確認しとく
インストール後、wsl -l -vでdocker-desktopとdocker-desktop-dataが存在するか確認する

4. （やらなくてもいい）他ドライブにディストリビューションを移動

デフォルトのCドライブにインストールしているので後々邪魔になりそうなので、
Ubuntu-20.04, docker-desktop, docker-desktop-dataをexportし、削除後に他ドライブにinstallする

wsl --export Ubuntu-20.04 D:\Ubuntu-20.04.tar
wsl --export docker-desktop D:\docker-desktop.tar
wsl --export docker-desktop-data D:\docker-desktop-data.tar

Dドライブに.tarファイルが作成されているのを確認
元の環境を削除しておく

wsl --unregister Ubuntu-20.04
wsl --unregister docker-desktop
wsl --unregister docker-desktop-data

wsl -l -vすると空っぽになっている
作成した.tarファイルをD:\wsl\などにimportする

wsl --import Ubuntu-20.04 D:\wsl\Ubuntu-20.04 D:\Ubuntu-20.04.tar
wsl --import docker-desktop D:\wsl\docker-desktop D:\docker-desktop.tar
wsl --import docker-desktop-data D:\wsl\docker-desktop-data D:\docker-desktop-data.tar

wsl -l -vをしてUbuntu-20.04, docker-desktop, docker-desktop-dataが存在するか確認する

5. VSCodeのインストール

どこかからVSCodeをダウンロードしてインストール
VSCodeの拡張機能よりRemote - WSLをインストールし、サイドバーのリモートデスクトップよりUbuntu-20.04に接続する
接続したら左下にWSL: Ubuntu-20.04とでる

ここまでで使う土台は出来た
ここからは個人的に使いやすくする設定をしていく

方針

• 基本はDocker で開発するので環境に色々追加したりしない
  • gitくらいの予定
  • でも追加したほうが便利なのでasdfを入れる
• セキュリティを考えるとroot以外で作業すべきだが、dockerで作られたファイルの所有権がrootになって面倒くさいのでroot権限で構築する
  • 普通にアカウント分けたほうがええってなったので分ける
• keychain使う

ここからはVSCodeのリモートデスクトップよりUbuntu-20.04に接続し作業する
（Ubuntuの黒い画面でもできる）

接続し、ターミナルを開くとbashが開きrootでログインしているはず
（WSL2はuserを作らせておきながら何故かrootでログインされてる）
whoamiで今ログインしているユーザーを確認できる

6. Ubuntu設定

rootユーザーのパスワードを設定

設定していないので設定する

sudo passwd root

デフォルトユーザーの変更

このままだと起動時にrootに勝手になったりするので変える

ubuntu config --default-user ユーザー名

ちゃんとWSL内でユーザーが変わっているか確認、変わってなかったら切り替えておく

su ユーザー名

nameserverの設定

sudo apt update -y && sudo apt upgrade -yしようとするとコケる時があるのでGoogle の DNS サーバー(8.8.8.8)に変更する

/etc/resolv.confを編集すれば良いんだがWSLを起動するたびに再生成される様になっており、ファイル自体もシンボリックリンクになっているのでroot権限でも編集できない

設定で再生成されないように指定し、置いてあるresolv.conf を削除して新しく作る

1. まずは/etc/wsl.conf を編集する

WSL内でsudo vi /etc/wsl.confとかしよう

[network]
generateResolvConf = false

WSLの再起動かWindowsの再起動で反映されるっぽい

2. /etc/resolv.conf が残っていると思うので削除して作り直す

sudo rm /etc/resolv.conf
sudo touch /etc/resolv.conf

3. /etc/resolv.confにDNSサーバー（8.8.8.8）を指定する

nameserver 8.8.8.8

7. zsh+preztoの導入

zshを使いたいので導入する
参考:
https://zenn.dev/moroya/articles/0ab24a733e4b7a

とりあえず最初に入っているパッケージの更新をする

sudo apt update -y && sudo apt upgrade -y

zsh+preztoのインストール

sudo apt install zsh
zsh # 設定ファイルはこのあとpreztoで作るので(q)でそのまま何もしない
	
# preztoをインストール
git clone --recursive https://github.com/sorin-ionescu/prezto.git "${ZDOTDIR:-$HOME}/.zprezto"
	
# preztoのセットアップ
setopt EXTENDED_GLOB
for rcfile in "${ZDOTDIR:-$HOME}"/.zprezto/runcoms/^README.md(.N); do
  ln -s "$rcfile" "${ZDOTDIR:-$HOME}/.${rcfile:t}"
done
	
# デフォルトシェルをzshに変更
chsh -s /bin/zsh
	
# ターミナルを再起動
exec $SHELL -l

使いやすいようにpreztoのモジュールを追加する
code ~/.zpreztorcで編集していく

# Set the Prezto modules to load (browse modules).
# The order matters.
zstyle ':prezto:load' pmodule \
  'environment' \
  'terminal' \
  'editor' \
  'history' \
  'directory' \
  'spectrum' \
  'utility' \
  'completion' \
  'prompt' \
  'archive' \
  'autosuggestions' \
  'syntax-highlighting'

VSCodeのデフォルトで立ち上がるターミナルをzshにする
ctrl + shift + P でsetting jsonとかを検索してsetting.jsonを編集する

{
  "terminal.integrated.defaultProfile.linux": "zsh" //追加
}

8. GitとGitHub SSHの設定

基本の設定と使いやすいようにしていく
user.nameとuser.emailを設定をする

git config --global user.name "yourname"
git config --global user.email "email@your.email"

masterブランチを使っていると差別主義者として炎上するのでデフォルトのブランチをmainにする

git config --global init.defaultBranch main

git logをtree風に表示するaliasを登録する
参考:
https://chaika.hatenablog.com/entry/2021/09/08/170000

# 今いるブランチのツリーをシンプルに表示
git config --global alias.tree 'log --graph --oneline'
# 全てのブランチのツリーをいい感じに表示
git config --global alias.treeall 'log --graph --all --format="%x09%C(cyan bold)%an%Creset%x09%C(yellow)%h%Creset %C(magenta reverse)%d%Creset %s"'

ssh-keyを作成し、GitHubに登録する

ssh-keygen -t rsa -b 4096 -C "email@your.email"

パスワードを設定する
作成したpublic keyをコピー

cat ~/.ssh/id_rsa.pub | clip.exe

GitHubのSettings > SSH and GPG keysのnew SSH keyより登録する

code ~/.ssh/config

Host github.com
  User git
  Hostname ssh.github.com
  Port 443
  IdentityFile ~/.ssh/id_rsa

保存後ssh -T git@github.comで接続を確認する
これだと毎回パスワード入力を求められて面倒くさいのでssh-agentとkeychainを使う
参考：
https://zenn.dev/kaityo256/articles/ssh_agent_on_wsl

keychainのインストールをして起動する

# keychainのインストール
sudo apt-get install keychain
# keychainの起動とssh鍵の登録
/usr/bin/keychain -q --nogui $HOME/.ssh/id_rsa

（初回はパスワード入力を求められるかもしれない）
$HOME/.keychainに作られたシェルスクリプトを実行する

source $HOME/.keychain/$HOST-sh

これでパスワード入力は求められなくなると思うがこれだとWSL2を再起動するたびにコマンドを打つことになるので.zshrcに書き込んでおく

/usr/bin/keychain -q --nogui $HOME/.ssh/id_rsa
source $HOME/.keychain/$HOST-sh

source ~/.zshrcで再読み込みしてssh -T git@github.comで接続を確認する
パスワードを確認されなければ最高です

9. asdfのインストール

nodeを使いたいためasdfをインストールする
公式の手順を参考に、ZSH & Gitの方法でインストールする・

asdfのダウンロードから

git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.9.0

.zshrcに追記

. $HOME/.asdf/asdf.sh

# append copletions to fpath
fpath=(${ASDF_DIR}/completions $fpath)
# initialise completions with ZSH's compinit
autoload -Uz compinit && compinit

これでzshを再度起動するとasdfが読み込める様になっている
asdf --versionとかしてみる

nodeのインストールをするためにnodeのプラグインをインストールする

asdf plugin-add nodejs

インストールできるバージョンの取得

asdf list-all nodejs

ltsとか指定しても良い気がするがとりあえず16系の最新版を入れとく

asdf install nodejs 16.14.0

グローバルで使うバージョンを指定

asdf global nodejs 16.14.0

node -vしてみて反映されてたら完了