Projektowanie usługi chatbot AI typu SaaS przy użyciu Next.js, FastAPI, Credits i SSE
Przejrzyj architekturę czatu opartego na AI typu full-stack z bramką FastAPI, rejestrem transakcji, ograniczeniami szybkości działania Redis oraz strumieniowaniem SSE, a także wskazówki co należy najpierw naprawić.
Źródła: Build a Production-Ready AI SaaS with React 19 + FastAPI: The Complete Architecture (2026)
Interfejs czatu wokół API modelu jest prosty; produkt musi również chronić klucze przed dostępem klienta, mierzyć zużycie, ograniczać nadużywanie, przekazywać tokeny w sposób uporządkowany oraz umożliwiać powtarzalną implementację. Ten przewodnik buduje te elementy przy użyciu Next.js z React 19, FastAPI, PostgreSQL z pgvector oraz Redis. Traktuj kod jako szkic – każda sekcja wskazuje, co należy najpierw wzmocnić.
Tło systemu to strażnik wejścia
Brauzer nigdy nie wywołuje dostawcy modelu. Twoje API autoryzuje, sprawdza limity i kredyty, wywołuje model oraz rejestruje koszty.
┌─────────────────────────────────────────────────────────────┐
│ React 19 App │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────────┐ │
│ │ Server │ │ Client │ │ Chat Interface │ │
│ │ Components │ │ Components │ │ (Streaming) │ │
│ │ (Initial │ │ (Interactivity│ │ │ │
│ │ data fetch)│ │ + State) │ │ │ │
│ └──────┬───────┘ └──────┬───────┘ └────────┬─────────┘ │
│ │ │ │ │
│ └─────────────────┴────────────────────┘ │
│ │ │
│ TanStack Query │
│ (Auth + Sync) │
└───────────────────────────┬─────────────────────────────────┘
│ HTTPS / JSON
┌───────────────────────────┴─────────────────────────────────┐
│ FastAPI Backend │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────────┐ │
│ │ Auth │ │ Rate │ │ OpenAI │ │
│ │ Middleware │ │ Limiter │ │ Service │ │
│ │ (JWT + │ │ (Redis) │ │ (Structured │ │
│ │ Credits) │ │ │ │ Output) │ │
│ └──────────────┘ └──────────────┘ └──────────────────┘ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────────┐ │
│ │ Background │ │ PostgreSQL │ │ pgvector │ │
│ │ Worker │ │ (Users + │ │ (Embeddings) │ │
│ │ (Celery) │ │ Conversations│ │ │ │
│ └──────────────┘ └──────────────┘ └──────────────────┘ │
└─────────────────────────────────────────────────────────────┘
Komponenty serwerowe ładują historię bez dodatkowego JavaScriptu, asynchroniczny FastAPI obsługuje wolne wywołania modeli bez blokowania wątków, pgvector zapewnia możliwość wyszukiwania danych, Redis przechowuje liczniki ograniczeń szybkości oraz zapisane embeddingi, a proces pracowniczy przejmuje zadania analizy PDF i tworzenia embeddingów z ścieżki żądania.
Model danych: dodawanie do księgi rachunkowej
Schemat definiuje użytkowników, rozmowy, wiadomości oraz księgę kredytową.
# backend/models.py
from sqlalchemy import Column, Integer, String, DateTime, ForeignKey, Text, Numeric, Index
from sqlalchemy.dialects.postgresql import UUID, JSONB, VECTOR
from sqlalchemy.orm import relationship
from datetime import datetime
import uuid
Base = declarative_base()
class User(Base):
__tablename__ = "users"
id = Column(UUID(as_uuid=True), primary_key=True, default=uuid.uuid4)
email = Column(String, unique=True, nullable=False)
hashed_password = Column(String, nullable=False)
credits_balance = Column(Numeric(10, 2), default=0.00)
is_active = Column(Boolean, default=True)
created_at = Column(DateTime, default=datetime.utcnow)
conversations = relationship("Conversation", back_populates="user")
__table_args__ = (
Index('ix_users_email', 'email'),
)
class Conversation(Base):
__tablename__ = "conversations"
id = Column(UUID(as_uuid=True), primary_key=True, default=uuid.uuid4)
user_id = Column(UUID(as_uuid=True), ForeignKey("users.id"), nullable=False)
title = Column(String, nullable=True)
model = Column(String, default="gpt-4o")
created_at = Column(DateTime, default=datetime.utcnow)
updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
user = relationship("User", back_populates="conversations")
messages = relationship("Message", back_populates="conversation", order_by="Message.created_at")
class Message(Base):
__tablename__ = "messages"
id = Column(UUID(as_uuid=True), primary_key=True, default=uuid.uuid4)
conversation_id = Column(UUID(as_uuid=True), ForeignKey("conversations.id"), nullable=False)
role = Column(String, nullable=False) # 'user', 'assistant', 'system'
content = Column(Text, nullable=False)
token_count = Column(Integer, default=0)
metadata = Column(JSONB, default={}) # Store model, latency, finish_reason
created_at = Column(DateTime, default=datetime.utcnow)
conversation = relationship("Conversation", back_populates="messages")
class CreditLedger(Base):
__tablename__ = "credit_ledger"
id = Column(UUID(as_uuid=True), primary_key=True, default=uuid.uuid4)
user_id = Column(UUID(as_uuid=True), ForeignKey("users.id"), nullable=False)
amount = Column(Numeric(10, 2), nullable=False) # Negative for usage
description = Column(String, nullable=False)
reference_id = Column(String, nullable=True) # conversation_id or message_id
created_at = Column(DateTime, default=datetime.utcnow)
Zamiast modyfikować saldо, każda zakup lub użycie jest dodawane, a saldo stanowi ich sumę, co zapewnia ślad audytowy i uniemożliwia utratę aktualizacji. Przed użyciem należy poprawić kilka kwestii: Message.metadata koliduje z atrybutem zarezerwowanym przez deklaratywną bazę SQLAlchemy, więc należy go przemianować (na przykład na meta); brakuje importów takich jak Boolean i declarative_base; a typ kolumny pgvector pochodzi z pakietu pgvector, a nie z dialektu PostgreSQL w SQLAlchemy.
Słuzby i trasy FastAPI
Konwencjonalna struktura oddziela logikę autoryzacji, AI, routery oraz middleware:
backend/
├── main.py
├── config.py
├── database.py
├── models.py
├── schemas.py
├── auth/
│ ├── utils.py
│ ├── dependencies.py
│ └── router.py
├── ai/
│ ├── service.py
│ └── schemas.py
├── api/
│ ├── conversations.py
│ └── credits.py
├── middleware/
│ └── rate_limit.py
└── worker.py
Służba strumieniowa mierząca ilość wykorzystania
Usługa ta umożliwia 20 żądań na minutę na użytkownika za pośrednictwem Redis, sprawdza saldo, przesyła dane w formie Server-Sent Events, a następnie zapisuje jednocześnie wiadomość asystenta oraz negatywną wpis w rejestrze.
# backend/ai/service.py
from openai import AsyncOpenAI
from typing import AsyncGenerator
import json
from sqlalchemy.ext.asyncio import AsyncSession
from models import Message, CreditLedger
from schemas import ChatCompletionRequest, ChatStreamChunk
import redis.asyncio as redis
client = AsyncOpenAI(api_key=settings.OPENAI_API_KEY)
redis_client = redis.from_url(settings.REDIS_URL)
class AIService:
def __init__(self, db: AsyncSession):
self.db = db
async def stream_chat(
self,
user_id: str,
conversation_id: str,
messages: list[dict],
model: str = "gpt-4o"
) -> AsyncGenerator[str, None]:
"""
Streams chat completion and deducts credits.
Yields SSE-formatted strings.
"""
# 1. Check rate limit
key = f"ratelimit:chat:{user_id}"
current = await redis_client.incr(key)
if current == 1:
await redis_client.expire(key, 60)
if current > 20: # 20 requests per minute
yield f"data: {json.dumps({'error': 'Rate limit exceeded'})}\n\n"
return
# 2. Check credits (simplified; use ledger sum in production)
balance = await self.get_credit_balance(user_id)
if balance < 0.01:
yield f"data: {json.dumps({'error': 'Insufficient credits'})}\n\n"
return
# 3. Stream from OpenAI
try:
stream = await client.chat.completions.create(
model=model,
messages=messages,
stream=True,
max_tokens=4096,
)
full_content = ""
total_tokens = 0
async for chunk in stream:
delta = chunk.choices[0].delta.content or ""
full_content += delta
total_tokens += 1 # Approximate; use tiktoken for accuracy
yield f"data: {json.dumps({'chunk': delta, 'done': False})}\n\n"
# 4. Persist assistant message
assistant_msg = Message(
conversation_id=conversation_id,
role="assistant",
content=full_content,
token_count=total_tokens,
metadata={"model": model, "finish_reason": "stop"}
)
self.db.add(assistant_msg)
# 5. Deduct credits (approximate $0.002 per 1K tokens for GPT-4o)
cost = (total_tokens / 1000) * 0.002
ledger_entry = CreditLedger(
user_id=user_id,
amount=-cost,
description=f"Chat completion: {conversation_id}",
reference_id=str(conversation_id)
)
self.db.add(ledger_entry)
await self.db.commit()
yield f"data: {json.dumps({'done': True, 'tokens': total_tokens})}\n\n"
except Exception as e:
yield f"data: {json.dumps({'error': str(e)})}\n\n"
async def get_credit_balance(self, user_id: str) -> float:
# In production, use a SQL SUM query
result = await self.db.execute(
select(func.sum(CreditLedger.amount)).where(CreditLedger.user_id == user_id)
)
return result.scalar() or 0.00
Uwagi: jeden token na fragment to przybliżenie, dlatego należy używać danych o zużyciu podanych przez dostawcę lub tokenera. Ustalona sztywno cena ma charakter ilustracyjny i nie odzwierciedla aktualnych warunków; ceny należy ładować z konfiguracji. Ponadto sprawdzanie salda przed przesyłaniem danych i odejmowanie kwoty później nie jest operacją atomową; należy z góry zarezerwować kredyty lub zamknąć wiersz użytkownika.
Koniecpunkt przesyłania wiadomości
Router weryfikuje prawa własności (404, a nie 403, aby uniknąć ujawnienia identyfikatorów), zapisuje wiadomość użytkownika i zwraca StreamingResponse:
# backend/api/conversations.py
from fastapi import APIRouter, Depends, HTTPException
from fastapi.responses import StreamingResponse
from sqlalchemy.ext.asyncio import AsyncSession
from auth.dependencies import get_current_user
from database import get_db
from ai.service import AIService
from models import Conversation, Message
from schemas import CreateMessageRequest
router = APIRouter(prefix="/conversations", tags=["conversations"])
@router.post("/{conversation_id}/messages")
async def create_message(
conversation_id: str,
request: CreateMessageRequest,
current_user = Depends(get_current_user),
db: AsyncSession = Depends(get_db)
):
# Verify ownership
conversation = await db.get(Conversation, conversation_id)
if not conversation or conversation.user_id != current_user.id:
raise HTTPException(status_code=404, detail="Conversation not found")
# Persist user message
user_msg = Message(
conversation_id=conversation_id,
role="user",
content=request.content
)
db.add(user_msg)
await db.commit()
# Build message history
messages = [
{"role": m.role, "content": m.content}
for m in conversation.messages
]
messages.append({"role": "user", "content": request.content})
# Stream response
ai_service = AIService(db)
return StreamingResponse(
ai_service.stream_chat(
user_id=str(current_user.id),
conversation_id=conversation_id,
messages=messages,
model=conversation.model
),
media_type="text/event-stream"
)
W przypadku asynchronicznego SQLAlchemy dostęp do conversation.messages w trybie opóźnionym powoduje błąd, dlatego należy wcześniej załadować tę relację.
Globalna ograniczenie szybkości
Druga, bardziej sztywna granica wynosząca 100 żądań na minutę działa jako middleware:
# backend/middleware/rate_limit.py
from fastapi import Request, HTTPException
from starlette.middleware.base import BaseHTTPMiddleware
import redis.asyncio as redis
redis_client = redis.from_url("redis://localhost:6379")
class RateLimitMiddleware(BaseHTTPMiddleware):
async def dispatch(self, request: Request, call_next):
# Skip rate limiting for auth routes
if request.url.path.startswith("/auth"):
return await call_next(request)
# Identify user (from JWT cookie or header)
user_id = request.state.user_id if hasattr(request.state, "user_id") else "anonymous"
key = f"ratelimit:global:{user_id}"
current = await redis_client.incr(key)
if current == 1:
await redis_client.expire(key, 60)
if current > 100: # 100 requests per minute globally
raise HTTPException(status_code=429, detail="Too many requests")
response = await call_next(request)
response.headers["X-RateLimit-Remaining"] = str(100 - current)
return response
HTTPException wywołany wewnątrz BaseHTTPMiddleware nie jest przekształcany przez mechanizmy obsługi FastAPI w standardowy kod błędu 429, dlatego zamiast tego zwracany jest JSONResponse o stanie 429. Okna czasowe typu „fixed” również pozwalają na chwilowe wzrosty obciążenia.
Frontend
Drzewo App Router łączy strony składników serwerowych z komponentami klienckimi służącymi do czatu na żywo:
src/
├── app/
│ ├── layout.tsx
│ ├── page.tsx
│ ├── (dashboard)/
│ │ ├── layout.tsx
│ │ ├── conversations/
│ │ │ ├── page.tsx # Server Component: list conversations
│ │ │ └── [id]/
│ │ │ ├── page.tsx # Server Component: load initial messages
│ │ │ └── ChatClient.tsx # Client Component: streaming + input
│ │ └── settings/
│ │ └── page.tsx
│ └── api/ # Route handlers if needed
├── components/
│ ├── ui/ # shadcn/ui components
│ └── chat/
│ ├── MessageList.tsx
│ ├── MessageItem.tsx
│ └── StreamingText.tsx
├── lib/
│ ├── api.ts # Axios instance with interceptors
│ └── auth.ts
├── hooks/
│ ├── useChatStream.ts # Custom hook for SSE
│ └── useConversations.ts
└── providers.tsx
Ładowanie historii na serwerze
Strona odczytuje plik cookie i jednocześnie pobiera historię rozmów oraz wiadomości, dzięki czemu pierwszy rysunek ekranu już zawiera treść czatu:
// app/(dashboard)/conversations/[id]/page.tsx
import { notFound } from "next/navigation";
import { cookies } from "next/headers";
import { ChatClient } from "./ChatClient";
async function getConversation(id: string, token: string) {
const res = await fetch(`${process.env.API_URL}/conversations/${id}`, {
headers: { Authorization: `Bearer ${token}` },
next: { revalidate: 0 } // Dynamic data
});
if (!res.ok) return null;
return res.json();
}async function getMessages(id: string, token: string) {
const res = await fetch(`${process.env.API_URL}/conversations/${id}/messages`, {
headers: { Authorization: `Bearer ${token}` },
});
if (!res.ok) return [];
return res.json();
}export default async function ConversationPage({
params
}: {
params: { id: string }
}) {
const cookieStore = cookies();
const token = cookieStore.get("access_token")?.value;
if (!token) return notFound();
// Parallel data fetching on the server
const [conversation, messages] = await Promise.all([
getConversation(params.id, token),
getMessages(params.id, token)
]);
if (!conversation) return notFound();
return (
<div className="flex h-[calc(100vh-4rem)] flex-col">
<header className="border-b px-6 py-4">
<h1 className="text-lg font-semibold">{conversation.title || "New Chat"}</h1>
</header>
{/* Client component handles interactivity and streaming */}
<ChatClient
conversationId={params.id}
initialMessages={messages}
/>
</div>
);
}
W Next.js 15 i nowszych wersjach funkcje cookies() oraz params są asynchroniczne; należy je obsłużyć za pomocą instrukcji await.
Strumieniowanie danych do interfejsu
Klient optymistycznie dodaje wiadomość użytkownika oraz pusty placeholder dla asystenta, wysyła żądanie POST i wypełnia placeholder na podstawie strumienia odpowiedzi:
// app/(dashboard)/conversations/[id]/ChatClient.tsx
"use client";import { useState, useRef, useCallback } from "react";
import { useChatStream } from "@/hooks/useChatStream";
import { MessageList } from "@/components/chat/MessageList";
import { ChatInput } from "@/components/chat/ChatInput";
interface Message {
id: string;
role: "user" | "assistant";
content: string;
isStreaming?: boolean;
}
export function ChatClient({
conversationId,
initialMessages
}: {
conversationId: string;
initialMessages: Message[];
}) {
const [messages, setMessages] = useState<Message[]>(initialMessages);
const [input, setInput] = useState("");
const [isLoading, setIsLoading] = useState(false);
const handleSubmit = useCallback(async (content: string) => {
if (!content.trim() || isLoading) return;
// 1. Optimistic UI: Add user message immediately
const userMessage: Message = {
id: `temp-${Date.now()}`,
role: "user",
content
};
const assistantMessage: Message = {
id: `temp-assistant-${Date.now()}`,
role: "assistant",
content: "",
isStreaming: true
};
setMessages(prev => [...prev, userMessage, assistantMessage]);
setInput("");
setIsLoading(true);
// 2. Open SSE connection
const response = await fetch(`/api/conversations/${conversationId}/messages`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ content })
});
if (!response.body) {
setIsLoading(false);
return;
}
const reader = response.body.getReader();
const decoder = new TextDecoder();
let assistantContent = "";
try {
while (true) {
const { done, value } = await reader.read();
if (done) break;
const chunk = decoder.decode(value);
const lines = chunk.split("\n");
for (const line of lines) {
if (line.startsWith("data: ")) {
const data = JSON.parse(line.slice(6));
if (data.error) {
throw new Error(data.error);
}
if (data.chunk) {
assistantContent += data.chunk;
setMessages(prev =>
prev.map(msg =>
msg.id === assistantMessage.id
? { ...msg, content: assistantContent }
: msg
)
);
}
if (data.done) {
setMessages(prev =>
prev.map(msg =>
msg.id === assistantMessage.id
? { ...msg, isStreaming: false, tokenCount: data.tokens }
: msg
)
);
}
}
}
}
} catch (error) {
setMessages(prev =>
prev.map(msg =>
msg.id === assistantMessage.id
? { ...msg, content: "Error: Failed to generate response", isStreaming: false }
: msg
)
);
} finally {
setIsLoading(false);
reader.releaseLock();
}
}, [conversationId, isLoading]);
return (
<div className="flex flex-1 flex-col">
<MessageList messages={messages} />
<ChatInput
value={input}
onChange={setInput}
onSubmit={handleSubmit}
disabled={isLoading}
/>
</div>
);
}
Mimo komentarza, w tym przypadku używany jest fetch z czytelnikiem strumienia, a nie EventSource, który nie może wysyłać ciał żądań POST. Należy buforować częściowe linie, ponieważ fragmenty danych mogą je rozdzielić, oraz dodać AbortController, aby móc anulować operację w przypadku odłączenia. Relatywna ścieżka URL /api/... zakłada również obecność obsługującego routera lub mechanizmu przekierowania do FastAPI.
Klient Axios do wszystkiego innego
Z użyciem plików cookie typu httpOnly klient wysyła dane uwierzytelniające, dodaje identyfikator śledzenia i próbuje ponownie po odświeżeniu strony w przypadku błędu 401:
// lib/api.ts
import axios from "axios";
export const api = axios.create({
baseURL: process.env.NEXT_PUBLIC_API_URL,
withCredentials: true, // Send cookies
});
// Request interceptor: add auth token
api.interceptors.request.use((config) => {
// Token is in httpOnly cookie, sent automatically
// Add request ID for tracing
config.headers["X-Request-ID"] = crypto.randomUUID();
return config;
});
// Response interceptor: handle 401 and token refresh
api.interceptors.response.use(
(response) => response,
async (error) => {
const originalRequest = error.config;
if (error.response?.status === 401 && !originalRequest._retry) {
originalRequest._retry = true;
try {
await axios.post(
`${process.env.NEXT_PUBLIC_API_URL}/auth/refresh`,
{},
{ withCredentials: true }
);
return api(originalRequest);
} catch (refreshError) {
window.location.href = "/login";
return Promise.reject(refreshError);
}
}
return Promise.reject(error);
}
);
Każde z równoległych błędów 401 powoduje odświeżenie; aby uzyskać wersję wolną od konfliktów, zapoznaj się z rozwiązaniem dotyczącym odświeżania w pojedynczej transakcji.
Wymuszanie użycia kredytów jako zależności
Zależność FastAPI sumuje dane z księgi rachunków i odrzuca żądanie z kodem 402 Payment Required, gdy salda jest zbyt niskie, jeszcze przed wykonaniem jakiegokolwiek wywołania modelu:
# backend/api/deps.py
from fastapi import Depends, HTTPException
from sqlalchemy.ext.asyncio import AsyncSession
from auth.dependencies import get_current_user
from database import get_db
from models import CreditLedger
from sqlalchemy import func, select
async def require_credits(
min_credits: float = 0.01,
current_user = Depends(get_current_user),
db: AsyncSession = Depends(get_db)
):
result = await db.execute(
select(func.sum(CreditLedger.amount)).where(
CreditLedger.user_id == current_user.id
)
)
balance = result.scalar() or 0.00
if balance < min_credits:
raise HTTPException(
status_code=402, # Payment Required
detail=f"Insufficient credits. Balance: ${balance:.4f}"
)
return current_user
# Usage
@router.post("/conversations/{id}/messages")
async def create_message(
...,
user = Depends(require_credits) # Enforces payment before AI call
):
...
Ma ten sam problem z brakiem atomowości co powyżej.
Testowanie bez wywoływania modelu
MSW 2.x zwraca fałszywy strumień zdarzeń, a test z Testing Library sprawdza tekst optymistyczny oraz strumieniowany:
// tests/mocks/openai.ts
import { http, HttpResponse } from "msw";
export const openaiHandlers = [
http.post("https://api.openai.com/v1/chat/completions", async () => {
const encoder = new TextEncoder();
const stream = new ReadableStream({
start(controller) {
const chunks = [
'data: {"choices":[{"delta":{"content":"Hello"}}]}\n\n',
'data: {"choices":[{"delta":{"content":" world"}}]}\n\n',
'data: {"choices":[{"delta":{}}],"done":true}\n\n',
];
chunks.forEach(chunk => {
controller.enqueue(encoder.encode(chunk));
});
controller.close();
}
});
return new HttpResponse(stream, {
headers: {
"Content-Type": "text/event-stream",
},
});
}),
];
// tests/ChatClient.test.tsx
import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { ChatClient } from "@/app/(dashboard)/conversations/[id]/ChatClient";
it("streams assistant response", async () => {
const user = userEvent.setup();
render(
<ChatClient
conversationId="test-id"
initialMessages={[]}
/>
);
await user.type(screen.getByPlaceholderText("Ask anything..."), "Hello");
await user.click(screen.getByRole("button", { name: /send/i }));
// Optimistic user message appears immediately
expect(screen.getByText("Hello")).toBeInTheDocument();
// Streaming response appears
await waitFor(() => {
expect(screen.getByText("Hello world")).toBeInTheDocument();
});
});
Obsługa symuluje adres URL dostawcy, ale komponent korzysta z twojego API, więc należy zamiast tego symulować właśnie ten endpoint. Test backendu modyfikuje klienta i sprawdza obecność jednej wiersza w księdze rachunków:
# tests/test_chat.py
import pytest
from unittest.mock import AsyncMock, patch
@pytest.mark.asyncio
async def test_chat_deducts_credits(client, auth_headers, db_session):
with patch("ai.service.client.chat.completions.create") as mock_create:
mock_create.return_value = AsyncMock()
mock_create.return_value.__aiter__.return_value = [
MockChunk(delta=MockContent("Hi"))
]
response = await client.post(
"/conversations/test-id/messages",
json={"content": "Hello"},
headers=auth_headers
)
assert response.status_code == 200
# Verify credit deduction
ledger = await db_session.execute(
select(CreditLedger).where(CreditLedger.user_id == test_user_id)
)
assert len(ledger.scalars().all()) == 1
Rozwijanie z użyciem kontenerów
Multistopniowy Dockerfile buduje Next.js w trybie samodzielnym i uruchamia go jako użytkownika innej niż root:
# frontend/Dockerfile
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs
COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
USER nextjs
EXPOSE 3000
ENV PORT=3000
CMD ["node", "server.js"]
Compose uruchamia PostgreSQL z pgvector wraz z kontrolą stanu, Redis, API, interfejs użytkownika oraz nginx:
version: "3.8"
services:
postgres:
image: pgvector/pgvector:pg16
environment:
POSTGRES_USER: app
POSTGRES_PASSWORD: ${DB_PASSWORD}
POSTGRES_DB: saas_db
volumes:
- postgres_data:/var/lib/postgresql/data
healthcheck:
test: ["CMD-SHELL", "pg_isready -U app"]
interval: 5s
timeout: 5s
retries: 5
redis:
image: redis:7-alpine
volumes:
- redis_data:/data
backend:
build: ./backend
environment:
DATABASE_URL: postgresql+asyncpg://app:${DB_PASSWORD}@postgres/saas_db
REDIS_URL: redis://redis:6379/0
OPENAI_API_KEY: ${OPENAI_API_KEY}
SECRET_KEY: ${SECRET_KEY}
depends_on:
postgres:
condition: service_healthy
redis:
condition: service_started
command: uvicorn main:app --host 0.0.0.0 --port 8000
frontend:
build: ./frontend
environment:
NEXT_PUBLIC_API_URL: http://backend:8000
depends_on:
- backend
nginx:
image: nginx:alpine
ports:
- "80:80"
- "443:443"
volumes:
- ./nginx.conf:/etc/nginx/nginx.conf:ro
depends_on:
- frontend
- backend
volumes:
postgres_data:
redis_data:
NEXT_PUBLIC_ – wartości są wbudowywane podczas budowania dla przeglądarki, która nie może rozwiązać adresu backend:8000; należy użyć publicznej ścieżki nginx.
Główne wnioski
- Klucze, ceny i limity należy przechowywać po stronie serwera; model stanowi zależność znajdującą się za Twoim API.
- Należy rejestrować użycie w księdze rachunkowej do dodawania tylko nowych wpisów oraz sprawić, by krok weryfikacji i odjęcia był atomowy.
- Należy używać strumieniowania z wyraźną możliwością anulowania oraz buforowaniem wierszy.
- W testach należy symulować własny kontrakt API, a nie ten dostarczony przez dostawcę.
Pozycje pokrewne
- Wiązanie narzędzi MCP z interfejsem chatowym w React z wbudowaną aprobatą ludzką — Dowiedz się, jak Model Context Protocol pasuje do aplikacji React: dlaczego backend powinien hostować MCP, jak działa serwer narzędzi oraz jak przesyłać i aprobowywać wywołania narzędzi w interfejsie użytkownika.
- Logowanie do Google za pomocą Auth.js i Prisma: łączenie przewodników Next.js — Połącz przewodniki Prisma i Auth.js dla Next.js w jedną działającą aplikację z logowaniem przez Google, przechowywaniem użytkowników i postów powiązanych z sesją, włączając poprawki pomijane przez dokumentację.