Next.js & FastAPI & PostgreSQL on Docker

はじめに

こんにちは、インダストリーワンエンジニアの松崎です。

Next.js & FastAPI & PostgreSQL on Docker と題して、フロントエンドにNext.js、バックエンドにFastAPI、データベースにPostgreSQLを採用してサクッと技術検証できるようにするための第一段階としてDocker Composeで動作環境が構築できるようにしたので記事にします。

サクッと技術検証できるようにしたかった理由としては、プロダクトにそのまま流用したいというよりもライブラリなどをサンドボックス的に試したかったからです。

技術の選定理由については、個人的な興味によるものです。

はじめに
成果物
フロントエンド
バックエンド
データベース
今後
- フロントエンド
- バックエンド
おわりに

成果物

ソースはこちら GitHub - fumiya-matsuzaki/nextjs-fastapi-ex

※現時点ではフロントエンドとバックエンドの疎通を確認できるだけの状態です。

※現時点では、バックエンドとデータベースの接続は行なっておりません。

フロントエンド

Next.jsを採用し、Route Handlersを利用してバックエンドと疎通します。

起動後にhttp://localhost:3000にアクセスするとNext.jsの初期画面が表示されます。

また、http://localhost:3000/demoにアクセスするとデモページに遷移し、バックエンドのAPIから取得したメッセージが表示されます。

デモページを表示するコンポーネント

'use client'

import { useEffect, useState } from "react";
import axios from "axios";

export default function DemoPage() {

  const [routerMessage, setRouterMessage] = useState("");
  const [serverMessage, setServerMessage] = useState("");

  const getDemoServerMessage = async () => {
    const response = await axios.get("/api/demo/get-server");
    setServerMessage(response.data.message);
  }

  const getDemoRouterMessage = async () => {
    const response = await axios.get("/api/demo/get-router");
    setRouterMessage(response.data.message);
  }


  useEffect(() => {
    getDemoServerMessage();
    getDemoRouterMessage();
  }, []);

  return (
    <div>
      <p>{serverMessage}</p>
      <p>{routerMessage}</p>
    </div>
  );
}

RouteHandlerがバックエンドを経由せず、メッセージを返す

import { NextRequest, NextResponse } from 'next/server';


export async function GET(req: NextRequest) {
    return NextResponse.json({ message: 'Hello from APIRouter!'});
}

RouteHandlerがバックエンドにリクエストを送信し、メッセージを返す

import { NextRequest, NextResponse } from 'next/server';
import { api } from '@/domain/demo/constant'
import axios from 'axios';


export async function GET(req: NextRequest) {
    const response = await axios.get(`${api.baseURL}${api.V1.getMessage}`);
    return NextResponse.json(response.data);
}

バックエンド

PythonのフレームワークであるFastAPIを用いてAPIサーバを構築し、フロントエンドからのリクエストを受け取ります。

起動後にhttp://localhost:8000/docsにアクセスするとFastAPIが作成するエンドポイントの一覧画面(Swagger UI)が表示されます。

デモ用のエンドポイント

こちらでmessageをレスポンスするエンドポイントを定義

from fastapi import APIRouter, status, HTTPException
from fastapi.responses import ORJSONResponse


V1_GET_DEMO_MESSAGE = "/webapi/v1/demo/message"


router = APIRouter(tags=["Demo"], default_response_class=ORJSONResponse)


@router.get(
    path=V1_GET_DEMO_MESSAGE,
    status_code=status.HTTP_200_OK,
    responses={
        status.HTTP_200_OK: {
            "description": "Get demo message",
        },
        status.HTTP_500_INTERNAL_SERVER_ERROR: {
            "description": "Internal server error"
        }
    }
)
async def get_demo_message():
    try:
        return ORJSONResponse(
                status_code=status.HTTP_200_OK,
                content=(
                    {
                        "message": f"Hello from the FastAPI!"
                    }
                )
            )
        
    except Exception as e:
        raise HTTPException(
            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
            detail=str(e)
        )