WSL+Ubuntu+Docker+VSCode+Githubの構築手順

はじめに

これまでの経験の中で、本番環境で実装やデバッグを行うという現場がしばしばありました。

システムに何らか変更を加える箇所をコメントアウトしながらデバッグ作業をするのですが、コメントアウトが漏れていないかと冷や冷やした記憶があります。

アプリケーションエンジニアとしては、本番環境から切り離され、なおかつ本番環境を再現したローカル開発環境でアプリロジックの変更、デバッグ作業が行えると、安心かつ効率的に変更作業が進められると考えております。

Docker Composeを活用すれば、何回かコマンドを打てば本番環境を模倣したローカル開発環境が作れたりします。環境ファイルなどを活用して環境の切り分けがうまくできればの話ではありますが...。

ローカル開発環境の構築が簡素化できれば、自分が担当するシステムについて詳しくない新人さんでも安心して触れる、他者に迷惑をかけない自分だけの開発環境を速やかに提供できます。人の移動が盛んな現場ほど、安心して試行錯誤できるローカル開発環境が重要と考えます。

本記事では、Docker Composeを使用したローカル開発環境の構築を見据え、WSL、Ubuntu、Docker、VSCode、Github環境をローカルマシンに構築する手順をまとめました。

なお、本記事はZennで記載した内容を移行したものです。
https://zenn.dev/perilla/articles/eeaf2ad64df53c

Windowsターミナルのインストール

コマンドプロンプト、PowerShell、Linuxシェル（主にbash）をタブを分けて使用できる便利な端末アプリです。

リンク先の手順に従い、インストーラをダウンロードしてインストールします。
https://learn.microsoft.com/ja-jp/windows/terminal/

WSLインストール

Windows上でLinux環境を実行する仕組みです。

ディストリビューションのisoファイルをダウンロードして...ディスクパーティションを分けてインストール...のような手間や、VMWareやVirtualboxをインストールする手間が無く、PowerShellコマンドをいくつか実行するだけでLinux環境が導入できます。インストール可能なディストリビューションは限られていますが、UbuntuやDebianやCentOSなどのシェアの多いディストリビューションはサポートされております。

PowerShellでwsl --versionが実行できない場合は、Microsoft StoreのライブラリでWSLを更新します。

PowerShell

wsl --install -d Ubuntu-22.04

# ユーザー名入力
Enter new UNIX username: 
# パスワード入力
New password:

WSL構成設定

以下のページを参照して、WSLの構成設定します。

• Windowsホストの%UserProfile%フォルダに.wslconfigファイルを作成
• Ubuntuの/etc/wsl.confを編集（現在は既に存在しますが、念のため確認）

%UserProfile%.wslconfig

[wsl2]
memory=4GB
swap=2GB

/etc/wsl.conf

[boot]
systemd=true

WindowsターミナルでPowerShellに切り替えて、Ubuntuを再起動します。

PowerShell

wsl --shutdown

Ubuntuのapt更新

Ubuntu

sudo apt update
sudo apt upgrade

Ubuntuの日本語化

言語パッケージをインストールします。
Windowsターミナルで、Ubuntuに切り替えます。

Ubuntu

sudo apt -y install language-pack-ja
sudo update-locale LANG=ja_JP.UTF8

WindowsターミナルでPowerShellに切り替えて、Ubuntuを再起動します。

PowerShell

wsl --shutdown

WindowsターミナルをUbuntuに切り替えて、言語パッケージをインストールします。

Ubuntu

sudo apt -y install manpages-ja manpages-ja-dev
sudo localectl set-locale LANG=ja_JP.UTF-8

WindowsターミナルでPowerShellに切り替えて、Ubuntuを再起動します。

PowerShell

wsl --shutdown

UbuntuからGithubへのSSH接続設定

予め、Githubアカウントを取得する必要があります。

以下のページを参照し、UbuntuとGithubとのSSH接続設定（WindowsではなくLinuxの手順）を行います。

sshキー生成＆登録

WindowsターミナルからWSL上のUbuntuを開いてコマンド操作します。

.sshフォルダ作成

Ubuntu

mkdir ~/.ssh
cd ~/.ssh

sshキー生成

Ubuntu

