Nuxt.jsとFastAPIを連携してみた

動作確認環境

事前準備

以下の記事の手順でNode.jsとPythonとFastAPIとuvicornをインストールしました。

【メモ】PythonとFastAPIとuvicornをインストールしてみた

Windows10 x64のPCにPython、FastAPI、uvicornをインストールしてみた際のメモです。

work-note32.com

2022.09.23

Node.jsをインストールする方法

先日、Node.jsのインストールを行いましたので備忘録として残しておこうと思います。なお、Windowsを使っている方を想定しています。

work-note32.com

2020.06.27

FastAPI側の準備

1.以下のような中身のdemo.pyファイルを作成します。

from fastapi import FastAPI

api = FastAPI()

@api.get("/v1/connection")
def connection():
    results = {"result": "success"}
    return results

2.コマンドプロンプトを起動し、カレントディレクトリをdemo.pyを配置したフォルダーへ移動し下記コマンドを実行します。

uvicorn demo:api --reload

3.ブラウザに下記URIを打ち込みます。

http://127.0.0.1:8000/v1/connection

4.ブラウザに下記のように表示されればOKです。

{"result":"success"}

Nuxt.js側の準備

FastAPI側の準備項の2で起動したAPIサーバーを起動したままにしておく必要があります。

1.コマンドプロンプトを起動し、Nuxt.jsプロジェクトを配置したい場所へカレントディレクトリを移動し下記コマンドを実行します。

npx create-nuxt-app {プロジェクト名}

以下が例ですが、オプションは適宜設定してください。

2.Nuxt.jsのプロジェクトが作成されるので nuxt.config.js を開き、axios、proxyの部分を以下のように修正しました。

  axios: {
    proxy: true,    
  },

  proxy: {
    '/api/': {
      target: 'http://127.0.0.1:8000',
      pathRewrite: {
        '^/api/': '/v1/',
      },
    },
  },

3.コマンドプロンプトのカレントディレクトリをプロジェクトのルートディレクトリに移動し下記コマンドを実行してNuxt.jsプロジェクトを起動します。

npm run dev

4.ブラウザに下記URIを打ち込みます。
※ここからの手順を実施するにあたり、FastAPI側の準備項の2で起動したAPIサーバーを起動したままにしておく必要があります。

http://127.0.0.1:3000/api/connection

5.ブラウザに下記のように表示（http://127.0.0.1:8000/v1/connection の実行結果と同じ）されればOKです。

{"result":"success"}