2.APIの深化の概念 - サービス構築のためのコア概念

この講義では、APIの応用概念を学び、実際のサービスを構築する実習を行います。理論と実習を並行して進め、APIを実際のプロジェクトでどのように活用するかを習得できるように構成しました。APIの基本概念についてまだご存じない方は、API基本概念に関する記事を確認した上で進めてください。

APIの高度な概念 – サービス構築のための核心概念

1. APIの応用概念 – サービス構築のための核心概念

1-1. APIの種類と実践的な活用方法

APIは目的と機能によって様々な種類があります。
それぞれのAPIがどのように使用されるかを理解し、実戦プロジェクトで適切なAPIを選択することが重要です。

1. REST API (Representational State Transfer)

最も広く使用されているAPI構造です。
HTTPリクエストを使用してクライアントとサーバーがデータをやり取りします。
特徴：軽量、標準化、多様なクライアント対応
例:
- GET /users/1 → 特定ユーザーの情報を取得する
- POST /reviews → 新しいレビューを追加する

2. GraphQL API

クライアントは必要なデータのみをリクエストできます。
特徴: RESTよりも柔軟で、不要なデータ呼び出しを防止できます。
例:

{
  user(id: "1") {
    name
    email
    reviews {
      title
      rating
    }
  }
}

3. WebSocket API

リアルタイムデータ通信が必要な場合に適しています。（例：チャット、リアルタイム通知）
特徴: 持続的な接続を維持し、高速な応答を提供します。
例: リアルタイムレビュー更新機能の実装

4. Open API (公開API)

誰でも利用可能な形で提供されるAPIです。
例:
- TMDB API（映画＆ドラマデータ提供）
- OpenWeather API（天気情報提供）
- ChatGPT API（AIテキスト生成API）
1-2. API認証(Authentication)とセキュリティ(Security)
APIではセキュリティが重要です。
許可されていないユーザーがデータを操作したり取得したりできないように保護する必要があります。
1. API認証方式
API Key（簡易方式）
- ユーザーがAPIキーをリクエストする際、APIリクエストヘッダーに含める必要があります。
- 例: Authorization: Bearer YOUR_API_KEY
OAuth 2.0 (SNSログイン、権限管理)
- Google、Facebookログインなどで使用されます。
- アクセストークンを発行して認証する方式です。
JWT (JSON Web Token) – セキュリティ強化
- クライアントがログインするとサーバーがJWTを発行し、
- 以降の要求時にJWTを含めて認証します。
2. APIセキュリティ強化方法
HTTPSの使用（SSL/TLS暗号化）
APIリクエスト制限（レート制限）
CORS設定（クロスオリジンリソース共有）

2. API実習 – 実際のサービス構築

実践プロジェクト：「悲しいドラマ推薦APIの作成」

2-1. プロジェクト目標とサービスフロー

プロジェクト目標

ユーザーが悲しいドラマのレビューを残すと、APIがデータを保存
APIがAI分析を通じて悲しいドラマを推薦
APIを活用してウェブサイトで推薦結果を表示

サービスフロー

ユーザーがレビューを投稿 → APIがDBに保存
APIがユーザーの感情分析（AI活用）
APIがDBから類似感情のドラマを推薦
APIが推薦されたドラマをウェブサイトに返却

3. 実習1: API設計およびデータモデリング

3-1. API設計（エンドポイント定義）

HTTPメソッド	エンドポイント	説明
`POST`	`/reviews`	ユーザーレビューの追加
`GET`	`/reviews/{drama}`	特定のドラマのレビューを取得
`GET`	`/recommend/{user}`	ユーザーに合わせた悲しいドラマの推薦

3-2. データモデル設計

DBテーブル構造（PostgreSQL基準）

ID	ユーザー	ドラマタイトル	感性スコア (0～1)	レビュー内容
1	content	私の叔父さん	0.9	感動的なドラマでした T_T
2	flow	ミスター・サンシャイン	0.85	涙なしでは見られません…

4. 実習 2: FastAPIを活用したAPI構築

4-1. FastAPIのインストールと基本設定

bash 例コード

pip install fastapi uvicorn psycopg2

4-2. API基本コード作成

