Python（FastAPI）とVue.js3（Composition API、Vite、TailwindCSS）でWebアプリの開発③：FastAPIでバックエンド作成

2022年10月24日プログラミング

1 はじめに
2 実装

はじめに

以前は、『Flask』を使っていまふたが、
フロントエンドに『Typescript』を使い始めて、
バックエンドでも『型』が使えた方がしっくりくるな～と、
『FastAPI』を使い始めまふた。

今回は、バックエンドの『FastAPI』の実装方法でふ。

コード全般は、下記になりまふ。

https://github.com/supplepentan/penta_sample_fastapi_vue

実装

構成

フォルダ構成

FastAPIの『main.py』コード全体

import os
import shutil
from io import BytesIO

import uvicorn
from fastapi import FastAPI, UploadFile
from fastapi.params import File
from fastapi.responses import FileResponse
from fastapi.staticfiles import StaticFiles
from PIL import Image
from starlette.middleware.cors import CORSMiddleware
from starlette.requests import Request
from starlette.templating import Jinja2Templates

PATH_UPLOAD_FOLDER = "./upload"
PATH_OUTPUT_FOLDER = "./output"
PATH_INPUT_IMAGE = os.path.join(PATH_UPLOAD_FOLDER, "input.png")
PATH_OUTPUT_IMAGE = os.path.join(PATH_OUTPUT_FOLDER, "output.png")


app = FastAPI(title="さぷりぺんたんのさんぷる", description="画像をグレイスケールにするよ", version="1.0")

import mimetypes

mimetypes.init()
mimetypes.add_type("application/javascript", ".js")

#: Configure CORS
origins = ["http://localhost:8080", "http://127.0.0.1:5173"]

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)
app.mount("/static", StaticFiles(directory="./templates/static"), name="static")
templates = Jinja2Templates(directory="./templates/")


@app.get("/")
def index(request: Request):
    if os.path.exists(PATH_UPLOAD_FOLDER):
        shutil.rmtree(PATH_UPLOAD_FOLDER)
    os.makedirs(PATH_UPLOAD_FOLDER)
    if os.path.exists(PATH_OUTPUT_FOLDER):
        shutil.rmtree(PATH_OUTPUT_FOLDER)
    os.makedirs(PATH_OUTPUT_FOLDER)
    return templates.TemplateResponse("index.html", {"request": request})


@app.post("/upload")
async def index(file: UploadFile = File(...)):
    contents = await file.read()
    input_image = Image.open(BytesIO(contents)).convert("RGB")
    input_image.save(PATH_INPUT_IMAGE)
    output_image = input_image.convert("L")
    output_image.save(PATH_OUTPUT_IMAGE)
    output_finlename = os.path.basename(PATH_OUTPUT_IMAGE)
    response = FileResponse(path=PATH_OUTPUT_IMAGE, filename=output_finlename)
    return response


if __name__ == "__main__":
    uvicorn.main(app=app)

import os

import shutil

from io import BytesIO

import uvicorn

from fastapi import FastAPI, UploadFile

from fastapi.params import File

from fastapi.responses import FileResponse

from fastapi.staticfiles import StaticFiles

from PIL import Image

from starlette.middleware.cors import CORSMiddleware

from starlette.requests import Request

from starlette.templating import Jinja2Templates

PATH_UPLOAD_FOLDER = "./upload"

PATH_OUTPUT_FOLDER = "./output"

PATH_INPUT_IMAGE = os.path.join(PATH_UPLOAD_FOLDER, "input.png")

PATH_OUTPUT_IMAGE = os.path.join(PATH_OUTPUT_FOLDER, "output.png")

app = FastAPI(title="さぷりぺんたんのさんぷる", description="画像をグレイスケールにするよ", version="1.0")

import mimetypes

mimetypes.init()

mimetypes.add_type("application/javascript", ".js")

#: Configure CORS

origins = ["http://localhost:8080", "http://127.0.0.1:5173"]

app.add_middleware(

CORSMiddleware,

allow_origins=["*"],

allow_credentials=True,

allow_methods=["*"],

allow_headers=["*"],

)

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

