Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
11
Help us understand the problem. What is going on with this article?
@Kobayashi2019

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

More than 1 year has passed since last update.

目次

  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$ 

tree1.PNG

このようにディレクトリも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 .

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

tree2.PNG

設定を変更

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.PNG

終わりに

次回

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を作る

11
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Kobayashi2019
大阪工業大学学部4年、専門はロボットなのにプログラミングしかしない男。
techtrain
プロのエンジニアを目指すU30(30歳以下)の方に現役エンジニアにメンタリングもらえるコミュニティです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
11
Help us understand the problem. What is going on with this article?