Django-Reactでブログ作成part1:docker-composeでプロジェクトを立ち上げ

目次

1. Django-Reactでブログ作成part1:docker-composeでプロジェクトを立ち上げ <-- 今ここ
2. Django-Reactでブログ作成part2:モデルの作成と管理者画面

初めに

おおよそ1か月くらいかけて完結させる予定
勉強しながら書き起こしているため、ほぼ間違いなく追記が発生します。
筆者のモチベ次第で打ち切りがあり得ます。

やりたいこと

Django REST frameworkを使ってブログに必要なRESTful APIを実装してReactからAPIを呼び出し、signup、loginとコメント機能を実装。

投稿理由

docker-composeの使い方がわからなかったりDjango REST frameworkでAPIを実装した後何をすればいいかわからず長時間彷徨った悪夢を繰り返さぬため。
初心者向けの資料が見つからなくて苦労したので時間の許す限り丁寧に説明したい…

環境

Ububtu18.04.2

使用技術(絶賛開発中、勉強中であるためたぶん増える)

• docker-compose
• PostgreSQL
• Django
  • Django REST framework
  • django-cors-headers
• React
  • Ant Design
  • axios
  • react-router-dom

プロジェクト立ち上げ

さぁ始めましょう。

プロジェクトの構造

今回はDjangoとReactを併用します。

ディレクトリ作成

まずホームディレクトリでプロジェクトのためのディレクトリを作ります。

test@test-VirtualBox:~$ mkdir ElectronicJournal

このプロジェクトの下には2つのディレクトリを作ります。
backendとfrontendです。
backendはAPIを実装し、データベースを操作するものです。
Python中心のDjangoで作ります。
frontendはインターフェースから入力されたデータを使ってAPIを呼び出したりします。
これはHTML, CSS, Javascript中心のReactで作ります。

frontendとbackendにきっちり分けるということを頭に入れておくといいと思います。
今回はDjangoでfrontendの部分を作ったりしませんし、Reactでbackendの部分を作ったりしません。

test@test-VirtualBox:~$ cd ElectronicJournal
test@test-VirtualBox:~/ElectronicJournal$ mkdir backend
test@test-VirtualBox:~/ElectronicJournal$ mkdir frontend
test@test-VirtualBox:~/ElectronicJournal$ ls
backend  frontend
test@test-VirtualBox:~/ElectronicJournal$ 

このようにディレクトリもbackendとfrontendで明確に分けます。
backendの中でDjangoのプロジェクトを起動し、frontendの中でReactのプロジェクトを起動します。

docker-composeのインストール

今回はdocker-composeで必要なものをインストールしていきますが、docker-composeは自分でインストールしなければなりません。

dockerとdocker-composeのインストール(Linux編)

DockerとDocker Composeについてはこちら

docker-compose

あっちのパソコンでは動くけどこっちのパソコンでは動かない。
そういったクソ面倒な惨事を避けるのにdocker-composeを使います。

docker-composeを使うときはどんな環境を使うかを指定します。
今回はDjangoとReactを使うので、Djangoを使うためにPythonの環境が要りますし、Reactを使うためにNode.jsが要ります。
さらにDjangoでデータベースを作るのでその環境も要ります。

docker-compose.yml作成

docker-compose.ymlを作成します。

ElectronicJournal/docker-compose.yml

version: '3'

services:
  db:
    image: postgres
  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile
    command: python manage.py runserver 0.0.0.0:8000
    volumes:
      - ./backend:/backend
    ports:
      - "8000:8000"
    depends_on:
      - db
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    volumes:
      - ./frontend:/frontend
    ports:
      - "3000:3000"

何も考えずにコピペでOKです。
私も何をやっているか詳しく解説しろと言われても無理です。
ここで理解しなければ困るところだけ説明します。

ここでは3つのコンテナを作るよう設定しています。
servicesというところで記されています。
db, backend, frontendの3つです。
これから何度も目にします。