python 例コード

from fastapi import FastAPI
from pydantic import BaseModel

app = FastAPI()

class Review(BaseModel):
    user: str
    drama: str
    rating: int
    review: str

@app.post("/reviews")
def add_review(review: Review):
    return {"message": f"{review.drama}에 대한 리뷰가 저장되었습니다!"}

4-3. 実行とテスト

bash サンプルコード

uvicorn main:app --reload

API呼び出し例（POSTリクエスト）

HTTPサンプルコード

POST /reviews
{
    "user": "content",
    "drama": "나의 아저씨",
    "rating": 5,
    "review": "정말 감동적이었어요!"
}

5. 実習 3: AI感情分析 & 推奨機能の追加

5-1. 感情分析API連携

Pythonサンプルコード


from transformers import pipeline

emotion_model = pipeline("text-classification", model="j-hartmann/emotion-english-distilroberta-base")

def analyze_emotion(text):
    result = emotion_model(text)
    return result[0]["score"] if result[0]["label"] == "sadness" else 0.0

5-2. AI推薦システムの実装

Pythonサンプルコード

@app.get("/recommend/{user}")
def recommend_drama(user: str):
    # 슬픈 감성 점수가 높은 드라마 추천
    return {"recommended": ["나의 아저씨", "미스터 션샤인"]}

APIリクエスト＆レスポンス
例httpサンプルコード

GET /recommend/content
{
    "recommended": ["나의 아저씨", "미스터 션샤인"]
}

6. APIのデプロイとウェブサイト連携 – 実践的な適用

ここで、私たちが作成したFastAPIベースのAPIを実際のサーバーにデプロイし、Reactウェブサイトから呼び出す方法を学びます。
デプロイ後、APIが正常に動作するかテストし、パフォーマンスを最適化するプロセスまで進めます。

6-1. FastAPIのデプロイ（AWS、Vercel、Herokuを活用）

FastAPIで作成したAPIをデプロイし、誰でも利用できるようにウェブサーバー上で実行する必要があります。
デプロイ可能な代表的な方法として、AWS、Vercel、Herokuなどがあります。

FastAPIデプロイに必要な基本概念

サーバー実行方式: FastAPIはローカル開発環境では uvicornを使用しますが、
デプロイ時には gunicornなどのWSGIサーバーを使用する必要があります。
クラウドサーバーの選択: AWS、Vercel、Herokuなどのプラットフォームを選択する必要があります。
ドメイン接続: デプロイされたAPIが http://localhost:8000ではなく、
https://myapi.com のようなドメインで動作するように設定します。

方法 1: AWS EC2 へのデプロイ

AWS EC2（Elastic Compute Cloud）は、クラウド上で仮想サーバーを提供し、APIをデプロイできるようにします。

1. EC2インスタンスの作成

AWSコンソールでEC2インスタンスを作成します。
Ubuntu 20.04 または Amazon Linux を選択
最小仕様: t2.micro (無料)

2. EC2へのFastAPIデプロイ

EC2インスタンスにSSHで接続以下のコードを実行

ssh -i your-key.pem ubuntu@your-ec2-ip

Python およびパッケージをインストール

sudo apt update && sudo apt upgrade -y
sudo apt install python3-pip -y
pip3 install fastapi uvicorn

APIの実行

uvicorn main:app --host 0.0.0.0 --port 8000

ファイアウォール設定

AWS セキュリティグループでポート 8000 を開く必要があります。
http://your-ec2-ip:8000/docs API が動作することを確認します。

3. Nginx & Gunicorn によるデプロイの最適化

3-1. Gunicornのインストールと実行

pip install gunicorn
gunicorn -w 4 -k uvicorn.workers.UvicornWorker main:app

3-2. Nginx設定（リバースプロキシ）

sudo apt install nginx -y
sudo nano /etc/nginx/sites-available/api

