Docker Desktopのインストール、Dockerfile作成、コンテナビルドと修正

## はじめに
Windows11Pro+WSL2+Ubuntu+Docker環境を構築し、
VS CodeからUbuntuに接続しプログラム作成、コンテナイメージ作成、
AWSのECRへプッシュ、ECSへのデプロイ・接続確認までを行います。

1. [WSL2のインストール](https://qiita.com/hiropon1839/items/126de61987a0daa8267d)
2. [Visual Studio CodeのインストールとUbuntu on WSL2への接続](https://qiita.com/hiropon1839/items/0f48d85733ad0c85b3b1)
3. **[Docker Desktopのインストール、Dockerfile作成、コンテナビルドと修正](https://qiita.com/hiropon1839/items/2af467975fb31bbb2819) (今回の記事)**
4. [AWS CLIインストール、IAMユーザー作成、アクセスキー作成、AWSリソースへのアクセス](https://qiita.com/hiropon1839/items/cd9d1e049ac5d0c07a64)
5. [AWS ECRリポジトリ作成、Ubuntu on WSL2からECRへのプッシュ](https://qiita.com/hiropon1839/items/52442eb55a58c0b409a0)
6. [AWS ECSのタスク定義、クラスタ作成、サービス作成](https://qiita.com/hiropon1839/items/d443d0073f12819f1a88)

:::note warn
以降では「WSL2上のUbuntu」を単に「Ubuntu」と表現します。
:::

## Docker Desktopのインストール

- 下記からDocker Desktopのインストーラーをダウンロードします。
https://docs.docker.com/desktop/wsl/#download

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/deef97c8-5252-2823-6357-c6b1058fb9a2.png)


インストーラーを実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/53666296-3e5c-0391-90af-40d36d98f9db.png)


「Use WSL2 instead of Hyper-V」にチェックが入っていることを確認し、「OK」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/9601d825-90a9-5a54-471c-044a90654285.png)


「Close and restart」をクリックします。

:::note warn
クリック後、すぐにWindowsが再起動します。
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/b39f339a-d1f4-870a-94b2-93e3bcd72f8f.png)


Windowsの再起動が完了すると、下記画面が表示されます。
「Accept」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/60ddabec-20f4-d397-d583-436f3ea7946c.png)

「Sign in」をクリックし、Docker IDでサインインします。
Docker IDを持っていない場合は新規作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/849185ac-08c9-5b12-21ee-6dafe4392ba6.png)

サインインした後の画面です。設定ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/f3f73861-bdd7-b3e1-3a9f-a0f21bb0c154.png)

「General」の中の「Use the WSL2 based engine」にチェックが入っていることを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/704b98da-f7ba-7111-bb61-adac59729dec.png)

「Resources -> WSL integration」の中で「Ubuntu」を有効にし、「Apply & restart」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/11610b51-8512-3b01-ba4a-2d1b40ca729f.png)

## dockerコマンドの確認
上記までの設定が完了すると、Ubuntu上で`docker`コマンドが利用可能になります。
hello-worldイメージを実行してみましょう。

```bash:bash
docker run hello-world
```
　
「Hello from Docker!」が表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/5453f5af-5a2a-1cc8-d833-9af20a766f7d.png)

※Docker Desktopが起動していない状態だと下記のようにエラーになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/9fb8bd81-eecf-1e0b-d162-16516262cfbc.png)

## テストアプリの作成
pythonのフレームワークflaskを利用して、簡単なテストアプリを作成し、コンテナ化します。

Ubuntuで下記を実行します。
```bash:bash
# ホームディレクトリに移動
cd

# myapp ディレクトリを作成
mkdir myapp

# myapp ディレクトリに移動
cd myapp

# カレントディレクトリ確認
pwd

# VS Code起動
code .
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/b4595516-e97c-3253-ab59-ad3a9202ecf1.png)


VS Codeで下記3ファイルを作成します。
```python:myapp.py
from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello, World!'

if __name__ == '__main__':
    app.run(host="0.0.0.0", port=int("5000"), debug=True)
```

```dockerfile:Dockerfile
# ベースとなるイメージを指定
FROM python:3.9

# 作業ディレクトリを設定
WORKDIR /app