templates = Jinja2Templates(directory="./templates/")

@app.get("/")

def index(request: Request):

if os.path.exists(PATH_UPLOAD_FOLDER):

shutil.rmtree(PATH_UPLOAD_FOLDER)

os.makedirs(PATH_UPLOAD_FOLDER)

if os.path.exists(PATH_OUTPUT_FOLDER):

shutil.rmtree(PATH_OUTPUT_FOLDER)

os.makedirs(PATH_OUTPUT_FOLDER)

return templates.TemplateResponse("index.html", {"request": request})

@app.post("/upload")

async def index(file: UploadFile = File(...)):

contents = await file.read()

input_image = Image.open(BytesIO(contents)).convert("RGB")

input_image.save(PATH_INPUT_IMAGE)

output_image = input_image.convert("L")

output_image.save(PATH_OUTPUT_IMAGE)

output_finlename = os.path.basename(PATH_OUTPUT_IMAGE)

response = FileResponse(path=PATH_OUTPUT_IMAGE, filename=output_finlename)

return response

if __name__ == "__main__":

uvicorn.main(app=app)

必要モジュールのインストール

『poetry』を使って、モジュールをインストールしまふ。

poetry add fastapi "uvicorn[standard]" Jinja2 Pillow python-multipart

1	poetry add fastapi "uvicorn[standard]" Jinja2 Pillow python-multipart

コード説明

モジュールのインポート

import os
import shutil
from io import BytesIO

import uvicorn
from fastapi import FastAPI, UploadFile
from fastapi.params import File
from fastapi.responses import FileResponse
from fastapi.staticfiles import StaticFiles
from PIL import Image
from starlette.middleware.cors import CORSMiddleware
from starlette.requests import Request
from starlette.templating import Jinja2Templates

import os

import shutil

from io import BytesIO

import uvicorn

from fastapi import FastAPI, UploadFile

from fastapi.params import File

from fastapi.responses import FileResponse

from fastapi.staticfiles import StaticFiles

from PIL import Image

from starlette.middleware.cors import CORSMiddleware

from starlette.requests import Request

from starlette.templating import Jinja2Templates

Javascriptを読み込ませる

下記の表記で、自作javascriptを読み込ませることができまふ。

import mimetypes

mimetypes.init()
mimetypes.add_type("application/javascript", ".js")

import mimetypes

mimetypes.init()

mimetypes.add_type("application/javascript", ".js")

CORS対策

開発環境では、フロントエンド（Vue.js）とバックエンド（FlaskやFastAPI）を同時にサーバーを立てることになりまふ。
その場合、フロントエンドからバックエンドにAPIをたたくときに、
なにも対策をしなければ、CORSエラーが出てしまいまふ。
なので、下記のCORS対策をしまふ。
先のフロントエンドのViteが、
『http://127.0.0.1:5173』を使いまふので、
originsに加えまふ。
『http://localhost:8080』は、FastAPIの仮想サーバーのアドレスでふ。

origins = ["http://localhost:8080", "http://127.0.0.1:5173"]

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)
app.mount("/static", StaticFiles(directory="./templates/static"), name="static")
templates = Jinja2Templates(directory="./templates/")

origins = ["http://localhost:8080", "http://127.0.0.1:5173"]

app.add_middleware(

CORSMiddleware,

allow_origins=["*"],

allow_credentials=True,

allow_methods=["*"],

allow_headers=["*"],

)

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

templates = Jinja2Templates(directory="./templates/")

TemplateとStaticの設定

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

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

ホーム画面の設定

ホーム画面でふ。

@app.get("/")
def index(request: Request):
    if os.path.exists(PATH_UPLOAD_FOLDER):
        shutil.rmtree(PATH_UPLOAD_FOLDER)
    os.makedirs(PATH_UPLOAD_FOLDER)
    if os.path.exists(PATH_OUTPUT_FOLDER):
        shutil.rmtree(PATH_OUTPUT_FOLDER)
    os.makedirs(PATH_OUTPUT_FOLDER)
    return templates.TemplateResponse("index.html", {"request": request})

@app.get("/")

def index(request: Request):

if os.path.exists(PATH_UPLOAD_FOLDER):

shutil.rmtree(PATH_UPLOAD_FOLDER)

os.makedirs(PATH_UPLOAD_FOLDER)

if os.path.exists(PATH_OUTPUT_FOLDER):

shutil.rmtree(PATH_OUTPUT_FOLDER)

os.makedirs(PATH_OUTPUT_FOLDER)

return templates.TemplateResponse("index.html", {"request": request})

アップロードページの設定

今回は、『Pillow』でアップロードされた画像をグレースケールにしてリターンするようにしてありまふ。
画像系AIで遊ぶときは、『Pillow』で画像を読み込み、
これをAIコードに渡し、処理後の画像をフロントへリターンする作りにしておりまふ。

@app.post("/upload")
async def index(file: UploadFile = File(...)):
    contents = await file.read()
    input_image = Image.open(BytesIO(contents)).convert("RGB")
    input_image.save(PATH_INPUT_IMAGE)
    output_image = input_image.convert("L")
    output_image.save(PATH_OUTPUT_IMAGE)
    output_finlename = os.path.basename(PATH_OUTPUT_IMAGE)
    response = FileResponse(path=PATH_OUTPUT_IMAGE, filename=output_finlename)
    return response

@app.post("/upload")

async def index(file: UploadFile = File(...)):

contents = await file.read()

input_image = Image.open(BytesIO(contents)).convert("RGB")

input_image.save(PATH_INPUT_IMAGE)

output_image = input_image.convert("L")

output_image.save(PATH_OUTPUT_IMAGE)

output_finlename = os.path.basename(PATH_OUTPUT_IMAGE)

response = FileResponse(path=PATH_OUTPUT_IMAGE, filename=output_finlename)

return response

Uvicornサーバー起動のおまじない

if __name__ == "__main__":
    uvicorn.main(app=app)

1 2	if __name__ == "__main__": uvicorn.main(app=app)

仮想サーバー起動

poetry run uvicorn main:app --reload

1	poetry run uvicorn main:app --reload

frontでビルドしたファイルを組み込む

frontで作成したビルドファイルを下記のフォルダに配置します。

index.htmlのcssとjsを読み込む部分をマスタッシュ構文に書き換えます。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue + TS</title>
    <script type="module" crossorigin src="{{ url_for('static', path='/index.c9a0e7a1.js') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static', path='/index.66df8b22.css') }}">
  </head>
  <body>
    <div id="app"></div>
    
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

Python（FastAPI）とVue.js3（Composition API、Vite、TailwindCSS）でWebアプリの開発①：開発環境の設定

Python（FastAPI）とVue.js3（Composition API、Vite、TailwindCSS）でWebアプリの開発②：フロントエンドのVue.jsのコーディング

この記事を書いた人

さぷりぺんたん

化学系で博士号を取得したが、あるとき、これからの時代はプログラミング！、と目覚める。 pythonを用いてデータ解析や機械学習に没頭。最近は、Pytorchで作ったONNXモデルを、Nuxt3にのせたWebサービスの開発、 ChatGPT や Stable Diffusion に没頭中☆('ω')☆

SNSでフォローする

Python（FastAPI）とVue.js3（Composition API、Vite、TailwindCSS）でWebアプリの開発③：FastAPIでバックエンド作成

はじめに

実装

構成

フォルダ構成

FastAPIの『main.py』コード全体

必要モジュールのインストール

コード説明

モジュールのインポート

Javascriptを読み込ませる

CORS対策

TemplateとStaticの設定

ホーム画面の設定

アップロードページの設定

Uvicornサーバー起動のおまじない

仮想サーバー起動

frontでビルドしたファイルを組み込む

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

AnimateDiff：Windows用コードを作成しました

DA-CLIP(Degradation-aware CLIP)：Windows用コードを作成しました

DiffBIR：超解像や劣化画像を修復

ChatGPT：Code Interpreter を使って、超解像（ ESRGAN ）

人気の記事

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