nginx복사편집server {
    listen 80;
    server_name your-api.com;
    
    location / {
        proxy_pass http://127.0.0.1:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

3-3. Nginx適用後のサービス開始

sudo ln -s /etc/nginx/sites-available/api /etc/nginx/sites-enabled
sudo systemctl restart nginx

3-4. ドメイン接続とSSL証明書の適用

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d your-api.com

これでhttps://your-api.comでFastAPIが利用可能になりました！

方法 2: Vercel でのデプロイ

Vercelは無料でFastAPIアプリケーションをデプロイできるサービスです。

1. Vercelアカウント作成後、CLIをインストール

npm install -g vercel
vercel login

2. FastAPIプロジェクトをVercelに接続しデプロイ

vercel

これで https://your-api.vercel.appでAPIが利用可能になります。

方法 3: Heroku へのデプロイ

Herokuは簡単にAPIをデプロイできるクラウドサービスです。

1. Heroku CLIのインストール

curl https://cli-assets.heroku.com/install.sh | sh
heroku login

2. FastAPIプロジェクトをHerokuにデプロイ

heroku create your-api-name
git push heroku main

これでhttps://your-api.herokuapp.com でAPIを利用できます。

6-2. ReactウェブサイトからAPIを呼び出して結果を表示

FastAPIでデプロイしたAPIをReactウェブサイトから呼び出してデータを取得する方法を学びましょう。

1. Reactプロジェクトの設定

npx create-react-app my-app
cd my-app
npm start

2. ReactでAPIを呼び出す（useEffect + fetchを使用）

javascript

import { useEffect, useState } from "react";

function App() {
    const [data, setData] = useState([]);

    useEffect(() => {
        fetch("https://your-api.com/recommend/content")
            .then(response => response.json())
            .then(result => setData(result.recommended));
    }, []);

    return (
        <div>
            <h1>추천 드라마</h1>
            <ul>
                {data.map((drama, index) => (
                    <li key={index}>{drama}</li>
                ))}
            </ul>
        </div>
    );
}

export default App;

3. CORS設定（FastAPIでReactリクエストを許可する）

FastAPIはデフォルトでセキュリティ上の理由からCORSリクエストをブロックします。

ReactでAPIを正常に呼び出すには、FastAPIでCORS設定を追加する必要があります。

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # 특정 도메인만 허용 가능
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

これでReactからAPIを正常に呼び出せます。

6-3. テストと最適化の実施

APIが正常にデプロイされたことを確認し、パフォーマンスを最適化するプロセスです。

1. APIテストツールの活用

Postman: APIリクエストを直接送信して応答を確認
cURL: ターミナルでAPI呼び出しテスト

curl -X GET "https://your-api.com/recommend/content

FastAPI内蔵の/docs活用:
- https://your-api.com/docs APIの自動ドキュメント確認

2. APIレスポンス速度の最適化

Redisキャッシュの適用: 頻繁にリクエストされるデータをRedisに保存
データベースのインデックス化: SQLにインデックスを追加し検索速度を向上
Gunicorn + Nginxの組み合わせ: 高性能ウェブサーバーの設定

3. ログ記録とモニタリングの追加

FastAPIで loggingを使用してAPI呼び出しログを保存
AWS CloudWatch、Grafanaなどの監視ツールとの連携

7. 最終プロジェクトのまとめ

APIを活用してユーザーレビューをDBに保存
AIを活用して感情分析後、悲しいドラマを推薦
ウェブサイトでAPIを呼び出し、推薦結果を表示

8. 実践学習で作成できるプロジェクト応用アイデア

AIベースのニュース要約API
リアルタイムチャットAPI（WebSocket活用）
SNSログインAPI（OAuth 2.0活用）

主要技術概念の整理（Nginx、Gunicorn、Vercel、Heroku、React、CORS、FastAPI）

用語	説明	主な役割	活用例
Nginx	Webサーバーおよびリバースプロキシサーバー	静的ファイル提供、ロードバランシング、セキュリティ強化	ウェブサイトのトラフィック分散、APIサーバーの前段でのリクエスト管理
Gunicorn	Python WSGI サーバー	FastAPI、Django、Flaskなどのアプリケーションを実行	FastAPIデプロイ時、 `gunicorn -w 4 -k uvicorn.workers.UvicornWorker main:app` 使用
Vercel	クラウドデプロイプラットフォーム	静的サイトおよびバックエンドサーバーのデプロイ	React、Next.js、FastAPIなどの無料デプロイサポート
Heroku	PaaS（Platform as a Service）	コードをアップロードするだけで自動的にサーバーをデプロイ	`git push heroku main`FastAPIのデプロイ
React	フロントエンドライブラリ	UIコンポーネントベースのWebアプリ開発	`useState`, `useEffect`を使用したデータ管理
CORS	セキュリティポリシー（クロスオリジンリクエスト防止）	外部ドメインからの API リクエストを許可	FastAPI で `allow_origins=["*"]` 設定が必要
FastAPI	PythonベースのWebフレームワーク	API開発を簡単かつ迅速に実装	`@app.get("/")` APIルーティングが可能

2.APIの深化の概念 – サービス構築のためのコア概念

1. APIの応用概念 – サービス構築のための核心概念

1-1. APIの種類と実践的な活用方法

2. API実習 – 実際のサービス構築

実践プロジェクト：「悲しいドラマ推薦APIの作成」

2-1. プロジェクト目標とサービスフロー

3. 実習1: API設計およびデータモデリング

3-1. API設計（エンドポイント定義）

3-2. データモデル設計

4. 実習 2: FastAPIを活用したAPI構築

4-1. FastAPIのインストールと基本設定

4-2. API基本コード作成

4-3. 実行とテスト

5. 実習 3: AI感情分析 & 推奨機能の追加

5-1. 感情分析API連携

5-2. AI推薦システムの実装

6. APIのデプロイとウェブサイト連携 – 実践的な適用

6-1. FastAPIのデプロイ（AWS、Vercel、Herokuを活用）

FastAPIデプロイに必要な基本概念

方法 1: AWS EC2 へのデプロイ

1. EC2インスタンスの作成

2. EC2へのFastAPIデプロイ

3. Nginx & Gunicorn によるデプロイの最適化

方法 2: Vercel でのデプロイ

方法 3: Heroku へのデプロイ

6-2. ReactウェブサイトからAPIを呼び出して結果を表示

1. Reactプロジェクトの設定

2. ReactでAPIを呼び出す（useEffect + fetchを使用）

3. CORS設定（FastAPIでReactリクエストを許可する）

6-3. テストと最適化の実施

7. 最終プロジェクトのまとめ

8. 実践学習で作成できるプロジェクト応用アイデア

主要技術概念の整理（Nginx、Gunicorn、Vercel、Heroku、React、CORS、FastAPI）

コメントするコメントをキャンセル

1. APIの応用概念 – サービス構築のための核心概念

1-1. APIの種類と実践的な活用方法

2. API実習 – 実際のサービス構築

実践プロジェクト：「悲しいドラマ推薦APIの作成」

2-1. プロジェクト目標とサービスフロー

3. 実習1: API設計およびデータモデリング

3-1. API設計（エンドポイント定義）

3-2. データモデル設計

4. 実習 2: FastAPIを活用したAPI構築

4-1. FastAPIのインストールと基本設定

4-2. API基本コード作成

4-3. 実行とテスト

5. 実習 3: AI感情分析 & 推奨機能の追加

5-1. 感情分析API連携

5-2. AI推薦システムの実装

6. APIのデプロイとウェブサイト連携 – 実践的な適用

6-1. FastAPIのデプロイ（AWS、Vercel、Herokuを活用）

FastAPIデプロイに必要な基本概念

方法 1: AWS EC2 へのデプロイ

1. EC2インスタンスの作成

2. EC2へのFastAPIデプロイ

3. Nginx & Gunicorn によるデプロイの最適化

方法 2: Vercel でのデプロイ

方法 3: Heroku へのデプロイ

6-2. ReactウェブサイトからAPIを呼び出して結果を表示

1. Reactプロジェクトの設定

2. ReactでAPIを呼び出す（useEffect + fetchを使用）

3. CORS設定（FastAPIでReactリクエストを許可する）

6-3. テストと最適化の実施

7. 最終プロジェクトのまとめ

8. 実践学習で作成できるプロジェクト応用アイデア

主要技術概念の整理（Nginx、Gunicorn、Vercel、Heroku、React、CORS、FastAPI）

관련 콘텐츠:

コメントする コメントをキャンセル

コメントするコメントをキャンセル