こちらはエーピーコミュニケーションズ Advent Calendar 2021 16日目の記事となります。
初めに
フロントReact、バックエンドDjangoのアプリを作るに当たりいい加減環境構築が面倒なので今更だがDocker化する。
特にReactに至っては一から入れようとするとnode.jsの導入が面倒なのでかなり楽になった。
手順
環境
Docker version 20.10.8
docker-compose version 1.29.2
Django構築
まず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など）をインストールさせる。
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を作成する。
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プロジェクトを作成する。
docker-compose run backend django-admin.py startproject django_react .
setting.pyにてDATABASEの設定をする。
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'main',
'USER': 'root',
'PASSWORD': 'password',
'HOST': 'db',
'PORT': '3306',
}
}
これで準備できたので、起動してみる。
root@python:~/django_react# docker-compose up
## エラーなく起動できればOK
アクセスして確認してみる。
http://＜＜IPアドレス＞＞:8000にアクセスして、Djangoの画面が表示されれば成功。
React構築
では次にReactをDockerで構築してみる。
まずはDockerfile、同じディレクトリで行うので名前をDockerfile_reactにする。
FROM node:16-alpine
WORKDIR /usr/src/app
次に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アプリを作成する。
docker-compose run --rm front sh -c "npm install -g create-react-app && create-react-app django_front"
～～～～～
Happy hacking!
これでreactのアプリフォルダも作成されたと思う。
では起動させる。
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の接続もできるようになっている。
これを使ってのアプリ開発はまた今度。