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

ivgtr 2022/03/17に更新

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

環境
Windows 10 Pro 21H2

ivgtr 2022/02/10に更新

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

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

powershell

wsl --install

ivgtr 2022/02/10に更新

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

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

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

powershell

wsl --install -d Ubuntu-20.04

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

ivgtr 2022/02/06

3. Docker Desktopのインストール

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

ivgtr 2022/02/10に更新

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

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

powershell

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ファイルが作成されているのを確認
元の環境を削除しておく

powershell

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

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

powershell

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が存在するか確認する

ivgtr 2022/02/06

5. VSCodeのインストール

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

ivgtr 2022/03/17に更新

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

方針

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

ivgtr 2023/10/17に更新

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

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

ivgtr 2023/10/17

homebrewインストールがrootユーザーじゃできないので追加する

ivgtr 2022/03/17に更新

6. Ubuntu設定

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

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

bash

sudo passwd root

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

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

powershell

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

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

bash

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とかしよう

/etc/wsl.conf

[network]
generateResolvConf = false

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

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

bash

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

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

/etc/resolv.conf

nameserver 8.8.8.8

ivgtr 2022/04/14

デフォルトユーザーの変更について

refs: https://devlights.hatenablog.com/entry/2021/05/29/070000

powershellでubuntuコマンドを打とうとしたらパスが通ってなかったのでこっちの/etc/wsl.confに設定する方がいいかもしれない

1. rootユーザーでWSLに入り`sudo vi /etc/wsl.conf`して以下を追記

/etc/wsl.conf

[user]
default=user-name

ivgtr 2022/02/10に更新

7. zsh+preztoの導入

zshを使いたいので導入する
参考:

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

bash

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

zsh+preztoのインストール

bash

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で編集していく

.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を編集する

setting.json

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

ivgtr 2022/04/15

`sudo apt update`だけだとGitのバージョンが古かったりする

refs: https://zenn.dev/kenkyu/articles/788460559d195c

バージョンが古いとswitchなどの便利コマンドが使えない
これでインストールできるのはUbuntu 公式のパッケージリポジトリに依存するらしい？
Personal Package Archives (PPA) を追加することでGitは対応可能

bash

sudo add-apt-repository ppa:git-core/ppa

Enterを押して進める

この後にいつも通りパッケージ更新

bash

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

git --versionすると最新のものになっている

ivgtr 2023/10/17

preztoが重いのでここらへんの設定はMacBookの設定準拠で変更する

ivgtr 2022/02/10に更新

8. GitとGitHub SSHの設定

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

zsh

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

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

zsh

git config --global init.defaultBranch main

git logをtree風に表示するaliasを登録する
参考:

zsh

# 今いるブランチのツリーをシンプルに表示
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に登録する

zsh

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

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

zsh

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

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

zsh

code ~/.ssh/config

~/.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を使う
参考：

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

zsh

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

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

zsh

source $HOME/.keychain/$HOST-sh

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

.zshrc

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

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

ivgtr 2022/03/17に更新

9. asdfのインストール

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

asdfのダウンロードから

zsh

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

.zshrcに追記

~/.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のプラグインをインストールする

zsh

asdf plugin-add nodejs

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

zsh

asdf list-all nodejs

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

zsh

asdf install nodejs 16.14.0

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

zsh

asdf global nodejs 16.14.0

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

このスクラップは2022/03/06にクローズされました

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

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

3. Docker Desktopのインストール

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

5. VSCodeのインストール

方針

6. Ubuntu設定

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

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

nameserverの設定

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

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

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

デフォルトユーザーの変更について

1. rootユーザーでWSLに入りsudo vi /etc/wsl.confして以下を追記

7. zsh+preztoの導入

sudo apt updateだけだとGitのバージョンが古かったりする

8. GitとGitHub SSHの設定

9. asdfのインストール

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

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

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

1. rootユーザーでWSLに入り`sudo vi /etc/wsl.conf`して以下を追記

`sudo apt update`だけだとGitのバージョンが古かったりする