Zenn
🐳

[ Docker compose] Django+React 環境構築

2023/05/31に公開
django
React
docker-compose
環境構築
tech

はじめに

参考記事を元にDocker composeで動作するDjango+ReactのTodoアプリを作成します。
まずは環境構築から行なっていきます。
https://www.digitalocean.com/community/tutorials/build-a-to-do-application-using-django-and-react

環境

・macOS Ventura13.4

Step1 Djnago(バックエンド側)

今回はtodoというフォルダ内にDjango(バックエンド)とReact(フロントエンド)のプロジェクトをまとめて作成するため、カレントディレクトリはtodoからスタートします。

まず始めにバックエンドを担うDjangoから作業を行います。
Step1ではDocker composeでDjangoのコンテナ立ち上げまで行います。

バックエンドプロジェクト作成

ターミナルを開いてtodoディレクトリにいる状態で下記のコマンドを打ちバックエンドプロジェクトを作成します。

$ mkdir backend_Project

Dockerfile作成

'-p'オプションによりディレクトリの階層構造を保持しながらディレクトリを一度に作成します。
Dockerfileに拡張子は必要ありません。

$ mkdir -p backend_Project/docker/python 
$ touch backend_Project/docker/python/Dockerfile

backend_Project/docker/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の作成

今回フロントエンドとバックエンドを一つのコンテナにまとめたいのでdocker-compose.ymlはtodo直下に作成します。

$ touch docker-compose.yml

myproject/docker-compose.ymlに下記の内容を記載します。

version: '3'

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

requirements.txtの作成

ターミナルで下記のコマンドを打ちファイルを作成

$ touch backend_Project/requirements.txt

backend_Project/requirements.txtに下記の内容を記載します。

Django<4
djangorestframework>=3.11.0,<3.12.0
django-cors-headers==3.2.1

プロジェクト作成

カレントディレクトリをbackend_Projectに移動してプロジェクトを作成します。

$ cd backend_Project
$ docker-compose run backend django-admin startproject backend .

ディレクトリ構成

todo
├── backend_Project
│   ├── backend
│   │   ├── backend
│   │   │   ├── __init__.py
│   │   │   ├── asgi.py
│   │   │   ├── settings.py
│   │   │   ├── urls.py
│   │   │   └── wsgi.py
│   │   └── manage.py
│   ├── docker
│   │   └── python
│   │       └── Dockerfile
│   └── requirements.txt
└── docker-compose.yml

Dockerイメージをビルド

docker-compose.ymlファイルが配置されたディレクトに移動します。
今回の場合はtodoです。

下記コマンドを実行してビルドします。

$ docker-compose build --no-cache

コンテナ起動

無事ビルドが完了したらコンテナを起動します。
-dオプションを付けてバックグランドで実行することが多いです。

$ docker-compose up -d

ブラウザでhttp://localhost:8000へアクセスしロケットが確認できたら成功です！！

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

Djangoの起動が成功したので、Reactの環境構築を行います。

ターミナルを開いてtodoディレクトリにいる状態で下記のコマンドでフロントエンドプロジェクトを作成します。

$ mkdir frontend_Project

Dockerfile作成

$ mkdir -p frontend_Project/docker/node
$ touch frontend_Project/docker/node/Dockerfile

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

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

docker-compose.ymlの編集

バックエンド作業中に作成したdocker-compose.ymlファイルを編集します。

version: '3'

services:
  backend:
    build:
      context: ./backend_Project
      dockerfile: docker/python/Dockerfile
    volumes:
      - ./backend_Project/backend:/backend
    command: python3 /backend/manage.py runserver 0.0.0.0:8000
    ports:
      - "8000:8000"
    tty: true
  
  #ここから追加
  frontend:
    build:
      context: ./frontend_Project
      dockerfile: docker/node/Dockerfile
    volumes:
      - ./frontend_Project/node/frontend:/usr/src/app/frontend
    command: sh -c "cd /usr/src/app/frontend && yarn start"
    ports:
      - "3000:3000"

プロジェクト作成

カレントディレクトリをfrontend_Projectに移動してプロジェクトを作成します。
frontedという名前のプロジェクトを作成します。

$ cd frontend_Project
$ docker-compose run --rm frontend sh -c "npm install -g create-react-app && create-react-app frontend"

コンテナ起動

先ほど作成したDjangoのコンテナを起動したままなので、停止・再ビルド・起動までを一気に行うコマンドを実行します。

$ docker-compose down && docker-compose build --no-cache && docker-compose up -d

ブラウザにてlocalhost:3000へアクセスしReactが立ち上がっていれば成功です！！

dockerのダッシュボードではこのように表示されます！

参考

・Docker Composeの概要
https://docs.docker.jp/compose/index.html#development-environments
・Docker Composeよく使うコマンド
https://www.wakuwakubank.com/posts/354-docker-command-compose/

Discussion