WindowsPCの開発環境(WSL+Docker+VSCode)構築手順

概要

WindowsPCの新調やクリーンインストールをした際に
開発環境をセットアップするための忘備録。 (2021/10/26時点)

0. Windows Updateを最新の状態にしておく

1. WSL導入

公式ガイドを参考に以下手順を実施する。

ⅰ. [WSLの準備コマンド(Ubuntu)]を実行する

[スタートボタンを右クリック] -> [A] -> [管理者用Powershellに以下をコピペ & 実行] -> [コマンドの実行が終了後、再起動]

wsl --install

ⅱ. [Ubuntu]の準備をする

[再起動後、Ubuntuの準備が終了するまで待機] -> [ユーザ名 & パスワードを登録]
※ 初回起動時のみ、時間がかかる。

1. Windows Terminalをインストール & 設定

[Windows Terminalを入手] -> [新たに出現したウィンドウを閉じる]
-> [起動] -> [Ctrl + ,] -> [以下の設定を行う]

• スタートアップ
  • 規定のプロファイル -> Ubuntu
• Ubuntu
  • ディレクトリの開始 -> \\wsl$\Ubuntu\home\******(ユーザ名)

2. Ubuntuの環境整備を行う

上記設定を行った Windows Terminal を再起動し、以下コマンドを順に実行する。

ⅰ. apt

① パッケージ一覧の更新

sudo apt -y update

② パッケージの更新

sudo apt -y upgrade

③ クリップボードコマンド

sudo apt -y install xsel

④ zip解凍コマンド

sudo apt -y install unzip

⑤ プログラム管理コマンド

sudo apt -y install make

ⅱ. home

① ログイン時の出力メッセージ省略のためのファイル

touch ~/.hushlogin

② ドキュメント置場(document)

mkdir ~/doc

③ 物置(miscellaneous)

mkdir ~/mis

④ ソースコード置場(source)

mkdir ~/src

ⅲ. bashrc

① bash起動時に読み込まれる設定

cat << 'EOS' >> ~/.bashrc

# Add by yourself.
alias lsa='ls -la'
alias pbcopy='clip.exe'
alias duc='du -hd 1 | sort -h'
alias docker-start='docker start $(docker ps -aq)'
alias docker-stop='docker stop $(docker ps -aq)'
alias docker-rm='docker rm $(docker ps -aq)'
alias docker-rmi='docker rmi -f $(docker images -aq)'
alias docker-rmv='docker volume rm $(docker volume ls -q)'

eval `ssh-agent` > /dev/null

EOS

② 上記設定の即時適用

source ~/.bashrc

ⅳ. Git

① Gitで使用されるユーザ名

git config --global user.name "******(ユーザ名)"

② Gitで使用されるメールアドレス

git config --global user.email ******(メールアドレス)

③ GitHubなどとやりとりするのに必要なssh鍵

ssh-keygen -t rsa -b 4096 -C "******(ssh鍵の名称)"