2つ目に覚えなければならないのはbuildの部分です。
具体的にbackendとfrontendのコンテナに何を詰め込むのかを決めるDockerfileの置き場所を指定しています。
これを間違えると動きません。
contextでファイルの置き場所を、dockerfileの部分でファイル名を決めています。
backendはElectronicJournal/backend/Dockerfile,
frontendはElectronicJournal/frontend/Dockerfileです。

backend/Dockerfile作成

Dockerfileを作成します。
拡張子はありません。

ElectronicJournal/backend/Dockerfile

FROM python:3
ENV PYTHONUNBUFFERED 1
RUN mkdir /backend
WORKDIR /backend
COPY . /backend/
RUN pip install -r requirements.txt

注目するのは1番上と1番下です。

Djangoを使いたいのでpythonの環境を立てていることと欲しいパッケージをrequirements.txtからインストールしようとしていることがわかります。

requirements.txt作成

requirements.txtには使いたいパッケージを書きます。
後で追加しますが、追加は簡単なので問題ないでしょう。
backendのDockerfileと同階層に置きます。

ElectronicJournal/backend/requirements.txt

Django>=2.0,<3.0
psycopg2>=2.7,<3.0

frontend/Dockerfile作成

frontendもbackendと同じようにDockerfileを作成します。

Dockerfile

FROM node:latest
RUN mkdir /frontend
WORKDIR /frontend
ENV PATH /frontend/node_modules/.bin:$PATH
COPY ./ /frontend
CMD yarn start

build

buildしてみましょう。

docker-compose build

プロジェクトの作成

このコマンドでプロジェクトを開始します。
実行場所はbackendディレクトリの下です。

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

このようになっているはずです。

設定を変更

setting.pyを少し変更します。

タイムゾーンの変更

変更前

settings.py

TIME_ZONE = 'UTC'

変更後

settings.py

TIME_ZONE = 'Asia/Tokyo'

言語の変更

変更前

settings.py

LANGUAGE_CODE = 'en-us'

変更後

settings.py

LANGUAGE_CODE = 'ja'

タイムゾーンの変更

変更前

settings.py

TIME_ZONE = 'UTC'

変更後

settings.py

TIME_ZONE = 'Asia/Tokyo'

データベースの変更

設定の変更

SQLiteからPostgreSQLに変えます。
変更前

settings.py

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}

変更後

settings.py

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql_psycopg2',
        'NAME': 'myapp',
        'USER': 'USERNAME',
        'PASSWORD': 'PASSWORD',
        'HOST': 'localhost',
        'PORT': '',
    }
}

マイグレート

データベースを新しく作ったときはマイグレートを行います。
両方実行しましょう。

docker-compose run backend python manage.py makemigrations

docker-compose run backend python manage.py migrate

動作確認

docker-compose up

docker-compose up

この文字が出たらだいたい成功してます。

Quit the server with CONTROL-C.

書いてある通りctrl-cで止めることができます。
このコマンド実行中はターミナルが使えなくなってしまうので別のタブかウィンドウを起動しましょう。

ブラウザーで確認

ブラウザーにhttp://127.0.0.1:8000/にアクセスします。

終わりに

次回

Django-Reactでブログ作成part2:モデルの作成と管理者画面
次回はDjangoのモデル作成をやります。
フロントエンドに手を付けるのは先になります。
環境もそのとき用意します。

余談

Django REST frameworkのframeworkの頭は大文字じゃなくて小文字だということを今日知った。
Djangoの読みが「ディージャンゴ」じゃなくて「ジャンゴ」だということも昨日知った。
皆さんは知ってまいしたか？

参考にしたもの

このpart1に限らずこの連載記事全体で参考にしたものを書きます。
Django and React Tutorial
Django Girls Tutorial
DockerでDjango
Django REST Framework の使い方メモ
Djangoでjsonを扱うRESTfulなAPIを作る
Django REST Frameworkでユーザ認証周りのAPIを作る