ssh-keygen -t ed25519 -C "[Githubに登録したメールアドレス]"

# Enter file in which to save the key ⇒ SSHキーファイル名を入力（省略可）
# Enter passphrase (empty for no passphrase): ⇒ パスフレーズを入力（省略可）

.sshフォルダにid_ed25519（秘密鍵）, id_ed25519.pub（公開鍵）ファイルが作成されます。

ssh公開鍵をGithubへ登録

GithubのSSHキー登録に、生成したSSH公開鍵を登録します。

• New SSH keyボタンを押して、Add new SSH Key画面を開きます
• Titleを任意で入力し、Key typeはAuthentication Keyを選択します
• KeyはUbuntuのシェルでcat id_ed25519.pubを実行して出力された値を入力します
• Add SSH Keyボタンを押してSSH公開鍵を登録します

ssh接続チェック

Ubuntu

# SSH秘密鍵を ssh-agent に追加する
eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_ed25519

### 接続チェック
ssh -T [e-mail]
# Are you sure you want to continue connecting ⇒ yesを入力
# Hi [Githubアカウント名]! You've successfully authenticated, but GitHub does not provide shell access.

sshエージェントの自動起動設定

WindowsターミナルでUbuntuを開いたときに自動でSSHエージェントを起動するよう設定します。
Ubuntuの~/.bashrcに以下の記述を追加します。

~/.bashrc

eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_ed25519 > /dev/null 2>&1
ssh-add -L

Gitインストール

UbuntuにGitをインストールします。

Ubuntu

sudo apt install git

VSCode（Visual Studio Code）インストール

以下のページを参照して、手順通りにインストールします。

拡張機能インストール

VSCode左サイドの拡張機能タブを開き、以下の拡張機能をインストールします。

• WSL
• Japanese Language Pack for Visual Studio Code

VSCodeからWSLのUbuntuを使用

VSCode画面左下の><からWSLの接続を選択して、WSL上のUbuntuに接続します。
VSCode画面上部メニューのターミナルタブから新しいターミナルを選択すると、VSCode上でUbuntuをコマンド操作できます。

VSCodeとGithubの連携設定

VSCodeの設定をGithubに保存したいときなどに設定します。

• VSCode画面左下のアカウントアイコンから、クラウドの変更を有効にしますを選択します
• Githubでサインインを選択します
• ブラウザで連携認証画面が表示されるので、Authorize Visual-Studio-Codeを選択します

Dockerインストール

以下のページを参照し、手順に沿ってインストールします。

Docker Desktop設定

Docker Desktopを開き、以下の設定を実施します。
Ubuntuが、Windows上のDockerを使用するようにします。

• 設定 -> General -> Use the WSL 2 based engineをチェックする
• 設定 -> Resources -> WSL integrationでUbuntu-22.04を使用するよう設定する

VSCodeで、Dockerという拡張機能をインストールします。

Gitクローン確認

Githubに存在するソースリポジトリをVSCodeのGUIでクローンできるか確認します。

Githubにテストリポジトリを作成

VSCodeでUbuntu上にクローン

• WSL上のUbuntuに接続
• 作業用フォルダを作成して移動（例: workspace）
• Git リポジトリのクローンを選択
• GitHubから複製を選択（ブラウザでサインイン）
• リポジトリの一覧が表示されるので選択

クローン完了

ファイルの変更を検出するようになります。
例えば、README.mdファイルを変更して保存すると、gitが変更を検出します。

Dockerコンテナ作成確認

Docker Desktopと、VSCodeのDocker拡張機能から、Dockerコンテナを管理できるか確認します。

確認用のDockerコンテナ作成

WindowsターミナルでUbuntuを開き、以下のコマンドを実行。

Ubuntu

docker run hello-world

Docker Desktopにhello-worldイメージ、コンテナが表示されているか確認します。

VSCodeのDocker拡張機能のコンテナ一覧にhello-worldイメージ、コンテナが表示されているか確認します。

さいごに

以上で、WSL、Ubuntu、Docker、VSCode、Github環境の構築は完了となります。

次回は、asdfという、様々なプログラミング言語のインストールやバージョン選択が行えるツールをWSLのUbuntuにインストールしたいと思います。