• 上記コマンド実行後、以下の質問に答える。
  • Enter file in which to save the key (/home/******(ユーザ名)/.ssh/id_rsa):
    -> そのままEnter
  • Enter passphrase (empty for no passphrase):
    -> ssh鍵のパスフレーズを入力
  • Enter same passphrase again:
    -> もう一度同じパスフレーズを入力

④ GitHubなどへssh接続する際に使用されるconfig

cat << 'EOS' >> ~/.ssh/config
Host *
  AddKeysToAgent yes
EOS

※ 上記configによって、ssh接続する度に求められるパスフレーズが初回のみとなる。

⑤ ssh公開鍵をクリップボードへコピー

cat ~/.ssh/id_rsa.pub | pbcopy

⑥ GitHubなどに公開鍵登録

3. Dockerをインストール

[ここから Docker Desktop for Windows をDL] -> [実行] -> [インストール設定はデフォルト]

4. Visual Studio Code(VSCode)をインストール

[ここからWindows版をDL] -> [実行]
-> [以下画像のインストール設定以外はデフォルト] -> [PC再起動]

5. Visual Studio Codeの拡張機能をインストール

拡張機能に関しては、個々人によって導入するものが違うので
私が導入している拡張機能について簡単に紹介する。

ⅰ.視認性向上

• Japanese Language Pack for Visual Studio Code
  • UIの日本語化。
• vscode-icons
  • ファイル形式がアイコンで見やすくなる。
• Bracket Pair Colorizer 2
  • 対となる括弧同士(),[],{} に同じ色を付与して見やすくする。
• Output Colorizer
  • プログラム実行した際の出力や、ログファイルを見やすくする。
• DotENV
  • envファイル(Laravelなど)を見やすくする。
• Rainbow CSV
  • csvファイルを見やすくする。
• indent-rainbow
  • インデントを見やすくする。

ⅱ.コーディングサポート

• Json Editor
  • jsonファイルの編集がしやすくなる。
• Markdown All in One
  • markdownファイルの編集がしやすくなる。
• Python
  • Pythonのコーディングがしやすくなる。
• Python Docstring Generator
  • Pythonのdocstring(関数の仕様説明)が書きやすくなる。
• PHP Intelephense
  • PHPのコーディングがしやすくなる。
• PHP DocBlocker
  • PHPのDockBlock(関数の仕様説明)が書きやすくなる。
• change-case
  • キャメルケースやスネークケースへの書式変換がしやすくなる。
• Path Intellisense
  • コード上で、ファイルパスの入力補完が効くようになる。
• zenkaku
  • 全角スペースを見やすくする。

ⅲ.その他

• Remote - WSL
  • WSL上のファイルをVSCodeで開くことができる。
• Remote - Containers
  • Docker上のファイルをVSCodeで開くことができる。
• Remote - SSH
  • ssh接続先のファイルをVSCodeで開くことができる。
• Docker
  • VSCode上でDockerが扱いやすくなる。
• GitLens — Git supercharged
  • VSCode上でGitが扱いやすくなる。
• Git Graph
  • Gitのコミット履歴が見やすくなる。
• Live Share
  • ペアプログラミングがリモートで可能になる。
• Draw.io Integration
  • 作図ツールのDraw.ioをVSCodeで使えるようにする。
• Partial Diff
  • ファイル差分を比較する右クリックメニューが追加される。
• Edit csv
  • csvファイルをExcelのように編集できる。

上記の拡張機能については、以下コマンドをWSL上で実行することで
一気にインストールすることが可能。

code --install-extension MS-CEINTL.vscode-language-pack-ja &&\
code --install-extension vscode-icons-team.vscode-icons &&\
code --install-extension CoenraadS.bracket-pair-colorizer-2 &&\
code --install-extension IBM.output-colorizer &&\
code --install-extension mikestead.dotenv &&\
code --install-extension mechatroner.rainbow-csv &&\
code --install-extension oderwat.indent-rainbow &&\

code --install-extension nickdemayo.vscode-json-editor &&\
code --install-extension yzhang.markdown-all-in-one &&\
code --install-extension ms-python.python &&\
code --install-extension njpwerner.autodocstring &&\
code --install-extension bmewburn.vscode-intelephense-client &&\
code --install-extension neilbrayfield.php-docblocker &&\
code --install-extension wmaurer.change-case &&\
code --install-extension christian-kohler.path-intellisense &&\
code --install-extension mosapride.zenkaku &&\

code --install-extension ms-vscode-remote.remote-wsl &&\
code --install-extension ms-vscode-remote.remote-containers &&\
code --install-extension ms-vscode-remote.remote-ssh &&\
code --install-extension ms-azuretools.vscode-docker &&\
code --install-extension eamodio.gitlens &&\
code --install-extension mhutchie.git-graph &&\
code --install-extension ms-vsliveshare.vsliveshare &&\
code --install-extension hediet.vscode-drawio &&\
code --install-extension ryu1kn.partial-diff &&\
code --install-extension janisdd.vscode-edit-csv

補足

• bashrcに追加したaliasコマンドについて

  • lsa
    -> カレントディレクトリの中身を全一覧(隠しファイルも含む)表示する。
  • pbcopy
    -> 出力をクリップボードに保存する。
    　 cat ******(ファイル名) | pbcopyといったように使う。
  • duc
    -> カレントディレクトリの各ファイル & 各ディレクトリ容量を、昇順で一覧表示する。
  • docker-stop
    ->現在起動中のDockerコンテナを例外なくすべて停止する。
  • docker-rm
    ->現在停止中のDockerコンテナを例外なくすべて削除する。
  • docker-rmi
    ->Dockerイメージを例外なくすべて削除する。
  • docker-rmv
    ->Dockerボリュームを例外なくすべて削除する。

• 非常に助けられた先人の知恵

  • よく使うLinuxコマンド
  • VS Code の便利なショートカットキー
  • Docker ドキュメント日本語化プロジェクト

参考記事

• aptコマンドチートシート
• コマンドでDockerコンテナを停止・削除、イメージの削除をする
• du -h -d 1 | sort -h が優勝
• ssh agentをパスフレーズ省略に応用する方法まとめ
• Macのpbcopyをubuntuでも使う