はじめに
基本的に以下の記事をそのまま記載しています。詳細な説明もこちらの方が詳しいです。
コピペで環境を作成するための個人用備忘録的な位置づけです。
本記事はフロントエンド・バックエンドのアプリケーションを立ち上げるところまでを記載しています。
CRUDアプリケーションの作成は次の記事で記載します。
ゴール
以下の構成の3階層Webアプリケーション（簡単なCRUD操作による記事投稿アプリ）をDockerを用いて構築する。
アプリとしての質や各言語への深堀りはスコープ外とする。
- フロントエンド：Next.JS
- TypeScript
- pagesルーティング（個人的な都合）
- バックエンド：Django
- django REST frameworkによるAPIの実装
- データベース：PostgresSQL
- 特に深い理由はない
事前準備
Docker Desktopのインストール
何かしら調べてインストールする。Macの場合は以下のリンクからインストール可能。
プロジェクト用ディレクトリを作成
Dockerでフロント/バックエンドのプロジェクトを作成するが、マウント用のディレクトリを事前に準備しておく。
- プロジェクトディレクトリの作成
mkdir sample_project
- マウント先ディレクトリの作成（バックエンド）
cd sample_project
mkdir backend
- マウント先ディレクトリの作成（フロントエンド）
mkdir frontend
コンテナの作成
バックエンド
- Dockerfileの作成
/backend/Dockerfileを作成し、以下内容を記載する。
FROM python:3.10.7
ENV PYTHONONUNBUFFERED 1
RUN mkdir /backend
WORKDIR /backend
ADD requirements.txt /backend/
RUN pip install -r requirements.txt
pythonのバージョンは適当な値を設定している。
また、後で用意する/backend/requirements.txtをコンテナにコピーしている。
- インストールするライブラリの指定 （requirements.txt）
/backend/requirements.txtを作成し、以下内容を記載する。
Django
psycopg2
djangorestframework
順に、Django、PostgreSQLを使うためのライブラリ、DjangoでRestAPIを作成するためのライブラリ。
フロントエンド
- Dockerfileの作成
/frontend/Dockerfileを作成し、以下内容を記載する。
FROM node:20.12.1
RUN mkdir /frontend
WORKDIR /frontend
RUN npm install -g npm@latest && npm install create-next-app
nodeのバージョンは適当な値を設定している。
また、npmとNext.jsプロジェクトをインストールするためのライブラリcreate-next-appをインストールしている。
docker-compose.ymlを作成
/docker-compose.ymlを作成し、以下内容を記載する。
PostgreSQLの管理者用GUIに用いるpgadmin4について、emailとパスワードは任意のものを入力する。
version: '3'
services:
frontend:
build:
context: frontend
tty: true
volumes:
- ./frontend:/frontend
ports:
- 3000:3000
env_file:
- ./.env.dev
environment:
- WATCHPACK_POLLING=true
backend:
build:
context: backend
tty: true
volumes:
- ./backend:/backend
ports:
- 8000:8000
depends_on:
- db
env_file:
- ./.env.dev
db:
image: postgres
env_file:
- ./.env.dev
volumes:
- postgres_data:/var/lib/postgresql/data
volumes:
postgres_data:
環境変数用のファイルを作成
開発環境で用いる、環境変数をまとめた.env.devファイルを作成する。
# Next.JS
NEXT_PUBLIC_BE_BASEURL=http://localhost:8000
# Django
DEBUG=True
SECRET_KEY='[settings.pyからコピー]'
ALLOWED_HOSTS=127.0.0.1 localhost [::1]
DATABASE_NAME='sample_project'
DATABASE_USER='root'
DATABASE_PASSWORD='password'
DATABASE_HOST='db'
DATABASE_PORT='5432'
ALLOWED_ORIGINS=http://localhost:3000
# PostgreSQL
POSTGRES_USER=root
POSTGRES_PASSWORD=password
POSTGRES_DB=sample_project
# pgadmin4
PGADMIN_DEFAULT_EMAIL=XXXXX@xxx.com
PGADMIN_DEFAULT_PASSWORD=XXXXXXXXX
フロントエンド（Next.JS）で用いる環境変数は、NEXT_PUBLIC_を接頭につける必要がある。
コンテナ群の起動
以下コマンドでコンテナを起動する
docker compose up -d
新規プロジェクトの作成
フロントエンド、バックエンドそれぞれのコンテナに入り、プロジェクトを新規作成する。
バックエンド
コンテナの特定のために以下コマンドを実行する。
docker ps
コンテナIDの頭文字2文字をもとにバックエンドのコンテナに入る。
docker exec -it <コンテナIDの頭2文字> bash
Djangoプロジェクトを作成する（プロジェクト名: sample_project）
django-admin startproject sample_project .
sample_project/settings.pyを以下のように変更する。
...(略)
LANGUAGE_CODE = 'ja'
...(略)
TIME_ZONE = 'Asia/Tokyo'
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.postgresql_psycopg2',
'NAME': 'sample_project',
'USER': 'root',
'PASSWORD': 'password',
'HOST': 'db',
'PORT': '5432',
}
}
プロジェクトのルートディレクトリで以下コマンドを実行してアプリを立ち上げる。
python manage.py runserver 0.0.0.0:8000
http://localhost:8000にアクセスして起動を確認する。
フロントエンド
コンテナの特定のために以下コマンドを実行する。
docker ps
コンテナIDの頭文字2文字をもとにフロントエンドのコンテナに入る。
docker exec -it <コンテナIDの頭2文字> bash
Next.jsプロジェクトを作成する（プロジェクト名: sample_project）。
npx create-next-app@latest sample_project --typescript
設定は以下のようにした（参考にした記事）。
プロジェクトのルートディレクトリに移動して、アプリを立ち上げる。
cd sample_project
npm run dev
http://localhost:3000にアクセスして起動を確認する。
後編
CRUDアプリケーションの作成は次の記事で記載した。