概要
タイトルにある通り、Docker Composeを使用して超手軽に環境を用意したかった。
こちらの記事を大いに参考にさせていただきました。
基本的には丸パクリですが、本記事による主な変更点は以下の５つ。
- 使用するパッケージやDockerイメージのバージョンをアップデート
- create-next-appを使用
- フロントエンドのDockerイメージをマルチステージビルドで軽量化
-
wait.shを不要にして安定化 - 細かな不具合を修正し、より使いやすく
ソースコード
使用方法
リポジトリをcloneする
$ git clone https://github.com/maeple5/docker-nextjs-django-nginx.git
$ cd .\docker-nextjs-django-nginx\
Djangoプロジェクト内の.env.exampleファイルをコピーして.envにリネームする
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にアクセスし、作成した管理者アカウントでログインする。
-
適当にTodoを追加する。
-
http://localhostにアクセスしてフロントエンドのページが表示されることを確認し、clickボタンを押す
-
追加したTodoが取得され表示される
今回はこれで以上になります。少しでも参考になれば幸いです。
改善ポイント
- Djangoの設定を環境ごとに分け、ログ出力の設定などを加える。
- ディレクトリ構成を変更する。（ルートディレクトリに
.dockerディレクトリを作ってDockerFileをまとめる。その場合docker-compose.yaml内の参照パスを変更する必要がある。） - フロントエンドでホットリロードが効かない問題 （解決済み）
使用するパッケージ（2023/05/21）
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
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