DjangoとReactで作成したアプリにDockerを組み込む #Docker

Dockerとは

一言で言うとコンテナ型のアプリケーション実行環境のこと。
DockerがあればどのPCからでも、簡単にそのアプリを実装できる環境を構築することができる。

今回やること

前回私が開発したアプリにDockerを組み込んで環境構築を容易にしていく。

そのアプリの開発記事↓
DjangoとReactでPDCAアプリを作るその1

作業の流れ

1.requirements.txtの作成

2.Django用Dockerfileの作成

3.nodejs用Dockerfileの作成

4.docker-composeの作成

requirements.txtの作成

完成したアプリのディレクトリ下で以下のコマンドを実行するとそのアプリでインストールしたライブラリをrequirements.txtにまとめることができる

pip freeze > requirements.txt

なお、アプリ開発を行うにあたってVirtualenvを使って、専用の開発環境を準備した方が良い。
そうしてから取り組めば、そのアプリ開発でインストールしたライブラリだけをrequreiments.txtに落とし込むことができる。

virtualenvについての記事↓
venv: Python 仮想環境管理

Django用Dockerfileの作成

# pythonの基本的な環境をubuntuで構築している↓↓
FROM ubuntu:18.04
RUN apt-get -y update \
    && apt-get -y upgrade \
    && apt-get install -y locales curl python3-distutils \
    && curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py \
    && python3 get-pip.py \
    && pip install -U pip \
    && mkdir /code \
    && rm -rf /var/lib/apt/lists/* \
    && localedef -i en_US -c -f UTF-8 -A /usr/share/locale/locale.alias en_US.UTF-8
ENV LANG en_US.utf8
# ↑↑


# 作成したrequirementsをコンテナ側へcopy
COPY ./requirements.txt /requirements.txt

# コンテナ側でアプリに必要なライブラリをインストール
RUN pip install -r /requirements.txt

# アプリを置くためのディレクトリを作成
RUN mkdir /workapp

# 起動時に最初に開かれるディレクトリを設定
WORKDIR /workapp

# 作成したアプリをコンテナ側へcopy
COPY ./workapp /workapp

nodejs用Dockerfileの作成

FROM node:10.13-alpine

docker-composeの作成

docker-composeとは、

dockerでこのコンテナを立てる際に使うであろうdockerコマンドを1つのファイルにまとめてくれるツール

version: '3'

services:
  app:
    build:
      context: .
    tty: true
    stdin_open: true
    ports:
      - "8000:8000"
    # コンテナ側から実際の環境側にあるアプリを参照する
    volumes:
      - ./workapp:/workapp
    command: >
      sh -c "python3 manage.py migrate &&
             python3 manage.py runserver 0.0.0.0:8000"
    depends_on: 
      - react
  react:
    build:
      context: .
      dockerfile: "./Dockerfile-nodejs"
    volumes:
      - ./work_react:/work_react
    command: >
      sh -c "cd work_react && npm start"
    ports:
      - "3000:3000"

dockerを起動してアプリディレクトリ下で、以下のコマンドを実行する

docker-compose up

これで無事、djangoとReactで開発したアプリにDockerを組み込むことができた🎉

今後の展望

今回は、DBをsqliteのままにしてDockerを組み込んだので、次回は、postgresSQLを用いて組み込めるようにしたい。
また、nginx等のwebサーバーも用いて、開発現場さながらのDockerコンテナを作成したいと考えている

ここまで読んでくださりありがとうございました🙇‍♂️🙇‍♂️

また、Twitterでも日々の積み上げや、プログラミング学習についてのツイートをしておりますので、よかったらフォローと応援の程よろしくお願いします！🙇‍♂️

Twitterアカウント↓
健将@WEBエンジニア×明大生