使用Docker Compose来配置Next.js + Django + Nginx + MySQL的环境

3 年 ago
逸, 科
1 minute

概况

就如标题所述，我希望能够使用Docker Compose轻松地设置环境。

我非常受益于这篇文章。

    DockerでReact＋Django+Nginx＋MySQLの環境構築

尽管基本上是照搬别人的，但本文的主要变更如下五点。

    • 使用するパッケージやDockerイメージのバージョンをアップデート

 

    • create-next-appを使用

 

    • フロントエンドのDockerイメージをマルチステージビルドで軽量化

wait.shを不要にして安定化
細かな不具合を修正し、より使いやすく

源代码

    ソースコードへのリンク

用法

克隆存储库

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

将Django项目中的.env.example文件复制并重命名为.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"
4.png

希望这次的内容能对您有所帮助。如果能稍微提供一些参考，我会很高兴。

改善的地方

    • Djangoの設定を環境ごとに分け、ログ出力の設定などを加える。

 

    • ディレクトリ構成を変更する。（ルートディレクトリに.dockerディレクトリを作ってDockerFileをまとめる。その場合docker-compose.yaml内の参照パスを変更する必要がある。）

 

    フロントエンドでホットリロードが効かない問題　（解決済み）

使用包装（2023/05/21）

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

"@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の環境構築

Next.js 12で開発中のHMRがうまくいかない場合の対処

Static Exports (Next.jsの公式ドキュメント)

Docker with Multi Stage Buildを利用したNext.jsのDockerイメージを作る

bannerAds