[Memo]DockerでDjango+Nuxt.jsの開発環境構築

##はじめに
2つのDockerコンテナで構成される、Webアプリ(バックエンドにdjango、フロントエンドにNuxt.js)の開発環境をdocker-composeで構築した際のメモ書きです。

##手元の環境
- macOS Catalina v10.15.1
- Docker version 18.09.2, build 6247962
- docker-compose version 1.23.2, build 1110ad01

##ディレクトリ構成
```
home
|- backend
| |- code (djangoプロジェクトのソースコードが入る)
| |- Dockerfile
| |- requirements.txt
|- frontend
| |- src (nuxtプロジェクトのソースコードが入る)
| |- Dockerfile
|- .gitignore
|- docker-compose.yml
|- README.md
```

## Dockerコンテナを立てる
今回は、フロンエンドにnuxt、バックエンドにdjangoを採用して、2つのDockerfileを用意して、docker-composeを使って、各々のコンテナを立てていきたいと思います。

それではDockerfileから見ていきましょう。

### Dockerfile
#### バックエンドのDockerfile
pythonイメージからdjango用のディレクトリをmakeして、requirements.txtに記述したパッケージをインストールしています。今回は、djangoだけ入れておきます。

```dockerfile:backend/Dockerfile
FROM python:3.7
ENV PYTHONUNBUFFERED 1

RUN mkdir /code
WORKDIR /code

ADD requirements.txt /code/
RUN pip install --upgrade pip
RUN pip install --no-cache-dir -r requirements.txt
```
```text:requirements.txt
Django==3.0
```


#### フロントエンドのDockerfile
Nodeのイメージから、Nuxtのアプリを
今回はyarnでなくnpmを使用しました。

```dockerfile:frontend/Dockerfile
FROM node:12.13-alpine

RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

RUN apk update && \
    apk upgrade && \
    apk add git
RUN npm install -g npm && \
    npm install -g core-js@latest && \
    npm install -g @vue/cli && \
    npm install -g @vue/cli-init && \
    npm install -g nuxt create-nuxt-app

ENV LANG C.UTF-8
ENV TZ Asia/Tokyo
ENV HOST 0.0.0.0
EXPOSE 3000
```

## docker-compose.yml
各々のコンテナのボリュームをホスト側と同期させます。
※コメントアウトは、django/nuxtプロジェクト作成後に外します。

```docker:docker-compose.yml
version: '3'

services:
  backend:
    container_name: backend
    build: ./backend
    tty: true
    ports:
      - '8000:8000'
    volumes:
      - ./backend/code:/code
    # command: python djangoproject/manage.py runserver 0.0.0.0:8000

  frontend:
    container_name: frontend
    build: ./frontend
    tty: true
    ports:
      - '3000:3000'
    volumes:
      - ./frontend/src:/usr/src/app
    # command: [sh, -c, "cd nuxtproject/ && npm run dev"]
```

## Dockerイメージのビルドとコンテナ起動
上述のDockerfileのDockerイメージをビルドする。

```
$ docker-compose build
```

ビルドが成功したら、コンテナを立ち上げる。

```
$ docker-compose up -d
```
2つのコンテナが起動しているか確認する。

```
$ docker-compose ps
```


## Django & Nuxt プロジェクトの作成

コンテナの中に入って、プロジェクトを作成します。

###Djangoプロジェクトの作成

```shell:sh
$ docker exec -it backend bash
```
コンテナに入ったら、startprojectでプロジェクト作成。
プロジェクト名は、`djangoproject`としました。

```shell:bash
$ django-admin startproject djangoproject
```
開発環境ということで、settings.pyのALLOWED_HOSTSにlocalhostを追加します。

```python:settings.py
ALLOWED_HOSTS = ['localhost']
```

###Nuxtプロジェクトの作成
```shell:sh
$ docker exec -it frontend sh
```
プロジェクト名は、`nuxtproject`としました。


```shell:sh
$ npx create-nuxt-app nuxtproject
```
色々質問されますので、回答しましょう。


## 確認
プロジェクトを作成したら、一旦コンテナを終了します。

```
$ docker-compose stop
```
そして、docker-compose.ymlのcommandのコメントアウトを外して、もう一度コンテナを起動します。

```docker:docker-compose.yml
command: python djangoproject/manage.py runserver 0.0.0.0:8000
command: [sh, -c, "cd nuxtproject/ && npm run dev"]
```

```shell:sh
$ docker-compose up -d
```

ブラウザから`localhost:8000`Djangoのロケットが打ち上げられている画面と`localhost:3000`でNuxtの画面が表示されれば成功です。

そのうち気が向いたらGithubに上げます。