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

#目次
1. [Django-Reactでブログ作成part1:docker-composeでプロジェクトを立ち上げ](https://qiita.com/Kobayashi2019/items/66c03b29d8f5effd2341) <-- 今ここ
2. [Django-Reactでブログ作成part2:モデルの作成と管理者画面](https://qiita.com/Kobayashi2019/items/6fe9d2d8e7486d77ba49)

#初めに
おおよそ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を併用します。
###ディレクトリ作成

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

```terminal
test@test-VirtualBox:~$ mkdir ElectronicJournal
```

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

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


```terminal
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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397212/9139ad45-7b11-9bb0-8872-51671371d474.png)


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

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

[dockerとdocker-composeのインストール(Linux編)](https://qiita.com/youtangai/items/ff67ceff5497a0e0b1af)

DockerとDocker Composeについては[こちら](https://qiita.com/kotaro-dr/items/b1024c7d200a75b992fc)

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

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

```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と同階層に置きます。

```txt: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してみましょう。

```terminal
docker-compose build
```

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

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

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

![tree2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397212/347441b3-368e-a51d-9464-bb8d90991dc6.png)

##設定を変更
setting.pyを少し変更します。
###タイムゾーンの変更
変更前

```py:settings.py
TIME_ZONE = 'UTC'
```

変更後

```py:settings.py
TIME_ZONE = 'Asia/Tokyo'
```

###言語の変更
変更前

```py:settings.py
LANGUAGE_CODE = 'en-us'
```

変更後

```py:settings.py
LANGUAGE_CODE = 'ja'
```

###タイムゾーンの変更
変更前

```py:settings.py
TIME_ZONE = 'UTC'
```

変更後

```py:settings.py
TIME_ZONE = 'Asia/Tokyo'
```

##データベースの変更
###設定の変更
SQLiteからPostgreSQLに変えます。
変更前

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

変更後

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

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

```terminal
docker-compose run backend python manage.py makemigrations
```

```
docker-compose run backend python manage.py migrate
```

#動作確認
##docker-compose up

```terminal
docker-compose up
```

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

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

##ブラウザーで確認
ブラウザーに[http://127.0.0.1:8000/](http://127.0.0.1:8000/)にアクセスします。![django.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397212/2fe8b974-5602-95cd-6bb7-f426125d68b0.png)


#終わりに
##次回
[Django-Reactでブログ作成part2:モデルの作成と管理者画面](https://qiita.com/Kobayashi2019/items/6fe9d2d8e7486d77ba49)
次回はDjangoのモデル作成をやります。
フロントエンドに手を付けるのは先になります。
環境もそのとき用意します。
##余談
Django REST frameworkのframeworkの頭は大文字じゃなくて小文字だということを今日知った。
Djangoの読みが「ディージャンゴ」じゃなくて「ジャンゴ」だということも昨日知った。
皆さんは知ってまいしたか？

##参考にしたもの
このpart1に限らずこの連載記事全体で参考にしたものを書きます。
[Django and React Tutorial](https://www.youtube.com/watch?v=uZgRbnIsgrA&list=PLLRM7ROnmA9FxCtnLoIHAs6hIkJyd1dEx)
[Django Girls Tutorial](https://tutorial.djangogirls.org/ja/)
[DockerでDjango](https://qiita.com/aqyabe/items/f7f442dc4012ec67a0ec)
[Django REST Framework の使い方メモ](https://qiita.com/__init__/items/f5a5a64a05541fcda713)
[Djangoでjsonを扱うRESTfulなAPIを作る](https://qiita.com/HIJIKI/items/c4f17137ef465f7034bb)
[Django REST Frameworkでユーザ認証周りのAPIを作る](https://qiita.com/xKxAxKx/items/60e8fb93d6bbeebcf065)