WindowsでAIプログラミング

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

はじめに

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

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

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

https://github.com/supplepentan/penta_sample_fastapi_vue

実装

構成

フォルダ構成

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

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

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

コード説明

モジュールのインポート

Javascriptを読み込ませる

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

CORS対策

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

TemplateとStaticの設定

ホーム画面の設定

ホーム画面でふ。

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

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

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

仮想サーバー起動

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

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

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

関連記事

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA