FastApi を触ってみる

2022年9月3日

参考

階層

project
├── backend
│   └── main.py # 作る
├── frontend
├── database
├── docker-compose.yml
└── dockerfile

インストールする

fastapi をインストールする。

pip install fastapi

サーバーとして動作するように uvicorn をインストールする。

pip install "uvicorn[standard]"

API サーバーを作ってみる

まずは JSON「 {"message": "Hello World"}」が返ってくるようにしてみます。

ファイルを作成する

project/backend/ の直下に main.py を作成し、下のようにコードを書く。

from fastapi import FastAPI

app = FastAPI()

@app.get("/")
async def root():
    return {"message": "Hello World"}

サーバーを起動する

project/backend/ で下のコマンドを実行する。

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

確認する

localhost:8000 にアクセスする。

API ドキュメントを確認する

http://localhost:8000/docs にアクセスる。

テンプレートを返しスタイルをあてる

せっかくなのでテンプレートも返すようにしてみます。

backend
├── main.py # 編集
├── static
│   └── styles.css # 作成
└── templates
    └── item.html # 作成

インストールする

テンプレートエンジンをインストールする。

pip install jinja2

main.py を下記の通り書き換える。

from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates

app = FastAPI()
app.mount("/static", StaticFiles(directory="static"), name="static")
templates = Jinja2Templates(directory="templates")

@app.get("/items/{id}", response_class=HTMLResponse)
async def read_item(request: Request, id: str):
    return templates.TemplateResponse("item.html", {"request": request, "id": id})

item.html を作成する。

<html>
  <head>
    <title>Item Details</title>
    <link href="{{ url_for('static', path='/styles.css') }}" rel="stylesheet" />
  </head>
  <body>
    <h1>Item ID: {{ id }}</h1>
  </body>
</html>

styles.css を作成する。

h1 {
  color: green;
}

確認する

http://localhost:8000/items/1 にアクセスする。

2022年9月3日