DjangoとReactの開発環境をDockerで構築

DjangoとReactの開発環境をDockerを用いて構築しました！フォルダ構成、docker-compose.ymlの中身を紹介しようと思います。

フォルダ構成

Djangoのプロジェクトはbackendフォルダに配置しています。
Reactのプロジェクトはfrontフォルダに配置しています。
Dockerfileはdockerフォルダにすべて配置しています。


.
├── backend
├── front
├── docker
│   ├── node
│   │   └── Dockerfile
│   └── python
│       └── Dockerfile
├── docker-compose.yml
└── requirements.txt

Dockerfile

node/Dockerfile


FROM node:16-alpine
WORKDIR /usr/src/front
RUN apk update

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/

docker-compose.yml


version: '3'

services:
  backend:
    build:
      context: .
      dockerfile: ./docker/python/Dockerfile
    container_name: backend
    volumes:
      - ./backend:/backend
    command: python3 manage.py runserver 0.0.0.0:8000
    ports:
      - "8000:8000"
    tty: true
  front:
    build:
      context: .
      dockerfile: ./docker/node/Dockerfile
    container_name: front
    volumes:
      - ./front:/usr/src/front
    command: sh -c "cd photo-app && yarn start"
    ports:
      - "3000:3000"
    tty: true

requirements.txt

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


Django<4

Dockerイメージの作成


$ docker-compose build --no-cache

プロジェクトを作成

Django

例として、プロジェクトの名前をphotoにしています。


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

React

プロジェクト名はDjangoと同じくphotoです。


$ docker-compose run --rm front sh -c "npx create-react-app photo"

上記のコマンドのを実行した後、backendフォルダと、frontフォルダの中にプロジェクトが出来上がります！

コンテナの立ち上げ


$ docker-compose up -d

上記のコマンドを実行後、localhost:8000と、localhost:3000へアクセスするとDjangoとReactが立ち上がっているのが確認できます。
※localhost:3000の方のReactは、少々時間がかかるかもしれません。

localhost:8000(Django) django

localhost:3000(React) react

コンテナの終了


$ docker-compose stop

React Django Docker