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

[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に上げます。

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
ユーザーは見つかりませんでした