はじめに
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だけ入れておきます。
FROM python:3.7ENV PYTHONUNBUFFERED 1RUN mkdir /code
WORKDIR /codeADD requirements.txt /code/RUN pip install--upgrade pip
RUN pip install--no-cache-dir-r requirements.txt
Django==3.0
フロントエンドのDockerfile
Nodeのイメージから、Nuxtのアプリを
今回はyarnでなくnpmを使用しました。
FROM node:12.13-alpineRUN mkdir-p /usr/src/app
WORKDIR /usr/src/appRUN 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-8ENV TZ Asia/TokyoENV HOST 0.0.0.0EXPOSE 3000docker-compose.yml
各々のコンテナのボリュームをホスト側と同期させます。
※コメントアウトは、django/nuxtプロジェクト作成後に外します。
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プロジェクトの作成
$ docker exec-it backend bash
コンテナに入ったら、startprojectでプロジェクト作成。
プロジェクト名は、djangoprojectとしました。
$ django-admin startproject djangoproject
開発環境ということで、settings.pyのALLOWED_HOSTSにlocalhostを追加します。
ALLOWED_HOSTS=['localhost']Nuxtプロジェクトの作成
$ docker exec-it frontend sh
プロジェクト名は、nuxtprojectとしました。
$ npx create-nuxt-app nuxtproject
色々質問されますので、回答しましょう。
確認
プロジェクトを作成したら、一旦コンテナを終了します。
$ docker-compose stop
そして、docker-compose.ymlのcommandのコメントアウトを外して、もう一度コンテナを起動します。
command: python djangoproject/manage.py runserver 0.0.0.0:8000
command: [sh, -c, "cd nuxtproject/ && npm run dev"]
$ docker-compose up -dブラウザからlocalhost:8000Djangoのロケットが打ち上げられている画面とlocalhost:3000でNuxtの画面が表示されれば成功です。
そのうち気が向いたらGithubに上げます。