【Docker】Django+React+MySQL+Nginxの環境を作ってみた

Django

 

Dockerについて勉強しないとな

とおもったので、筆者が使用してるReact+DRFのアプリケーション動作環境をコンテナ化します

また、デプロイやアプリの運用とかを考えてNginxとMySQLのコンテナも作成します

 

本記事の前提

対象読者

 

ReactやDjango(DRF)を触ったことがある
 →本記事ではReactやDjangoについて詳細は省きます

ReactやDjangoの動作環境をコンテナ化してみたい

Dockerに関して詳しく知りたいよりはとにかくコンテナを作成したい
 →設定の詳細は省きます、とりあえず動けばいいというスタンスで!

 

ゴール

 

React+Djangoの動作環境をコンテナで作成し、
Reactのスタート画面およびDjangoの管理画面にアクセスできること

 

作成するコンテナの概要

 

ユーザーからのアクセスの流れはこんな感じです

 

 

上記の図から、必要なコンテナは

  1. NodeJS(React用)
  2. Python(Djnago用)
  3. MySQL
  4. Nginx

になります

 

ディレクトリ構成

コンテナ化前

 

Djnagoと、Reactのプロジェクトをそれぞれ作成したのみです

drf_api : Djangoのプロジェクト
react_fron : Reactのプロジェクト

 

 

コンテナ化後

 

下記Gitのリポジトリをご参照ください

GitHub - hisuihisui/react-django-docker
Contribute to hisuihisui/react-django-docker development by creating an account on GitHub.

 

コンテナを作成する順番

 

  1. NodeJS(React用)
  2. Python(Djnago用)
  3. MySQL
  4. Nginx

この4つのコンテナを作成していきます。

順番ですが、ユーザーから遠いコンテナ(内側のコンテナ)から作成していきます

なので、MySQLPythonNodeJSNginx と作っていきます

また、複数のコンテナを作成するということで一番上の階層に
docker-compose.yml ファイルを作成します

 

MySQL

 

 

まずは、一番上の階層に「mysql」というフォルダを作成します(↑の画像参照)

 

機密情報

 

mysqlのコンテナをたてる記事にはdocker-composeにDBのパスワードを直書きしているものが
多いです。。

個人的には設定ファイルにパスワード等機密情報を直書きしたくないので、
別でファイルを作成し、コンテナを立てるときにそのファイルを読みにいくようにします

 

mysqlフォルダないに「secrets」というフォルダを作成して、その配下に

  • root_secret.txt:root ユーザーのパスワードを記載
  • user_secret.txt:user ユーザー(Djangoが使用)のパスワードを記載

 

ファイルの中身はこんな感じです。適当にパスワードを記載してください

 

これはローカル環境でのみ使用するパスワードのため、
デプロイする際のステージングや本番環境は別ファイルを読み込むなどしてください

 

イメージ作成時に実行するSQL

 

イメージを作成しただけだと、Djangoが使用するユーザーに権限が何もないです。

そこで、権限を付与するSQLファイルを作成し、イメージ作成時に実行します

 

mysqlフォルダ配下に sql フォルダを作成し、その中に init.sql を作成。

中身はこちら

 

my.cnf

 

文字コードの設定my.cnf(MySQLの設定ファイル)に書いていきます

mysql/sql配下にmy.cnfファイルを作成します

 

 

Dockerfile

 

このファイルをもとにコンテナのイメージを作成します

 

詳しくはこちら!

 

今回はタイムゾーンや文字コードの設定を行っていきます。
→先ほど作成した my.cnf を読み込むようにします(相対パスで指定)

 

 

docker-compose.yml

 

docker-compose.ymlの中身に以下を記載します

 

 

SQLのログを保存しておくフォルダを作成

 

docker-compose.ymlがある階層にlogsフォルダを作成し、
その配下にmysqlフォルダを作成します

 

 

 

mysqlフォルダ内の構成を確認

 

↓のようになっていればOK!

 

コンテナを立ち上げてみる

 

docker-compose.ymlがある階層に移動して、docker-compose up -d を実行します

筆者は、React+Djangoフォルダ配下にdocker-compose.ymlがあります

 

 

起動できたようです

 

コンテナに入ってみる

 

先ほどと同じ階層で以下のコマンドを実行していきます

 

 

これでMySQLのコンテナはできました

 

Python(Django)

.env

 

ローカルで使用する環境変数のファイルを作成します

drf_api フォルダ配下に.env.developmentを作成します

 

 

 

settings.py

 

先ほど作成したenvファイルを読み込むためにsettings.pyを編集します

以下変更点のみを記載しています

 

 

requirements.txt

 

pip でインストールするモジュールの情報をrequirements.txtに記載します

requirements.txt は drf_api フォルダ配下に作成します

 

 

Dockerfile

 

drf_api フォルダ配下にDockerfileを作成します

 

docker-compose.yml

 

以下を追記します

 

コンテナを立ち上げてみる

 

 

起動できました

http://localhost:8000/

にアクセスして、↓のように表示されたらOKです

 

Nginxのコンテナを立てていないため、管理画面のCSSは効いていませんのでご注意を

先ほど、作成したsuperuserでログインできればOKです

 

DBを見てみる

 

 

 

NodeJS(React)

docker-compose.yml

 

docker-compose.ymlに以下を追記するのみです

 

 

コンテナを立ち上げてみる

 

 

起動できましたー

 

ブラウザからアクセスしてみる

 

http://localhost:3000/

にアクセスします(少し時間をおいてからのほうがいいかも?)

 

 

こちらが表示されていればOKです

 

Nginx

 

一番上の階層にnginxというフォルダを作成し、下記のようにファイルを作成します

 

 

default.conf

 

nginxをconfファイルです。イメージ作成時にこのファイルをコピーし、設定を反映させます

 

 

wait.sh

 

このままだと、Reactコンテナが起動する前にNginxコンテナが起動し、
接続エラーでNginxコンテナが起動しなくなります。

そこで、以下のシェルスクリプトを使って対処します

vishnubob/wait-for-itリポジトリからコピーしてきました

 

 

 

Dockerfile

 

 

docker-compose.yml

 

以下をservices内に追記します

 

 

コンテナを立ち上げてみる

 

毎度おなじみの

docker-compose up -d 

を実行します

 

ブラウザからアクセス

 

http://localhost/

にアクセスします(少し時間をおいてからのほうがいいかも?)

 

 

こちらが表示されていればOKです

 

また、

404 Not Found

にアクセスします

 

 

こちらが表示されていればOKです

 

所感

 

とりあえず、動くことまでをやってみました

  • 環境の差異を考慮できていない
  • Dockerの設定を詳細に理解できていない
  • nginxの設定がいけてない

などなどありますが、それはこれから勉強していきますということで

 

(おまけ)その他詰まったこと

Dockerを起動してから、dockerコマンドを実行しましょう

 

【Docker】【エラー】「error during connect: this error may indicate that the docker daemon is not running:」
「docker-compose up -d」でコンテナを起動しようとしましたが、エラーが出ました 初歩的なミスだったので、自分への戒めを込めて記事にしておきます エラー PS C:\Users\******\*...

 

 

参考文献

全体

 

DockerでReact+Django+Nginx+MySQLの環境構築 - Qiita
はじめにDocker環境でコマンドを打つだけで一発でDjango,React,MySQLなどを立ち上げて開発をできるようにしたくて、今回の記事を書きました。この記事は一から環境を構築することを目…

 

Docker

 

Dockerで環境変数を秘密情報として扱う方法 - Qiita
はじめに「環境変数を使って接続の設定をすることは開発時には一般的にOKですが、本番環境では非常…
Docker Composeの環境変数ではなくsecretsで秘密情報を扱う - Qiita
概要Dockerの本番環境で秘密情報を使う際に、環境変数を使うことは推奨されてません。秘密情報を扱うには、コンテナオーケストレーションのsecret supportを使うことが推奨されてます。…
【初学】docker-composeでの環境変数・秘密情報受け渡し|Artefact
概要 golangアプリコンテナとDB(MySQL)コンテナをdocker-composeで立ち上げる構築の学習中。Compose周りで初級本で見なかったような点や考察 (悩み)について書きたい。 調べもの ▼Compose file docker-compose.yamlについてちょっと調べてみた。 Th...
docker-compose.ymlの書き方について解説してみた - Qiita
はじめにこの記事は、現在Dockerについて学習している自分が、docker-compose.ymlの書き方について、ファイル内に記述されているコマンドの意味などをアウトプットを兼ねて解説した内…

 

MySQL

 

my.confの設定 - Qiita
環境OS: mac lionパッケージ管理: homebrewmy.confの設定参考: MySQL5.6公式サイト…

 

Python(Django)

 

docker-composeでDjango開発環境を構築する

 

コメント

タイトルとURLをコピーしました