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などのシェアの多いディストリビューションはサポートされております。

https://learn.microsoft.com/ja-jp/windows/wsl/install

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

```sh:PowerShell
wsl --install -d Ubuntu-22.04

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

## WSL構成設定

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

https://learn.microsoft.com/ja-jp/windows/wsl/wsl-config#wslconfig

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

```sh:%UserProfile%\.wslconfig
[wsl2]
memory=4GB
swap=2GB
```

```sh:/etc/wsl.conf
[boot]
systemd=true
```

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

## Ubuntuのapt更新

```sh:Ubuntu
sudo apt update
sudo apt upgrade
```

## Ubuntuの日本語化

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

```sh:Ubuntu
sudo apt -y install language-pack-ja
sudo update-locale LANG=ja_JP.UTF8
```

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

```sh:PowerShell
wsl --shutdown
```

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

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

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

```sh:PowerShell
wsl --shutdown
```

# UbuntuからGithubへのSSH接続設定

予め、[Github](https://github.com/)アカウントを取得する必要があります。

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

https://docs.github.com/ja/authentication/connecting-to-github-with-ssh

## sshキー生成＆登録

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

### .sshフォルダ作成

```sh:Ubuntu
mkdir ~/.ssh
cd ~/.ssh
```

### sshキー生成

```sh: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キー登録](https://github.com/settings/keys)に、生成したSSH公開鍵を登録します。

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

### ssh接続チェック

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

### 接続チェック
ssh -T git@github.com
# 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`に以下の記述を追加します。

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

# Gitインストール

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

```sh:Ubuntu
sudo apt install git
```

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

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

https://azure.microsoft.com/ja-jp/products/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インストール

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

https://docs.docker.com/desktop/install/windows-install/

### 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にテストリポジトリを作成

https://github.com/perilla0/test

## VSCodeでUbuntu上にクローン

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

![gitクローン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715188/665d36f3-12f6-8948-1df0-2c8ba1006e76.png)

## クローン完了

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

![gitクローン後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715188/ac054925-a564-c84b-ea41-4c0d2f284e5c.png)

# Dockerコンテナ作成確認

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

## 確認用のDockerコンテナ作成

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

```sh:Ubuntu
docker run hello-world
```

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

![docker desktop.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715188/f57f4811-428d-d79e-117f-7a93c3ac621e.png)

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

![vscodeのdockerビュー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715188/6eff6a55-a20c-2ca5-8122-905865c2893b.png)

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

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

https://asdf-vm.com/