ReactとDjango REST Frameworkを使った画像アップロード機能を作成してみるの第１回となる「環境構築編」です。

実行環境

• Mac OS X 11.2.1
• Docker 20.10.5
• docker-compose version 1.28.5

作業ディレクトリの用意

今回のアプリを開発するための作業ディレクトリを用意していきます。

ディレクトリ構成は下記のようにします。

└── sample
    ├── client
    └── server

イメージの作成

まず手始めに、今回のアプリを作成していくにあたりDockerのイメージを作成していこうと思います。Dockerのインストールがお済みでない方は、下記の記事からDockerをインストールをしてから進めていただくと幸いです。

各OS毎のDockerインストール手順

Dockerfileの用意

今回は、クライアントはReact、サーバはDjango REST frameworkを使用していこうと思います。それぞれの環境を構築するために、Dockerfileを用意していこうと思います。

client用Dockerfile

clientのディレクトリにDocekrfileという名前のファイルを作成して、下記の内容を記述してください。

FROM node:15.10.0-alpine3.11

WORKDIR /usr/src/app

server用Dockerfile

serverのディレクトリにもclientと同様にDockerfileという名前のファイルを作成して、下記の内容を記述します。

FROM python:3

ENV PYTHONUNBUFFERED 1

RUN apt update
RUN apt install -y --no-install-recommends \
	net-tools \
	sudo \
	bzip2 \
	curl \
	gcc \
	python3-dev \
	vim
RUN apt clean

RUN pip install --upgrade pip
RUN pip install \
	django \
	djangorestframework \
	djangorestframework-jwt \
	django-filter \
	django-environ \
	django-cors-headers \
	gunicorn \
	Pillow

docker-compose.ymlの用意

次に、複数コンテナを管理するためにdocker-composeを使用するために、docker-compose.ymlを用意していきます。

sampleディレクトリ直下にdocker-compose.ymlという名前のファイルを用意して、下記の内容を記述します。

version: '3'
services:
    client:
        build: ./client
        image: client-image
        container_name: client
				environment:
            - NODE_ENV=production
        ports:
            - '3000:3000'
        volumes:
            - ./client/:/usr/src/app/
        tty: true

    server:
        build: ./server
        image: server-image
        container_name: server
        ports:
            - '8000:8000'
        volumes:
            - ./server/:/usr/src/app/
        tty: true

ここまでディレクトリ構成は以下のようになっています。

└── sample
		├── client
		│   └── Dockerfile
		├── docker-compose.yml
		└── server
		    └── Dockerfile

コンテナの作成

上記の手順で用意した、Dockerfileたちをもとに、実際に稼働するコンテナを作成していきます。

下記のコマンドで、Dockerイメージのビルドと、コンテナの起動を行っていきます。

$ docker-compose up -d --build

上記のコマンドを実行すると、Dockerイメージのビルドが始まり、ビルドが成功すると自動でコンテナが起動します。下記のメッセージが出力されればOKです。

Successfully built 593c766c576516137e385bb2ddeff448bdc53d546d642059be900350d3b74011
Starting client ... done
Starting server ... done

実際にコンテナが起動しているか確認

下記コマンドを実行して、コンテナが起動しているか確認します。

$ docker-compose ps

Name             Command            State           Ports         
-------------------------------------------------------------------
client   docker-entrypoint.sh node   Up      0.0.0.0:3000->3000/tcp
server   python3                     Up      0.0.0.0:8000->8000/tcp

StateがUpとなっていれば、コンテナは無事起動しています。ここまでで、アプリを作成するための環境構築は完了です。

次回は、クライアント側であるReactのプロジェクトを作成して、画面側の準備をしていこうと思います。