Docker開発手法案


# 開発フロー
## 個々の開発
![Docker開発個人.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/388964/f34e3e62-6066-4dc1-f65d-4a88b7275d6d.png)

各開発でのフローを上図に示した。
1. Gitからソースコード及び、コンテナの設計図であるDockerfileをPull(ダウンロード)する。
2. 開発者がDockerfileをbuildし、コンテナを立ち上げ、ソースコードをコンテナにマウントし、コンテナ内で開発を行う。
3. 開発したソースコードをコンテナ内からGitにPush(アップロード)を行う。（Dockerfileの変更後は適宜GitへPush）
4. 1~3を繰り返す。   

# 統合テスト
![Docker開発統合テスト.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/388964/479ddf5f-6bc0-5ed3-2fd0-1deb5e1afbf7.png)

統合テストのフローを上図に示した。
1. Gitからソースコード及び、コンテナの設計図であるDockerfile、各コンテナを同時に動かすための設計図であるdocker-compose.ymlをPull(ダウンロード)する。
2. 開発者がdocker-compose.ymlを用いて、コンテナを立ち上げ、ソースコードをコンテナにマウントし、コンテナ内で動作テストを行う。

# タスク
- それぞれのコンテナの環境設定
    - ライブラリ
    - バージョン
- Dockerfileの作成
- docker-compose.ymlの作成

# VS Codeを使用しての開発
## 拡張機能 Remote-Containers
https://code.visualstudio.com/docs/remote/containers

コンテナ内でVS Code Serverを立ち上げホストOSのVS Codeと通信によりローカル環境での開発が可能になる点、
コマンドを用いて、コンテナを立ち上げる必要もなくなるという利点をもつ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/388964/9634d5ab-1a4f-c124-c51c-b634bf05ccc6.png)

## 拡張機能インストール

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/388964/b61ebb44-c694-7420-26b8-d62a45adf6d6.jpeg" width=30%>

拡張機能から'Remote-Containers'をインストール

### 環境構築
任意のフォルダ（ここでは、Project）を作成し、その配下に.devcontainerというフォルダを作成します。
.devcontainerフォルダの中に、devcontainer.jsonとDockerfileを作成します。
```フォルダ
Project
  └ .devcontainer/
　　   ├ devcontainer.json
　　   └ Dockerfile
```
devcontainer.json、Dockerfileにそれぞれ以下を記述します。
```devcontainer.json
{
	"name": "Python Sample",
	"dockerFile": "Dockerfile",		// Dockerfileでイメージ・コンテナを作成
	"extensions": [					//リモート先のVS Codeにインストールする拡張機能
		"ms-python.python"
	]
}
```

```Dockerfile
FROM python:3.6
```
記述が終わったら、
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/388964/203a2ef6-1654-2924-7cc7-f414fd2e9ab5.jpeg" width=20%>

左下の緑の><マーク？をクリックする。

![スクリーンショット 2022-03-23 225338.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/388964/081411a1-c42c-d6e6-0531-f3e532a3436c.jpeg)

一番上のOpen Folder in Containerをクリックし、Projectフォルダを選択すると、コンテナが立ち上がる。

![スクリーンショット 2022-03-23 225404.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/388964/e9af841a-ae06-c1ca-be22-ad44464cc273.jpeg)

![スクリーンショット 2022-03-23 225555.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/388964/9d7676b3-7f34-bd06-e467-0fd08e016690.jpeg)

作成したコンテナにPythonがインストールされているのを確認する。

![スクリーンショット 2022-03-23 225530.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/388964/25fd7896-3baf-24c5-6835-70e78fb4aa6e.jpeg)

もし、Pythonの拡張機能にこのような表示が出ている場合には、クリックし、インストールします。

### Python動作確認

```
Project
  ├ test.py
  └ .devcontainer/
　　   ├ devcontainer.json
　　   └ Dockerfile
```
Project配下にtest.pyを作成し、以下を記述します。

```test.py
print("Hello World!!")
```

F5を押し、Pythonを起動させ、
![スクリーンショット 2022-03-23 230907.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/388964/d6019492-bd4f-e921-0ba3-c553838c633c.jpeg)

Hello World!!が出力されれば、成功です。

# 参考文献
https://tech-lab.sios.jp/archives/21675

https://chigusa-web.com/blog/vs-code%E3%81%A7docker%E3%81%AEpython%E7%92%B0%E5%A2%83%E3%81%A7%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%88%E9%96%8B%E7%99%BA/

https://qiita.com/Yuki_Oshima/items/d3b52c553387685460b0#vs-code-%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD