Zenn
💡

ReactとDjangoのDocker環境を作る

2022/05/12に公開
django
Docker
React
macOS
tech

本記事についての注意

フロントエンド側(React側)

ルートディレクトリにフォルダ作成

まず最初にフォルダ・ファイルの作成から始めます。
プロジェクトフォルダを作成して、その直下で下記のコマンドを打ちます。

フロントエンド
$ mkdir frontend_Project
$ mkdir frontend_Project/frontend
$ mkdir -p frontend_Project/docker/node
$ touch frontend_Project/docker/node/Dockerfile
$ touch frontend_Project/docker-compose.yml

フォルダ・ファイル構成

作成した結果、下記のようなフォルダ・ファイル構成になりました。
Reactのプロジェクトはfrontend_Projectフォルダに配置します。

tree
.
└── frontend_Project
    ├── docker
    │   └── node
    │       └── Dockerfile
    ├── docker-compose.yml
    └── frontend

Dockerfileについて

node/Dockerfileファイルに下記の内容を記載する。

FROM node:16-alpine
WORKDIR /usr/src/app

frontend_Project/docker-compose.ymlについて

frontend_Project/docker-compose.ymlファイルに下記の内容を記載する。


version: '3.9'

services:
  node:
    build: ./docker/node
    volumes:
      - ./node:/usr/src/app:cached
    command: sh -c "cd react-sample && yarn start"
    ports:
      - "3000:3000"

Dockerイメージ作成

Dockerイメージ作成の前に現在の作業ディレクトリの確認、
作業ディレクトリ(カレントディレクトリ)にdocker-compose.ymlファイルが存在しているか確認する。

$ pwd
$ ls -l

docker-compose.ymlファイルが存在していることが確認できたら下記コマンドを実行。

$ docker-compose build --no-cache

プロジェクトを作成

プロジェクトの名前をreact-sampleにしています。
カレントディレクトリがfrontend_Projectであることを確認後、下記コマンドを実行

$ docker-compose run --rm node sh -c "npm install -g create-react-app && create-react-app react-sample"

コマンド実行後、nodeフォルダの中にプロジェクトが作成されています。

コンテナ立ち上げ

カレントディレクトリがfrontend_Projectであることを確認後、下記コマンドを実行

$ docker-compose up -d

上記のコマンドを実行後、ブラウザにてlocalhost:3000へアクセスするとReactが立ち上がっているのが確認できます。

バックエンド側(Django側)

ルートディレクトリにフォルダ作成

まず最初にフォルダ・ファイルの作成から始めます。
プロジェクトフォルダを作成して、その直下で下記のコマンドを打ちます。

バックエンド
$ mkdir backend_Project
$ mkdir backend_Project/backend
$ mkdir -p backend_Project/docker/python 
$ touch backend_Project/docker/python/Dockerfile
$ touch backend_Project/docker-compose.yml
$ touch backend_Project/requirements.txt

フォルダ・ファイル構成

作成した結果、下記のようなフォルダ・ファイル構成になりました。
Djangoのプロジェクトはbackend_Projectフォルダに配置します。

tree
.
└── backend_Project
    ├── backend
    ├── docker
    │   └── python
    │       └── Dockerfile
    ├── docker-compose.yml
    └── requirements.txt

Dockerfileについて

python/Dockerfileファイルに下記の内容を記載する。

FROM python:3
ENV PYTHONUNBUFFERED 1
RUN mkdir /backend
WORKDIR /backend
ADD requirements.txt /backend/
RUN pip install -r requirements.txt
ADD . /backend/

backend_Project/docker-compose.ymlについて

backend_Project/docker-compose.ymlファイルに下記の内容を記載する。


version: '3'

services:
  backend:
    build:
      context: .
      dockerfile: ./docker/python/Dockerfile
    volumes:
      - ./backend:/backend
    command: python3 manage.py runserver 0.0.0.0:8000
    ports:
      - "8000:8000"
    tty: true

requirements.txtについて

Pythonのパッケージでインストールしたいものはこのファイルに記載します。
バージョン3をインストールしたかったため、Django<4と記載しています。

Django<4

Dockerイメージ作成

Dockerイメージ作成の前に現在の作業ディレクトリの確認、
作業ディレクトリ(カレントディレクトリ)にdocker-compose.ymlファイルが存在しているか確認する。

$ pwd
$ ls -l

docker-compose.ymlファイルが存在していることが確認できたら下記コマンドを実行。

$ docker-compose build --no-cache

プロジェクトを作成

プロジェクトの名前をdjango_sampleにしています。
カレントディレクトリがbackend_Projectであることを確認後、下記コマンドを実行

$ docker-compose run backend django-admin startproject django_sample .

コマンド実行後、backendフォルダの中にプロジェクトが作成されています。

コンテナ立ち上げ

カレントディレクトリがbackend_Projectであることを確認後、下記コマンドを実行

$ docker-compose up -d

ブラウザでlocalhost:8000へアクセスするとDjangoが立ち上がっているのが確認できます。

Docker Desktopにてコンテナを確認

Docker Desktopにて下記のようにコンテナが２つ作成される。

データベース設定について

Djangoのデータベースのデフォルトの設定は、SQLite3です。
これは、 SQLite3 が Python に標準で組み込まれているため、
データベースをサポートするために何も追加でインストールする必要がないからです。
ですが、大規模なデータベースの場合、SQLite3は向いていません。
データベースがの規模が大きくなり、複雑化してくると、
MySQLに変更したくなることもあるでしょう。
その場合、こちらDjango SQLite3からMySQLへの移行を参考にしてみてください。

Discussion