Docker Compose開発環境構築(バックエンド)

# 前提
開発環境の構築を行う前に、以下がそれぞれインストールしてあるか確認してください。
- Docker
    - 導入、動作確認は[こちら](https://qiita.com/yunTum/private/5a5de50585c7f69389c7#%E5%AE%9F%E8%B7%B5)を参考に
- Git
    - 各自でインストールしてください、例えば、
        - [GitHubの導入〜基本操作 for Windows](https://qiita.com/Kenta-Okuda/items/c3dcd60a80a82147e1bf)
        - [【Windows】Gitの環境構築をしよう！](https://prog-8.com/docs/git-env-win)
# 全体の流れ
これから説明する開発フローとして、

Gitレポジトリからclone → docker-compose実行 → 開発 → Gitレポジトリへpush

という流れとなっています。
![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/388964/9a104818-c777-46b6-4bf9-df2b768f92b2.png)
今回は、赤枠のPostgreSQLとPython-Djnagoをコンテナとして立ち上げています。
これらは、docker-composeによって自動的に起動させることができます。
![バックエンド構成図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/388964/8034df5a-c8a4-4910-dedd-27416cf79934.png)
では、実際に、構築を行っていきます。

# 共通のフォルダを用意
まず、Githubから開発する共通のフォルダを用意します。

https://github.com/bluespace-llc/chat_app

コマンドプロンプトを開き、以下のコマンドを入力するか、

```
$ git clone https://github.com/bluespace-llc/chat_app.git
```

GitHub Desktopで開くか、レポジトリを直接登録し、フォルダ一式をclone(レポジトリのフォルダを複製)します。
この辺は調べてもらえると助かります。
![スクリーンショット 2022-03-29 225804.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/388964/03720e6a-61a1-68c6-4c5b-ca91b73fcdcc.jpeg)

https://docs.github.com/ja/repositories/creating-and-managing-repositories/cloning-a-repository

## chat_appフォルダの中身
フォルダ配置は以下のようになっています。
```
chat_app/
　├ .git
　│
　├ backend/
　│　├ Dockerfile/
　│　├ requirements.txt
　│　└ project/
　│　　　├ chatapp/(略)
　│　　　├ project/(略)
　│　　　└ manage.py
　│
　├ frontend/(略)
　│　├ project/
　│　└ Dockerfile/
　│
　└ docker-compose.yml
```
.gitはgit管理用のフォルダなので、気にしないで、そのままに。

chat_app配下に、backend、frontendのフォルダとdocker-compose.ymlというファイルが存在します。
backend、frontendのフォルダ配下に、それぞれDockerfileが存在し、docker-compose.ymlがそれを読み取り、コンテナを立ち上げています。
フォルダを指定しているので、この配置は動かさないように！

backend配下のprojectフォルダにDjangoのプロジェクトが配置されており、このフォルダをコンテナにマウントする（ローカルPCからコンテナにフォルダをコピー）形式をとっています。
requirements.txtには、Pythonで使用するライブラリとそのバージョンが記述されており、それをもとにコンテナへインストールしています。

# コンテナを起動
:::note warn
先にDockerを起動します。
:::
## コマンドでの操作
コマンドプロンプトを開いて、カレントディレクトリをchat_appにします。
そして、以下のコマンドで入力することで、コンテナを起動させます。
```
$ docker-compose up -d
 ```
-dオプションはバックグラウンドで起動できるそう。

https://qiita.com/HorikawaTokiya/items/fbe5b7c27ea1c0209e3c
```
C:\Users\xxx\Documents\GitHub\chat_app>docker-compose up -d
Starting chat_app_db_1 ... done
Starting chat_app_backend_1 ... done
Starting chat_app_frontend_1 ... done
```
コンテナのリスタートは、
```
$ docker-compose restart
 ```
中断は、
```
$ docker-compose stop
 ```
終了は、
```
$ docker-compose down
 ```

また、execコマンドでコンテナ内をコマンドで操作することもできます。
 ```
$ docker-compose exec コンテナ名 コマンド
 ```
例えば、コマンドから直接サーバを立ち上げることもできます。
`$ docker-compose exec backend python manage.py runserver`

## VS Codeを使用しての起動方法

![スクリーンショット 2022-04-21 064848.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/388964/77110b4d-797e-6f24-cc4a-58fcfdc92dc7.jpeg)
VS Codeの左のタブから拡張機能を選び、"Docker"を検索、Dockerをインストールする。
左のタブに、クジラが追加されていれば、インストール完了です。

chat_appフォルダを開き、docker-compose.ymlを右クリック。
![スクリーンショット 2022-04-21 095028.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/388964/a3b6193e-d63c-6a3d-3fd0-28f5713e5b64.jpeg)
下の方にある、Compose Upをクリックすると、コンテナが立ち上がります。
![スクリーンショット 2022-04-21 095213.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/388964/63e85c57-70bc-2521-4f8b-b93a90427590.jpeg)
すると、Docker Hubからのダウンロードと、フォルダの配置等が行われます。
![スクリーンショット 2022-04-21 095434.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/388964/3cfd2088-d365-177c-a9e4-c8a3e0e418a9.jpeg)
```
[+] Running 4/4
 - Network chat_app_default       Created                                                                                                                                                                              0.7s 
 - Container chat_app-db-1        Started                                                                                                                                                                              3.2s
 - Container chat_app-backend-1   Started                                                                                                                                                                              3.4s
 - Container chat_app-frontend-1  Started                                                                                                                                                                              4.8s

ターミナルはタスクで再利用されます、閉じるには任意のキーを押してください。
```
この表示が出れば、コンテナの立ち上げが完了です。
## コンテナの動作確認
Dockerで確認してみます。
![スクリーンショット 2022-04-21 095612.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/388964/2dc23d8e-1c7c-83e4-4e25-2f7a65ceace6.jpeg)
postgres、backendがRUNNINGであることが確認できます。
frontendは設定していないので、EXITEDと書いてありますが、バックエンドのみの開発には影響はないです。

ちなみに、Dockerアプリから操作もできます。
![スクリーンショット 2022-04-21 170013.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/388964/0aa16142-b227-f528-12a9-4af2157f7d16.jpeg)
Startを押すことで、docker-compose upコマンドを打たなくても、立ち上げができますし、停止もできます。
![スクリーンショット 2022-04-21 170251.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/388964/186e6927-ec94-8776-6ae5-c1d12f53a9fe.jpeg)
また、コンテナ内に入り、直接コマンド操作もできます。
## Djangoの起動確認
以下にアクセスして、Djangoが動作しているか確認してみます。

http://localhost:8000/

問題なければこの画面になります。
![スクリーンショット 2022-04-21 100007.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/388964/c591c37d-587f-b265-493c-02afe5c543fe.jpeg)
後は、開発していくだけです。
ソースコードの書き換え後は、gitにPushもしくはPull Requestして、gitレポジトリに反映させていきます。

https://qiita.com/samurai_runner/items/7442521bce2d6ac9330b

お疲れ様です。