Docker ComposeでNext.js＋Django+Nginx＋MySQLの環境構築

# 概要
タイトルにある通り、Docker Composeを使用して超手軽に環境を用意したかった。

こちらの記事を大いに参考にさせていただきました。
- [DockerでReact＋Django+Nginx＋MySQLの環境構築](https://qiita.com/greenteabiscuit/items/c40ba038703c9f33499b)

基本的には丸パクリですが、本記事による主な変更点は以下の５つ。
- 使用するパッケージやDockerイメージのバージョンをアップデート
- create-next-appを使用
- フロントエンドのDockerイメージをマルチステージビルドで軽量化
- `wait.sh`を不要にして安定化
- 細かな不具合を修正し、より使いやすく

# ソースコード
- [ソースコードへのリンク](https://github.com/maeple5/docker-nextjs-django-nginx)

# 使用方法
リポジトリをcloneする

    $ git clone https://github.com/maeple5/docker-nextjs-django-nginx.git
    $ cd .\docker-nextjs-django-nginx\

Djangoプロジェクト内の`.env.example`ファイルをコピーして`.env`にリネームする
~~~css:docker-nextjs-django-nginx/backend/web-back/.env
SECRET_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
DEBUG=False
~~~


~~~
.
├── config
├── static
├── staticfiles
├── todo
├── .env  <----- copy & rename
├── .env.example
└── Dockerfile
└── manage.py
└── requirements.txt
~~~
次のコマンドを実行　　

    $ docker-compose up
DBコンテナが無事に立ち上がったら別のターミナルで以下を実行

    $ docker-compose run --rm web-back sh -c "python manage.py migrate"
    $ docker-compose run --rm web-back sh -c "python manage.py createsuperuser"
    $ docker-compose run --rm web-back sh -c "python manage.py collectstatic"

- ブラウザで[http://localhost:8080/admin](http://localhost:8080/admin)にアクセスし、作成した管理者アカウントでログインする。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3288404/9e192f93-3974-c636-eabb-b293ebcd43f6.png)

- 適当にTodoを追加する。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3288404/68f8c3c0-0ea5-0703-a6a5-ef76da02c658.png)

- [http://localhost](http://localhost)にアクセスしてフロントエンドのページが表示されることを確認し、clickボタンを押す
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3288404/77bf5b2e-ee17-c64e-f931-75e8c9534a5e.png)

- 追加したTodoが取得され表示される
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3288404/d315914d-8811-24ea-9df0-b482ab856d05.png)

今回はこれで以上になります。少しでも参考になれば幸いです。

# 改善ポイント
- Djangoの設定を環境ごとに分け、ログ出力の設定などを加える。
- ディレクトリ構成を変更する。（ルートディレクトリに`.docker`ディレクトリを作ってDockerFileをまとめる。その場合`docker-compose.yaml`内の参照パスを変更する必要がある。）
- フロントエンドでホットリロードが効かない問題　（解決済み）

# 使用するパッケージ（2023/05/21）
~~~css:requirements.txt
asgiref==3.6.0
Django==4.2.1
django-cors-headers==4.0.0
djangorestframework==3.14.0
gunicorn==20.1.0
psycopg2-binary==2.9.6
django-environ==0.10.0
pytz==2023.3
sqlparse==0.4.4
mysqlclient==2.1.1
~~~
~~~css:package.json
"@types/node": "20.2.1",
"@types/react": "18.2.6",
"@types/react-dom": "18.2.4",
"autoprefixer": "10.4.14",
"axios": "^1.4.0",
"eslint": "8.41.0",
"eslint-config-next": "13.4.3",
"next": "^13.4.3",
"postcss": "8.4.23",
"react": "18.2.0",
"react-dom": "18.2.0",
"tailwindcss": "3.3.2",
"typescript": "5.0.4"
~~~

# 使用するDockerイメージ（2023/05/21）
- nginx:1.24.0-alpine
- python:3.9
- node:20-alpine
- mysql:8.0.33


# 参考にした記事
- [DockerでReact＋Django+Nginx＋MySQLの環境構築](https://qiita.com/greenteabiscuit/items/c40ba038703c9f33499b)

- [Next.js 12で開発中のHMRがうまくいかない場合の対処](https://qiita.com/sashisusesouyu/items/4351dc5080cf2b9eeea0)
- [Static Exports (Next.jsの公式ドキュメント)](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports)
- [Docker with Multi Stage Buildを利用したNext.jsのDockerイメージを作る](https://teitei-tk.hatenablog.com/entry/2020/10/27/190000)