[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だけ入れておきます。

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

requirements.txt

Django==3.0

フロントエンドのDockerfile

Nodeのイメージから、Nuxtのアプリを
今回はyarnでなくnpmを使用しました。

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-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プロジェクトの作成

sh

$ docker exec -it backend bash

コンテナに入ったら、startprojectでプロジェクト作成。
プロジェクト名は、djangoprojectとしました。

bash

$ django-admin startproject djangoproject

開発環境ということで、settings.pyのALLOWED_HOSTSにlocalhostを追加します。

settings.py

ALLOWED_HOSTS = ['localhost']

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

sh

$ docker exec -it frontend sh

プロジェクト名は、nuxtprojectとしました。

sh

$ npx create-nuxt-app nuxtproject

色々質問されますので、回答しましょう。

確認

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

$ docker-compose stop

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

docker-compose.yml

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

sh

$ docker-compose up -d

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

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