FastAPIとReactをDocker Composeで統合する

FastAPIとReactの基本

FastAPIとReactは、現代のWeb開発において非常に人気のあるフレームワークです。それぞれが異なる目的を持って設計されており、それぞれがその分野で優れたパフォーマンスを発揮します。

FastAPI

FastAPIは、Pythonで書かれた非常に高速なWebフレームワークです。FastAPIは、Python 3.6以降の型ヒントを使用してAPIのパラメータを自動的に検証し、リクエストとレスポンスをシリアル化します。これにより、バグを早期に発見し、開発速度を向上させることができます。

React

Reactは、Facebookが開発したJavaScriptライブラリで、ユーザーインターフェースの構築に使用されます。Reactはコンポーネントベースのアーキテクチャを採用しており、開発者は再利用可能なUIコンポーネントを作成してアプリケーションを構築します。これにより、コードの再利用性が向上し、開発速度が向上します。

これらのフレームワークを組み合わせることで、強力で効率的なWebアプリケーションを構築することができます。次のセクションでは、これらのフレームワークをDocker Composeで統合する方法について説明します。

Docker Composeの導入

Docker Composeは、複数のDockerコンテナを一緒に実行するためのツールです。YAMLファイルにサービスの設定を記述することで、一度にすべてのサービスを起動、停止、再起動することができます。

DockerとDocker Composeのインストール

Docker Composeを使用する前に、まずDockerをインストールする必要があります。以下に、UbuntuでDockerとDocker Composeをインストールする手順を示します。

# Dockerのインストール
sudo apt-get update
sudo apt-get install apt-transport-https ca-certificates curl software-properties-common
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
sudo apt-get update
sudo apt-get install docker-ce

# Docker Composeのインストール
sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose

Docker Composeの基本的な使用方法

Docker Composeは、docker-compose.ymlという名前のYAMLファイルを使用します。このファイルには、アプリケーションのサービスとその設定が記述されています。

以下に、基本的なdocker-compose.ymlファイルの例を示します。

version: '3'
services:
  web:
    build: .
    ports:
     - "5000:5000"
  redis:
    image: "redis:alpine"

このファイルは、webとredisという2つのサービスを定義しています。webサービスは、現在のディレクトリにあるDockerfileを使用してビルドされ、ポート5000が開放されます。redisサービスは、Docker Hubからredis:alpineイメージを使用します。

次のセクションでは、FastAPIとReactのDocker Compose設定について説明します。

FastAPIとReactのDocker Compose設定

FastAPIとReactをDocker Composeで統合するためには、それぞれのサービスに対応するDockerfileと一つのdocker-compose.ymlファイルが必要です。

FastAPIのDockerfile

FastAPIのアプリケーションをDockerで実行するためには、以下のようなDockerfileが必要です。

# ベースとなるDockerイメージの指定
FROM tiangolo/uvicorn-gunicorn-fastapi:python3.8

# 作業ディレクトリの設定
WORKDIR /app

# 依存関係のコピーとインストール
COPY ./app/requirements.txt /app/requirements.txt
RUN pip install -r requirements.txt

# アプリケーションのコピー
COPY ./app /app

ReactのDockerfile

ReactのアプリケーションをDockerで実行するためには、以下のようなDockerfileが必要です。

# ベースとなるDockerイメージの指定
FROM node:14

# 作業ディレクトリの設定
WORKDIR /app

# 依存関係のコピーとインストール
COPY package*.json ./
RUN npm install

# アプリケーションのコピー
COPY . .

# アプリケーションのビルド
RUN npm run build

# ポートの公開
EXPOSE 3000

# アプリケーションの起動
CMD ["npm", "start"]

Docker Composeの設定

FastAPIとReactのサービスをDocker Composeで管理するためには、以下のようなdocker-compose.ymlファイルが必要です。

version: '3'
services:
  fastapi:
    build: ./fastapi
    ports:
      - "8000:8000"
  react:
    build: ./react
    ports:
      - "3000:3000"

この設定では、FastAPIのアプリケーションはポート8000で、Reactのアプリケーションはポート3000でそれぞれ公開されます。それぞれのbuildディレクティブは、対応するDockerfileがあるディレクトリを指しています。

