Help us understand the problem. What is going on with this article?

Nuxt - Django 準備メモ

More than 1 year has passed since last update.

この記事について

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.jsonscripts を以下に変更

"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:3000http://localhost:8000 が動いていたら OK

furuuchin
note もやっています。 https://note.mu/furuchin
pique
SasS型iPaaS、Anyflowを開発しています。
https://anyflow.co.jp
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした