both: Dockerのセットアップ

backend/Dockerfile

@@ -0,0 +1,14 @@
+FROM python:3.12
+
+ENV PYTHONUNBUFFERED=1
+
+WORKDIR /backend
+
+RUN pip install poetry
+RUN poetry config virtualenvs.create false
+
+COPY pyproject.toml* poetry.lock* ./
+
+RUN poetry install --no-root --no-interaction --no-ansi
+
+COPY . .

backend/core/settings.py

@@ -90,7 +90,7 @@
 DATABASES = {
     "default": {
         "ENGINE": "django.db.backends.sqlite3",
-        "NAME": BASE_DIR / "db.sqlite3",
+        "NAME": BASE_DIR / "db" / "db.sqlite3",
     }
 }
 
@@ -140,7 +140,7 @@
     "default": {
         "BACKEND": "channels_redis.core.RedisChannelLayer",
         "CONFIG": {
-            "hosts": [("127.0.0.1", 6379)],
+            "hosts": [("redis", 6379)],
         },
     },
 }

docker-compose.yml

@@ -0,0 +1,34 @@
+services:
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+    volumes:
+      - ./frontend:/frontend
+      - /frontend/node_modules
+    command: pnpm run dev
+    ports:
+      - "5173:5173"
+    depends_on:
+      - backend
+
+  backend:
+    build:
+      context: ./backend
+      dockerfile: Dockerfile
+    volumes:
+      - ./backend:/backend
+      - sqlite_data:/backend/db
+    command: daphne core.asgi:application --port 8000 --bind 0.0.0.0
+    ports: 
+      - "8000:8000"
+    depends_on:
+      - redis
+
+  redis:
+    image: redis:latest
+    ports: 
+      - "6379:6379"
+
+volumes:
+  sqlite_data:

frontend/.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+build

frontend/Dockerfile

@@ -0,0 +1,11 @@
+FROM node:22.12.0
+
+RUN npm install -g pnpm
+
+WORKDIR /frontend
+
+COPY package.json pnpm-lock.yaml ./
+
+RUN pnpm install --frozen-lockfile
+
+COPY . .

frontend/src/pages/AlgorithmAndResultPage.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-// import { ConnectAlert } from "@/components/ConnectAlert";
+import { ConnectAlert } from "@/components/ConnectAlert";
 import NetworkGraph from "@/components/NetworkGraph";
 import SelectAlgorithm from "@/components/SelectAlgorithm";
-// import { useSharedChatHandler } from "@/hooks/WebSocketContext";
+import { useSharedChatHandler } from "@/hooks/WebSocketContext";
 import { deleteResult } from "@/lib/deleteResult";
 import { downloadCsv } from "@/lib/downloadCsv";
 import { fetchResult } from "@/lib/fetchResult";
@@ -29,7 +29,7 @@ export default function AlgorithmAndResultPage({ payments, members }: Props) {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const { eventId } = useParams();
-  // const ws = useSharedChatHandler();
+  const ws = useSharedChatHandler();
 
   const handleSubmit = async () => {
     if (!algorithmId) return setError("アルゴリズムを選択してください");
@@ -75,7 +75,7 @@ export default function AlgorithmAndResultPage({ payments, members }: Props) {
 
   return (
     <div className="w-full min-w-80 max-w-3xl p-4">
-      {/* <ConnectAlert isConnected={ws.isConnected} /> */}
+      <ConnectAlert isConnected={ws.isConnected} />
       <CardWrapper
         title="アルゴリズムの選択"
         description="計算を行うアルゴリズムを選択して、「計算実行」を押すと計算が実行されます！"

frontend/src/pages/BillingPage.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-// import { ConnectAlert } from "@/components/ConnectAlert";
+import { ConnectAlert } from "@/components/ConnectAlert";
 import { useSharedChatHandler } from "@/hooks/WebSocketContext";
 import BillingTabList from "../components/BillingTabList";
 import CardWrapper from "../components/CardWrapper";
@@ -80,7 +80,7 @@ export default function BillingPage({
 
   return (
     <div className="mx-auto w-full max-w-3xl p-6">
-      {/* <ConnectAlert isConnected={ws.isConnected} /> */}
+      <ConnectAlert isConnected={ws.isConnected} />
       <CardWrapper
         title="請求の追加"
         description="各メンバーに請求したい金額を入力してください"

frontend/src/pages/MembersPage.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-// import { ConnectAlert } from "@/components/ConnectAlert";
+import { ConnectAlert } from "@/components/ConnectAlert";
 import { useSharedChatHandler } from "@/hooks/WebSocketContext";
 import CardWrapper from "../components/CardWrapper";
 import MemberList from "../components/MemberList";
@@ -55,7 +55,7 @@ export default function MembersPage({
 
   return (
     <div className="mx-auto w-full max-w-3xl p-6">
-      {/* <ConnectAlert isConnected={ws.isConnected} /> */}
+      <ConnectAlert isConnected={ws.isConnected} />
       <CardWrapper
         title="メンバーの追加"
         description="まずは建て替え精算を行うメンバーを追加してください"

frontend/vite.config.ts

@@ -11,4 +11,7 @@ export default defineConfig({
       "@": path.resolve(__dirname, "./src"),
     },
   },
+  server: {
+    host: true,
+  },
 });

resources/migrate.sh

@@ -0,0 +1,4 @@
+#!/usr/bin/env bash
+
+docker compose exec backend python3 manage.py makemigrations
+docker compose exec backend python3 manage.py migrate