この記事について

Nuxt と Django を Docker Compose で用意したときのメモ

開発環境

構成

インフラ Docker + Docker Compose
アーキテクチャ Nuxt (フロント) + Django ( API ) + MySQL (データベース)

Nuxt の準備

1: mkdir nuxt_django
2: cd nuxt_django
3: mkdir frontend
4: cd frontend
5: mkdir frontend
6: docker run --rm -it -v "$(pwd):/usr/src" node:8.11.1 bash
7: cd /usr/src/front
8: npm init

入力はすべて空 ( Enter 連打 )

9: npm install --save nuxt

インストール成功したら Thanks for installing nuxt が表示される
結構インストール失敗するので、失敗したら rm -rf node_modules を実行してからもう一度 npm install --save nuxt

10: package.json の scripts を以下に変更

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "nuxt"
},

11: mkdir pages
12: pages ディレクトリに index.vue ファイルを作成し、以下の内容で保存

<template>
  <h1>Hello world!</h1>
</template>

13: npm run dev

うまく行ったら http://localhost:3000 が表示される

14: control + C キーで終了させて exit コマンドでコンテナを終了
15: nuxt_django/fronted ディレクトリに Dockerfile を作成し、以下の内容で保存

FROM node:8.11.1
RUN mkdir -p /usr/src/app
ENV HOME=/usr/src/app
WORKDIR $HOME
ADD . $HOME
WORKDIR $HOME/frontend
RUN npm install

Django

1: nuxt_django ディレクトリ内で mkdir backend
2: cd backend
3: docker run --rm -it -v "$(pwd):/usr/src" python:3.6 bash
4: cd /usr/src
5: pip install django djangorestframework djangorestframework-camel-case mysqlclient
6: pip freeze > requirements.txt
7: django-admin startproject backend
8: python backend/manage.py runserver

うまく行ったら Starting development server at http://127.0.0.1:8000/ が表示される

9: conrole + C キーで終了させて exit コマンドでコンテナを終了
10: nuxt_django/backend ディレクトリに Dockerfile を作成し、以下の内容で保存

FROM python:3.6
ENV PYTHONUNBUFFERED 1
RUN mkdir -p /usr/src/app
ENV HOME=/usr/src/app
WORKDIR $HOME
ADD requirements.txt $HOME
RUN pip install -r requirements.txt
ADD . $HOME

MySQL

1: nuxt_django ディレクトリ内で mkdir db
2: db ディレクトリ内で custom.cnf を作成し、以下の内容で保存

[mysqld]
character-set-server=utf8mb4

3: db ディレクトリ内で Dockerfile を作成し、以下の内容で保存

FROM mysql:5.7.19
ADD custom.cnf /etc/mysql/conf.d

Docker Compose

1: nuxt_django ディレクトリに docker-compose.yml ファイルを作成し、以下の内容で保存

version: "3"
services:
  frontend:
    build: ./frontend
    volumes:
      - ./frontend:/usr/src/app
    environment:
      - HOST=0.0.0.0
    ports:
      - "3000:3000"
    command: npm run dev
  backend:
    build: ./backend
    volumes:
      - ./backend:/usr/src/app
    ports:
      - "8000:8000"
    command: python backend/manage.py runserver 0.0.0.0:8000
    links:
      - db:db
    tty: true
    stdin_open: true
  db:
    build: ./db
    volumes:
      - ./db/datadir:/var/lib/mysql
    expose:
      - "3306"
    environment:
      - MYSQL_ROOT_PASSWORD=dev_nuxt_django_pw
      - MYSQL_DATABASE=dev_nuxt_django_db

2: docker-compose build
3: docker-compose up db
4: End of list of non-natively partitioned tables の表示がされたら control + C キーで終了させる
5: docker-compose up
6: http://localhost:3000 と http://localhost:8000 が動いていたら OK