# 依存関係を含むrequirements.txtをコピー
COPY requirements.txt .

# パッケージをインストール
RUN pip install --no-cache-dir -r requirements.txt

# アプリケーションのソースコードをコピー
COPY . .

# ポート5000を開放
EXPOSE 5000

# Pythonスクリプトを実行
CMD [ "python", "app.py" ]
```

```text:requirements.txt
Flask
```
　
下記のような状態になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/3b32a111-f045-a1e4-4a52-ead2f1cb0c9e.png)

## コンテナビルド
下記コマンドで、コンテナをビルドします。
WindowsターミナルからでもVS Codeからでもコマンド実行できます。以降の`docker`コマンドはWindowsターミナルで実行した例です。

```bash:bash
docker build -t myapp:v1 .
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/8b6d2fd6-44c2-889b-d0e0-008467708fee.png)

コンテナイメージが作成されたことを確認します。
```bash:bash
docker image ls
```
　
作成されたことが確認できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/1155c56f-9907-1cf2-1912-4e64206d9919.png)

## コンテナ起動
下記コマンドで、コンテナを起動します。

```bash:bash
docker run -p 5000:5000 myapp:v1
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/d1eaaf49-44ea-d95d-ee3e-1cf0fc7a4627.png)

ブラウザから下記にアクセスし、確認します。
http://localhost:5000/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/1695c4c2-7528-31ed-c7af-2b5fe123c3ae.png)

Ctrl + C でコンテナを終了します。


## コンテナ内アプリケーションの修正と確認
VS Codeからコードの修正と確認をスムーズに行います。
下記コマンドでコンテナを起動します。

```bash:bash
docker run -p 5000:5000 -v /home/hiropon/myapp:/app myapp:v1
```
「hiropon」は各自のユーザー名に読み替えてください。
Ubuntu上の`/home/hiropon/myapp`ディレクトリが、コンテナ内の`/app`ディレクトリにマウントされている状態でコンテナが起動します。
そのため、Ubuntu上のファイルをVS Codeから修正することで、起動しているコンテナに変更が反映されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/532ad1c5-7f8a-64a4-3684-5e1f300034df.png)

ブラウザから下記にアクセスし、確認します。
http://localhost:5000/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/004b948a-7e45-9990-4ccf-f74ab2eb6b4d.png)


VS Codeから`app.py`を修正し、保存します。

```diff_python:app.py
-    return 'Hello, World!'
+    return '<font color="red"><b>Hello, World!</b></font>'
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/937b3ee6-fc4f-e953-3a52-81d52c673c9b.png)


ブラウザから下記にアクセスし、表示が変更されていることを確認します。
http://localhost:5000/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/2a88d63a-d3e6-1b8d-2a0e-93a2647b3f9a.png)
Ctrl + C でコンテナを終了します。

## コンテナ再ビルド
アプリケーションの修正が完了したら、下記コマンドでコンテナをビルドします。タグは`v2`とします。

```bash:bash
docker build -t myapp:v2 .
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/1181ecaa-d5ec-26d5-8c9d-6b05baa782cc.png)


## 再・コンテナ起動
下記コマンドで、v2版のコンテナを起動します。

```bash:bash
docker run -p 5000:5000 myapp:v2
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/4da02936-cb65-eac4-5358-d5420439a3f4.png)

ブラウザから下記にアクセスし、確認します。
http://localhost:5000/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3488334/8d6d2374-e349-3c4b-0b17-77b28f126695.png)
Ctrl + C でコンテナを終了します。


## さいごに
Docker Desktopのインストール、コンテナのビルドが完了しました。
次回は、UbuntuからAWSリソースへ接続してみます。

コンテナの作成・修正方法は数多くありますが、今現在の自分がやりやすいと思う方法を紹介しました。
より便利な方法があるよ、という方いらっしゃいましたら是非コメントやTwitterで教えてください。

- [AWS CLIインストール、IAMユーザー作成、アクセスキー作成、AWSリソースへのアクセス](https://qiita.com/hiropon1839/items/cd9d1e049ac5d0c07a64)

## 参考ページ
- [WSL 2 での Docker リモート コンテナーの概要](https://learn.microsoft.com/ja-jp/windows/wsl/tutorials/wsl-containers) (Microsoft)