Windows10 で WSL2&Docker の環境構築

  - [0.WSL2 と Docker について](#0wsl2-と-docker-について)
  - [1. WindowsTerminal インストール](#1-windowsterminal-インストール)
  - [2. WSL2 をインストール](#2-wsl2-をインストール)
  - [3-1. Docker セットアップ(Docker インストール)](#3-1-docker-セットアップdocker-インストール)
  - [3-2. Docker セットアップ(権限設定\&動作確認)](#3-2-docker-セットアップ権限設定動作確認)
  - [3-3. Docker セットアップ(デーモンの自動起動設定)](#3-3-docker-セットアップデーモンの自動起動設定)
  - [(3-1.参考) その他の Docker インストール方法](#3-1参考-その他の-docker-インストール方法)
  - [4. Docker でブラウザゲーム実行環境を作成](#4-docker-でブラウザゲーム実行環境を作成)
  - [5. Docker Compose で WordPress サーバを立てる](#5-docker-compose-で-wordpress-サーバを立てる)
  - [(参考) 不要コンテナ\&イメージ削除](#参考-不要コンテナイメージ削除)

## 0.WSL2 と Docker について

_WSL2（Windows Subsystem for Linux2）_

- Windows で Linux 仮想環境を使うことができる OS 標準機能
- VirtualBox・VMware、クラウドいらず
- 現状 Ubuntu が標準でインストールされる

_Docker_

- コンテナ型仮想化ソフトウェア
- アプリに必要なもの(コード,ライブラリ,実行環境等)を全てまとめて配布できる
- コマンド一つで環境構築ができるイメージ

**本記事のゴールのイメージ**
![image_qiita.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3281137/efbfad42-b95c-88ac-48e6-b775b890e603.png)
## 1. WindowsTerminal インストール

- `設定`>`ストレージ`より空き容量確認
  - WSL2,Docker インストールのため、 20GB 程空があるのが望ましい
- MicrosoftStore を開き`Windows Terminal`を検索＆取得
  - MS アカウントでログインして共有するか聞かれたら基本 No でよい<br>(別端末で設定共有したいなどあれば Yes)
  - `Windows Terminal`インストール済の場合、最新版を取得

## 2. WSL2 をインストール

- winver で OS バージョン表示、[前提条件](https://learn.microsoft.com/ja-jp/windows/wsl/install#prerequisites)を満たすかチェック
- `Windowsの機能の有効化または無効化`>`Linux用Windowsサブシステム`のステータス確認
- PowerShell を管理者権限で起動し、以下コマンドを実行
  ```
  - 必要な機能の有効化、Linuxカーネル/Ubuntuのインストールを一括実行
  wsl --install
  ```
- 実行完了したら PC 再起動
- Ubuntu が起動し、ユーザ名/PW の設定が求められるので、任意の文字列を入力<br/>★ ユーザ名/PW は忘れないようにメモしておく
- 参考にしたサイト
  - [WSL2 のインストールと分かりやすく解説](https://chigusa-web.com/blog/wsl2-win11/)
  - [【動画】Windows11 に WSL2 をインストールする方法](https://www.youtube.com/watch?v=e3hg82e931k)
  - [【公式】 WSL のインストール](https://learn.microsoft.com/ja-jp/windows/wsl/install)

## 3-1. Docker セットアップ(Docker インストール)

- 以下コマンドを順次実行、WSL2 上の Ubuntu に Docker Engine をインストール

```
- パッケージ一覧を更新
sudo apt update

- Dockerインストールに必要なパッケージをインストール
sudo apt install -y ca-certificates curl gnupg lsb-release

- Dockerのofficial_GPG_key追加
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
ll /usr/share/keyrings/docker-archive-keyring.gpg

- Dockerのパッケージリポジトリをaptに追加 ※1~4行をまとめてコピペ&実行（echo ～ /dev/null）
echo \
"deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] \
https://download.docker.com/linux/ubuntu \
$(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
cat /etc/apt/sources.list.d/docker.list

- Dockerインストール
sudo apt update
sudo apt install -y docker-ce docker-ce-cli containerd.io
sudo docker -v
```

## 3-2. Docker セットアップ(権限設定&動作確認)

- 動作確認コマンドを実行

  ```
  - サンプルのDockerイメージを実行 ⇒ Dockerデーモンが停止しているとのエラーが出る
  docker run hello-world
  ```

- 以下コマンドを順次実行

  ```
    - Dockerデーモンを起動　⇒ 再度動作確認すると権限のエラーが出る
  sudo service docker start

  - dockerグループにユーザ追加(sudo無しでdockerコマンド実行可能とする)
  sudo usermod -aG docker $USER
  groups $USER

  - 再ログインして変更を反映
  su - ${USER}
  ```

## 3-3. Docker セットアップ(デーモンの自動起動設定)

- 以下コマンドを順次実行(`wsl --shutdown`は PowerShell,その他は Ubuntu で実行)

  ```
  - "PowerShell"で下記実行 ⇒ wsl2が再起動されるので、新規タブでUbuntuを開きなおす
  wsl --shutdown
  - サンプルのDockerイメージを実行 ⇒ Dockerデーモンが停止しているとのエラーが出る
  docker run hello-world

  - ログイン後に実行するスクリプトにDockerデーモンの起動を追加 ※EOFの行まではまとめてコピペ
  cat <<'EOF' >> ~/.profile
  # For Docker service start
  if service docker status 2>&1 | grep -q "is not running"; then
      wsl.exe -d "${WSL_DISTRO_NAME}" -u root -e /usr/sbin/service docker start >/dev/null 2>&1
  fi
  EOF
  cat ~/.profile
  ```

- 参考にしたサイト
  - [WSL2 に Docker Engine をインストール(Docker Desktop なし)](https://qiita.com/blueskyarea/items/ef262768c8f8f2ebe990)
  - [Windows で Docker Desktop を使わない Docker 環境を構築する (WSL2)](https://blog.jp.square-enix.com/iteng-blog/posts/00024-wsl2-docker-ce/)
  - [【公式】Install Docker Engine on Ubuntu](https://docs.docker.com/engine/install/ubuntu/)

## (3-1.参考) その他の Docker インストール方法

- インストールスクリプトを使う手順

  - 以下コマンドを実行
    ```
    curl -fsSL https://get.docker.com -o get-docker.sh
    sudo sh get-docker.sh
    ```

- `DockerDesktop`を利用する手順（Ubuntu には Docker をインストールしない）
  - `DockerDesktop for Windows`をブラウザ検索し、公式サイトを開く
  - DL したインストーラーを実行し、すべてチェックボックスを入れて続行
  - 完了後ダイアログの`Close and log out`をクリックし、PC からサインアウト
  - PC サインイン後に表示されるダイアログで「Accept」をクリック
- 参考にしたサイト
  - [【簡単な 4 つの方法】Ubuntu に Docker をインストールするには](https://kinsta.com/jp/blog/install-docker-ubuntu/)

## 4. Docker でブラウザゲーム実行環境を作成

- コンテナを起動し、ローカルでブラウザゲームを動かす

  - 以下コマンドを順次実行
    ```
    wget https://raw.githubusercontent.com/pianomanfrazier/lemmings-clone/master/server/docker-compose.yml
    cat ./docker-compose.yml
    docker compose up
    ```
    - `docker-compose up`(-あり)は、エラーになるので注意
      [docker compose と docker-compose、ハイフン有無で何が違うのか？](https://qiita.com/kotobuki5991/items/e2af78c11b4571f904e5)
  - http://localhost:3000 をブラウザで開く

- [【チートシート】docker コマンド一覧](https://zenn.dev/en2enzo2/articles/95b73cacfe0eb1) を見て気になるコマンドを試してみる

- 参考にしたサイト
  - [github ソースコード(Lemmings Clone)](https://github.com/pianomanfrazier/lemmings-clone)

## 5. Docker Compose で WordPress サーバを立てる

- Docker Compose で複数の Docker コンテナをまとめて定義できる

- wordpress と mysql のコンテナまとめてを起動(ウェブサーバと DB サーバ)

  - [dockerhub](https://hub.docker.com/_/wordpress)の`Example docker-compose.yml for wordpress:`の内容をコピー
  - 以下コマンドを順次実行
    ```
    - コピーした内容を貼り付けてwq:で保存終了
    vi ~/docker-compose.yml
    - docker-compose.ymlに定義された通りコンテナを起動
    docker compose up
    ```
  - http://localhost:8080 をブラウザで開く

- 参考にしたサイト
  - [【超初心者向け】Docker で WordPress をサクッと構築](https://dev.classmethod.jp/articles/beginner-docker-wordpress/)
  - [【初心者向け・図解】Docker Compose とは？](https://o2mamiblog.com/docker-beginner-2/)

## (参考) 不要コンテナ&イメージ削除

- 以下コマンドを順次実行

  ```
  - 全てのコンテナ一覧(停止中のコンテナ含む)
  docker ps -a
  - 全てのコンテナ停止
  docker stop $(docker ps -q)
  - 全てのコンテナ停止
  docker rm $(docker ps -q -a)
  - 全てのイメージ一覧
  docker images
  - 全てのイメージ削除
  docker rmi $(docker images -q)
  ```

- 参考にしたサイト
  - [Docker をまとめて開始/停止/削除する方法](https://syachiku.net/docker-all-command/)