今回は、Reactを使用したフロントエンド(こちらの過去記事参照)とFastAPIを使用したバックエンドのプロジェクトをセットアップし、それぞれを起動する方法について説明します。
バックエンドでは、FastAPIを使ってシンプルなログインAPIを実装します。ここではトークンベースの簡単な認証を実装してみます。
1. Reactプロジェクトの作成とフロントエンドの起動
まず、Reactプロジェクトを作成し、フロントエンドを起動します。
ステップ
-
web-vitalsのインストールweb-vitalsは、ウェブパフォーマンスの指標を計測するためのツールです。以下のコマンドでインストールします。npm install web-vitals --save -
Reactプロジェクトの作成
npx create-react-appコマンドを使って新しいReactプロジェクトを作成します。【プロジェクト名】には、任意のプロジェクト名を入力します。npx create-react-app 【プロジェクト名】 -
フロントエンドの起動
npm startコマンドで、ローカルサーバでReactアプリケーションを起動します。npm start
2. FastAPIの導入とバックエンドの起動
次に、FastAPIを使ってバックエンドをセットアップします。
ステップ
-
FastAPIのインストール
FastAPIをインストールするには、Pythonのパッケージ管理ツールであるpipを使用します。
pip install fastapi -
FastAPIの起動
uvicornを使用してFastAPIアプリケーションを起動します。mainはFastAPIアプリのPythonファイル名(今回はmain.pyだからmain)、appはFastAPIのインスタンス名です。uvicorn main:app --reload
--reloadオプションを使うことで、コードの変更があった場合、自動的にサーバが再起動されます。
この手順を完了することで、ReactとFastAPIをそれぞれの環境で立ち上げることができ、フルスタックアプリケーションの基礎を構築する準備が整います。
ログイン機能はこんな感じ
3. おわりに
今回は、フロントエンドとバックエンドの接続の練習および勉強も兼ねて実装をしてみました。
・フロントのUI/UX性能の向上
・データベースでのユーザー管理機能の導入
・Webサイトの画面機能の充実
など改善点は沢山ありそうですが、ひとまずフルスタックアプリケーションの基礎構築はできたと思います。