DockerでDjango・React環境を構築する

こちらは[エーピーコミュニケーションズ Advent Calendar 2021] (https://qiita.com/advent-calendar/2021/ap-com) 16日目の記事となります。

#初めに
フロントReact、バックエンドDjangoのアプリを作るに当たりいい加減環境構築が面倒なので今更だがDocker化する。
特にReactに至っては一から入れようとするとnode.jsの導入が面倒なのでかなり楽になった。

#手順
##環境
Docker version 20.10.8
docker-compose version 1.29.2

##Django構築
まずDockerfileを作成する

Dockerfile

FROM python:3.8.2
ENV PYTHONBUFFERED 1
WORKDIR /app
COPY requirements.txt /app/requirements.txt
RUN pip install -r requirements.txt
COPY . /app

CMD python manage.py runserver 0.0.0.0:8000

次にrequirements.txtを作成、ここで必要なミドル（Djangoなど）をインストールさせる。

requirements.txt

Django==3.1.3
djangorestframework==3.12.2
mysqlclient==2.0.1
django-mysql==3.9
django-cors-headers==3.5.0

次にdocker-compose.ymlを作成する。

docker-compose.yml

version: '3.8'
services:
  backend:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - 8000:8000
    volumes:
      - .:/app
    depends_on: 
      - db

  db:
    image: mysql:5.7.22
    restart: always
    environment: 
      MYSQL_DATABASE: main
      MYSQL_USER: root
      MYSQL_PASSWORD: password
      MYSQL_ROOT_PASSWORD: password
    volumes: 
      - .dbdate:/var/lib/mysql
    ports: 
      - 3306:3306

コンテナを起動する前に、下記コマンドを実行しdjangoプロジェクトを作成する。

server

docker-compose run backend django-admin.py startproject django_react .

setting.pyにてDATABASEの設定をする。

setting.py

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'main',
        'USER': 'root',
        'PASSWORD': 'password',
        'HOST': 'db',
        'PORT': '3306',
    }
}

これで準備できたので、起動してみる。

server

root@python:~/django_react# docker-compose up
## エラーなく起動できればOK

アクセスして確認してみる。

http://＜＜IPアドレス＞＞:8000にアクセスして、Djangoの画面が表示されれば成功。

##React構築
では次にReactをDockerで構築してみる。
まずはDockerfile、同じディレクトリで行うので名前をDockerfile_reactにする。

Dockerfile_react

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

次にdocker-compose.ymlを作成する、先ほどのやつに追記する形で

docker-compose.yml

version: '3.8'
services:
  backend:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - 8000:8000
    volumes:
      - .:/app
    depends_on: 
      - db

  db:
    image: mysql:5.7.22
    restart: always
    environment: 
      MYSQL_DATABASE: main
      MYSQL_USER: root
      MYSQL_PASSWORD: password
      MYSQL_ROOT_PASSWORD: password
    volumes: 
      - .dbdate:/var/lib/mysql
    ports: 
      - 3306:3306

  front:
    build:
      context: .
      dockerfile: Dockerfile_react
    restart: always
    volumes:
      - ./node:/usr/src/app:cached
    command: sh -c "cd django_front && yarn start"
    ports:
      - "3000:3000"

準備ができたので起動する、コンテナを起動する前にReactアプリを作成する。

server

docker-compose run --rm front sh -c "npm install -g create-react-app && create-react-app django_front"
～～～～～
Happy hacking!

これでreactのアプリフォルダも作成されたと思う。
では起動させる。

server

root@python:~/django_react# docker-compose up -d front
Creating django_react_front_1 ... done
root@python:~/django_react# docker-compose ps
         Name                       Command               State                    Ports                  
----------------------------------------------------------------------------------------------------------
django_react_backend_1   /bin/sh -c python manage.p ...   Up      0.0.0.0:8000->8000/tcp,:::8000->8000/tcp
django_react_db_1        docker-entrypoint.sh mysqld      Up      0.0.0.0:3306->3306/tcp,:::3306->3306/tcp
django_react_front_1     docker-entrypoint.sh sh -c ...   Up      0.0.0.0:3000->3000/tcp,:::3000->3000/tcp

問題なく起動されたらアクセスできるか確認。
http://＜＜IPアドレス＞＞:3000にアクセスして、Reactの画面が表示されれば成功。

#まとめ
これでやりたいことはできた。
今回Djangoのインストールのところでrestframeworkも入れているのでこのままAPI開発してDjango-Reactの接続もできるようになっている。
これを使ってのアプリ開発はまた今度。