フロントエンドエンジニアが Docker Compose で [ Svelte＋Django+PostgreSQL ] の開発環境をつくってみる🔥
つじの えるDjangoには標準で開発用のWebサーバが付いてるので、
今まで個人開発のアプリ（趣味CMS）ではそれを使って進めていた。
が、ある程度開発の骨子ができたところで、Herokuへのデプロイに備えて＆開発を続けやすいようにするため、Docker Composeでちゃんとした構成を作ってみたいと思いいたる。
バックエンド、ちゃんと理解したい。
前にも触ったことはあるのだが、何となく動かして書き換えて「へ～、便利だなぁ～」くらいで終わらせてしまったのだ。
Docker DocやDocker Hubを参考にして組み合わせ、以下のような構成を一旦作ってみた。
🐋docker-compose.yml（仮作成）
# Compose のフォーマットバージョン
version: '3'
# サービスの構成
services:
# データベース
db:
container_name: postgres
image: postgres
ports:
- "5432:5432" # ホストのポート:コンテナのポート
volumes:
- postgres_data:/var/lib/postgresql/data # データ保持用のボリューム
environment:
POSTGRES_DB: postgres_eru_portfolio # データベース名
POSTGRES_USER: postgres # ユーザー名
POSTGRES_PASSWORD: pass # パスワード
# バックエンド (Django)
backend:
container_name: backend
build: ./backend # Dockerfileがあるディレクトリ
volumes:
- ./backend:/app/backend # ソースコードをコンテナにマウント
ports:
- "8000:8000" # ホストのポート:コンテナのポート
environment:
- DEBUG=1 # 環境変数の設定
depends_on:
- db # 前述の"db"に依存してるよ宣言
command: python3 manage.py runserver 0.0.0.0:8000
# フロントエンド (SvelteKit)
frontend:
container_name: frontend
build: ./frontend # Dockerfileがあるディレクトリ
volumes:
- ./frontend:/app/frontend # ソースコードをコンテナにマウント
ports:
- "80:3000" # ホストのポート:コンテナのポート
# environment:
- NODE_ENV=development # 環境変数の設定
command: npm run start # 実行コマンド
# option: 共通ネットワークの定義
networks:
default:
driver: bridge
# option: ボリュームの定義
volumes:
postgres_data:
躓き① ホストのポート/コンテナのポートという概念
ポートのことをふんわりしか理解してなくて躓いたので、忘れないようにするためにちゃんと言語化しとく。
localhostにブラウザでアクセスすること
すなわち
ブラウザを通してホストマシン(Dockerを動かしてるワイ自身のPC)にアクセスすること
ホストマシンのポート(入口)とコンテナのポート(出口)をそれぞれ設定し、Docker Composeによってマッピングしてやることで、ワイPCからDockerコンテナ上で動いているアプリへの通路を作ることになる。
ポート番号が80になってるとドメイン名のみでポート番号なしでアクセスできる。
たとえばポート番号を1234にしたときは 「localhost:1234」 のようにアクセスするが、
80になっていれば 「localhost」 のみでアクセスできる。
ITパスポートとかに出てきそうな知識だがイマイチ実践と紐づいてなかった。
デプロイ後も同様に考えられる。
※「localhost」を「example.com」のようなドメイン名に置き換えて考えるとわかりやすい
フロントエンドのポート番号(私の場合)
ports:
- "80:3000" # ホストのポート:コンテナのポート
前述の理由により、今回はフロントエンドアプリのホストのポートは80に。
SvelteKitのコンテナではプロジェクトを実行(npm run start)するとコンテナはデフォルトでポート3000をリッスンするので、コンテナ側のポートは3000とした。
ひとまずエラーなく、期待されるビューはきちんと動いていることを確認した。
Good job！ これだけでもすごく嬉しい🐻❄️💕
トップページ
CMS管理画面
次回はユーザー作成して、CMSの動作確認をしていく。