FastAPI と Postgres を使用して GitHub Codespaces 開発環境を作成する

この記事では、 GitHub Codespaces 環境で FastAPI と Postgres を一緒に実行する方法について説明します。 Codespaces はクラウドでホストされる開発環境であり、構成可能で反復可能な開発環境を作成するために使用できます。

サンプル リポジトリは、Visual Studio CodeGitHub Codespaces 拡張機能で開くことができます。

または、サンプル リポジトリをローカルに複製することもできます。 Visual Studio Code でプロジェクトを開くと、Dev Containers を使用して実行できます。 開発コンテナーでは、 Docker Desktop がローカルにインストールされている必要があります。 Docker がインストールされていない場合は、開発環境として GitHub Codespaces を使用してプロジェクトを実行できます。

GitHub Codespaces を使用する場合は、1 か月あたり固定のコア時間が無料になります。 このチュートリアルを完了するのに必要なコア時間は 1 時間未満です。 詳細については、「 GitHub Codespaces の課金について」を参照してください。

このセットアップを開始点として使用し、Django や Flask などの他の Python Web フレームワークを実行するようにサンプルを変更することもできます。

Codespaces で開発環境を起動する

このチュートリアルでは、GitHub Codespaces を作成して操作するさまざまな方法の 1 つについて説明します。

  1. サンプル アプリ リポジトリの https://github.com/Azure-Samples/msdocs-fastapi-postgres-codespaceに移動します。

    サンプル リポジトリには、Postgres データベースを使用して FastAPI アプリを使用して環境を作成するために必要なすべての構成があります。 GitHub Codespaces 用の Python プロジェクトの設定の手順に従って、同様のプロジェクトを作成できます。

  2. [ コード]、[ コードスペース] タブの順に選択し、 + して新しいコードスペースを作成します。

    GitHub リポジトリからコードスペースを作成する方法を示すスクリーンショット。

  3. コンテナーのビルドが完了したら、ブラウザーの左下隅に Codespaces が表示されていることを確認し、サンプル リポジトリを確認します。

    codespace キー構成ファイルは 、devcontainer.jsonDockerfileおよびdocker-compose.ymlです。 詳細については、 GitHub Codespaces の概要を参照してください。

    ヒント

    Visual Studio Code でコードスペースを実行することもできます。 ブラウザーの左下隅にある [Codespaces] を選択するか(Ctrl + Shift + P / Ctrl + Command + P)、「Codespaces」と入力します。 次に、VS Code で開く を選択します。 また、コードスペースを停止してリポジトリに戻って GitHub Codespaces でもう一度開く場合は、VS Code またはブラウザーで開くオプションがあります。

    Note

    PostgreSQL の起動に失敗する (コンテナーがクラッシュする) 場合は、PostgreSQL 18 以降と既存のデータ ディレクトリ ボリュームの間の互換性が原因である可能性があります。 .devcontainer/docker-compose.yamlを編集し、postgres:latestpostgres:17に変更してから、コンテナーを再構築します。 PostgreSQL 18 によってデータ ディレクトリのレイアウトが変更され、ボリュームマウント /var/lib/postgresql/data 以前のバージョンと互換性がありません。

  4. .env.devcontainer ファイルを選択し、同じ内容の .env という名前のコピーを作成します。

    .env ファイルには、コードがデータベースへの接続に使用する環境変数が含まれています。

  5. ターミナル ウィンドウがまだ開いていない場合は、コマンド パレット (Ctrl + Shift + P / Ctrl + Command + P) を開き、「ターミナル: 新しいターミナルの作成」と入力してターミナルを選択して新しいターミナルを作成します。

  6. ターミナル ウィンドウで [ポート ] タブを選択して、PostgreSQL がポート 5432 で実行されていることを確認します。

  7. ターミナル ウィンドウで、FastAPI アプリを実行します。

    uvicorn main:app --reload
    
  8. 通知を選択 ブラウザーで開きます

    通知が表示されない場合、または不在着信した場合は、PORTS に移動し、 ポート 8000 の ローカル アドレス を見つけます。 ここに記載されている URL を使用します。

  9. プレビュー URL の末尾に /docs を追加して Swagger UI を表示します。これは API メソッドのテストに使用できます。

    API メソッドは、FastAPI がコードから作成する OpenAPI インターフェイスから生成されます。

    FastAPI Swagger UI を示すスクリーンショット。

  10. Swagger ページで、POST メソッドを実行してレストランを追加します。

    1. POST メソッドを展開します。

    2. [試してみる] を選択します。

    3. 要求本文を入力します。

      {
        "name": "Restaurant 1",
        "address": "Restaurant 1 address"
      }
      
    4. [ 実行] を選択して変更をコミットします。

データベースに接続してデータを表示する

  1. プロジェクトの GitHub Codespace に戻り、SQLTools 拡張機能を選択し、[ ローカル データベース ] を選択して接続します。

    SQLTools 拡張機能は、コンテナーの作成時にインストールされます。 SQLTools 拡張機能がアクティビティ バーに表示されない場合は、コードスペースを閉じて再度開きます。

  2. レストラン テーブルが見つかるまで [ローカル データベース] ノードを展開し、右クリックして [テーブル レコードの表示] を選択します。

    追加したレストランが表示されます。

    Visual Studio Codeで SQLTools 拡張機能を使用して Postgres ローカル データベースに接続し、テーブル レコードを表示する方法を示すスクリーンショット。

クリーンアップ

codespace の使用を停止するには、ブラウザーを閉じます。 (または、そのように開いた場合は VS Code を閉じます)。

コードスペースをもう一度使用する予定がある場合は、そのままにしておくことができます。 CPU 料金は、実行中の codespace に対してのみ発生します。 停止した codespace には、ストレージ コストのみが発生します。

コードスペースを削除する場合は、 https://github.com/codespaces に移動してコードスペースを管理します。

次のステップ