以上がFastAPIとReactのDocker Compose設定の基本です。次のセクションでは、これらの設定を使用してローカル開発環境を構築する方法について説明します。

ローカル開発環境の構築

FastAPIとReactのDocker Compose設定が完了したら、次にローカル開発環境を構築します。以下にその手順を示します。

Docker Composeの起動

まず、Docker Composeを使用してサービスを起動します。以下のコマンドを実行します。

docker-compose up

このコマンドは、docker-compose.ymlファイルがあるディレクトリで実行する必要があります。このコマンドにより、FastAPIとReactのサービスが起動し、それぞれのポートで公開されます。

ブラウザでの確認

サービスが正常に起動したら、ブラウザでアプリケーションを確認します。FastAPIのアプリケーションはlocalhost:8000で、Reactのアプリケーションはlocalhost:3000でアクセスできます。

開発の進行

開発を進めるには、FastAPIとReactのコードを編集し、変更を保存します。Docker Composeは、ファイルの変更を検出し、自動的にサービスを再起動します。これにより、ブラウザでリロードするだけで最新の変更を確認することができます。

以上がFastAPIとReactのローカル開発環境の構築方法です。次のセクションでは、FastAPIとReactの連携について説明します。

FastAPIとReactの連携

FastAPIとReactを連携させることで、バックエンドとフロントエンドが一体となったフルスタックなWebアプリケーションを構築することができます。以下にその基本的な手順を示します。

FastAPIによるAPIの作成

まず、FastAPIを使用してAPIを作成します。以下に、簡単なAPIの例を示します。

from fastapi import FastAPI

app = FastAPI()

@app.get("/items/{item_id}")
async def read_item(item_id: int):
    return {"item_id": item_id}

このコードは、/items/{item_id}というエンドポイントを作成します。ここで、{item_id}はパラメータとして扱われ、リクエスト時に指定することができます。

ReactによるAPIの呼び出し

次に、Reactを使用してFastAPIのAPIを呼び出します。以下に、fetch関数を使用してAPIを呼び出す例を示します。

fetch('/items/1')
  .then(response => response.json())
  .then(data => console.log(data));

このコードは、FastAPIのAPIを呼び出し、レスポンスをJSON形式で取得し、コンソールに出力します。

CORSの設定

FastAPIとReactが異なるオリジン（異なるドメインやポート）で動作する場合、CORS（Cross-Origin Resource Sharing）の設定が必要になります。FastAPIでは、fastapi.middleware.cors.CORSMiddlewareを使用してCORSを設定することができます。

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

以上がFastAPIとReactの連携の基本です。次のセクションでは、デプロイと運用について説明します。

デプロイと運用

FastAPIとReactのアプリケーションを開発した後、次のステップはデプロイと運用です。以下にその基本的な手順を示します。

Docker Composeによるデプロイ

Docker Composeを使用してアプリケーションをデプロイすることができます。以下のコマンドを実行します。

docker-compose up -d

このコマンドは、docker-compose.ymlファイルがあるディレクトリで実行する必要があります。このコマンドにより、FastAPIとReactのサービスがバックグラウンドで起動します。

ヘルスチェック

デプロイ後、アプリケーションのヘルスチェックを行うことが重要です。FastAPIでは、/healthというエンドポイントを作成してヘルスチェックを行うことが一般的です。

@app.get("/health")
async def health_check():
    return {"status": "healthy"}

Reactでは、アプリケーションが正常にレンダリングされているかを確認します。

ロギングとモニタリング

アプリケーションの運用には、ロギングとモニタリングが不可欠です。FastAPIとReactのログを収集し、エラーやパフォーマンスの問題を追跡します。また、CPU使用率やメモリ使用率などのシステムメトリクスをモニタリングします。

以上がFastAPIとReactのデプロイと運用の基本です。これらの手順に従って、アプリケーションを安全に運用することができます。最後に、アプリケーションの改善と拡張について考えることが重要です。新しい機能の追加やパフォーマンスの最適化など、アプリケーションは常に進化し続けます。このプロセスを通じて、FastAPIとReactの組み合わせの強力さを最大限に引き出すことができます。