既存のDjango+React(TypeScript)+postgresをdocker-composeで構築

前提として、既存でDjangoとReactは構築しているものとする。
下記のようにプロジェクトを配置する。

/
┝frontend
│└Reactプロジェクト
┝backend
　└Djangoプロジェクト

また、ポートの指定はローカルですでに使用しているポートを避けるように指定する。

docker-composeで環境を構築

まずはdocker-compose.ymlを作成し、下記を記載する。

docker-compose.yml

version: '3.7'

volumes:
    db-data:

services:
    frontend:
        container_name: frontend
        build:
            context: ./frontend
            dockerfile: ./Dockerfile
        ports:
            - 3030:3000
        environment:
            TZ: Asia/Tokyo
        tty: true
        volumes:
            - ./frontend:/frontend
            - /frontend/node_modules/

    backend:
        container_name: backend
        build:
            context: ./backend
            dockerfile: ./Dockerfile
        command: python3 /backend/manage.py runserver 0.0.0.0:8000
        ports:
            - 8080:8000
        environment:
            TZ: Asia/Tokyo
        tty: true
        volumes:
            - ./backend:/backend
        depends_on:
            - db

    db:
        container_name: postgres
        image: postgres:12-alpine
        ports:
            - 6543:5432
        environment:
            POSTGRES_USER: ${DB_USERNAME}
            POSTGRES_PASSWORD: ${DB_PASSWORD}
            POSTGRES_DB: ${DB_DATABASE}
            POSTGRES_INITDB_ARGS: "--encoding=UTF-8"
            TZ: Asia/Tokyo
        hostname: postgres
        volumes:
            - db-data:/var/lib/postgresql/data

Django

backend/Dockerfileを作成し、以下を記載する。

backend/Dockerfile

FROM python:3.9-alpine

ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1

WORKDIR /backend

COPY Pipfile Pipfile.lock /backend/

RUN apk add build-base libffi-dev postgresql-dev && \
    pip3 install pipenv && \
    pipenv install --system

COPY . /backend

この場合では、pythonを使用しておりますので、各々使用していたpythonのバージョンを指定してみてください。

React

frontend/Dockerfileを作成し、以下を記載する。

frontend/Dockerfile

FROM node:12-alpine

WORKDIR /frontend

COPY . /frontend

RUN yarn --pure-lockfile

CMD [ "yarn", "start" ]

この場合では、node12系を使用しておりますので、各々使用していた各ライブラリのバージョンに合ったnodeのバージョンを指定してみてください。

最終的なディレクトリ構成

frontend
┝Reactプロジェクト
└Dockerfile
backend
┝Djangoプロジェクト
└Dockerfile
docker-compose.yml