こんにちはー！オルターブースのはっしーです。
オルターブースアドベントカレンダー2023 2日目を担当します！

今年は森田さんスタートから始まりましたね！
期待する回答と比べながら進んでいく様子は、GitHub Copilotが技術面接を受けているようでとても面白かったですｗ

さて、先日私は久しぶりにハッカソンに参加してきました！
4名のチームで開発をおこなったのですが、GitHub Codespacesを使用したらめちゃくちゃ快適に開発できたので紹介したいと思います。

GitHub Codespacesとは

GitHub Codespacesとは、GitHubのクラウド上でホストされる開発環境です。

github.com

devcontainer.jsonという構成ファイルをリポジトリにコミットすることで、GitHub Codespacesを作成することができます。

利点としては、以下の点が挙げられます。

codespace 内のリポジトリで作業するすべてのユーザーが、同じ環境を使用することができます。したがって環境構築関連の問題でトラブルシューティングに時間を取られるといったことが少なくなります。
ローカルコンピューターの処理能力や記憶域に依存せず、十分なリソースを備えた開発環境を使用できます。

GitHub Codespacesは、すべての個人 GitHub.com アカウントで使用することができ、月単位での無料枠があるため簡単に始めることができます。

GitHub Codespaces の請求について - GitHub Docs

ハッカソンで使用した経緯

ハッカソンでは、チームメンバーのPCのOSやスペック、普段使用しているプログラミング言語など異なるため、環境を合わせることに苦労します。

時間が限られており、動くものを作らなければいけないハッカソンでは、こういった開発環境の構築に時間をとられてしまうと大事な開発にあてる時間が足りなくなってしまいます。

今回のハッカソンでも、チームメンバーのPC、OSはMacとWindowsが混在しており、普段使用しているプログラミング言語もバラバラでした。

したがって、開発環境を揃えることに時間がかかることが予想でき、環境の不一致による不要なトラブルを避けたかったのでGitHub Codespacesを使用することにしました。

FastAPIを用いたアプリケーション用のCodespacesを作成する

では早速GitHub Codespacesを使用していきましょう！今回はFastAPIを使用したアプリケーションを開発していきます。（FastAPIはハッカソンで初めて触りました...）

fastapi.tiangolo.com

GitHub リポジトリの作成

Codespaceを作成する

リポジトリの「Code => Codespaces => Create codespace on main」を選択し、
CodeSpaceを作成します。

しばらく待つと、Codespaceが作成され、VSCodeの画面が表示されます。

CodeSpaceの構成ファイルを作成する

CodeSpaceの構成ファイルを作成していきましょう！作成にあたって、手書きする必要はありません。
VSCodeのコマンドパレットから作成することができます。
コマンドパレットで> Codespacesと入力し、「Add Dev Container Configration Files..」を選択します。

「Create a new configration...」を選択します。

「Show All Definitions...」を選択します。

「Python 3」を検索し、選択します。

Pythonのバージョンを選択します。

追加機能が必要な場合は選択します。今回は必要ないので「OK」ボタンを押下します。

すると以下のdevcontainer.jsonが作成されます。

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/python
{
    "name": "Python 3",
    // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
    "image": "mcr.microsoft.com/devcontainers/python:1-3.12-bullseye"

    // Features to add to the dev container. More info: https://containers.dev/features.
    // "features": {},

    // Use 'forwardPorts' to make a list of ports inside the container available locally.
    // "forwardPorts": [],

    // Use 'postCreateCommand' to run commands after the container is created.
    // "postCreateCommand": "pip3 install --user -r requirements.txt",

    // Configure tool-specific properties.
    // "customizations": {},

    // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
    // "remoteUser": "root"
}

Codespaceをリビルドするようにポップアップが表示されるのでリビルドしましょう。
（コマンドパレットで> Codespaces: Rebuild Containerを検索し、選択してもリビルドできます）

FastAPIに必要なものを準備していきます。プロジェクトルート配下に以下の内容でrequirements.txtファイルを作成します。

fastapi
uvicorn[standard]

作成出来たら、devcontainer.jsonの以下コメントアウトを解除します。（解除した際、カンマを調整する必要があります。）
"postCreateCommand": "pip3 install --user -r requirements.txt"

devcontainer.jsonは以下のようになります。

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/python
{
    "name": "Python 3",
    // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
    "image": "mcr.microsoft.com/devcontainers/python:1-3.12-bullseye",

    // Features to add to the dev container. More info: https://containers.dev/features.
    // "features": {},

    // Use 'forwardPorts' to make a list of ports inside the container available locally.
    // "forwardPorts": [],

    // Use 'postCreateCommand' to run commands after the container is created.
    "postCreateCommand": "pip3 install --user -r requirements.txt"

    // Configure tool-specific properties.
    // "customizations": {},

    // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
    // "remoteUser": "root"
}

コマンドパレットで> Codespaces: Rebuild Containerを検索、選択しリビルドします。

リビルドが完了したら、プロジェクトルート配下にmain.pyファイルを作成します。

from fastapi import FastAPI

app = FastAPI()


@app.get("/")
def read_root():
    return {"Hello": "World"}


@app.get("/items/{item_id}")
def read_item(item_id: int, q: str = None):
    return {"item_id": item_id, "q": q}

作成できたら、ターミナルで以下のコマンドを入力します。
uvicorn main:app --reload

ポップアップが表示されるので「ブラウザーを開く」を選択します。

ブラウザからアプリケーションに接続できていることが確認できます。

変更をコミット・プッシュする

ここまでの変更をmainブランチにプッシュしましょう。 VSCode左のソース管理タブから操作できます（Gitの操作については割愛します）

プッシュすると、リポジトリに反映されていることが確認できます。

以上でCodespaceを作成・設定することができました。

チームメンバーがリポジトリからCodespaceを起動し、開発を始めることができます。

まとめ

GitHub Codespacesが使用できるようになってから初めてハッカソンで使用しました。開発環境に関するトラブルはほとんど発生せず、スムーズに開発できました。

今後、ハッカソンはもちろん、検証やハンズオンなどにも使っていこうと思います。

最後まで読んでいただきありがとうございました。

おまけ：開発中のアプリを共有する

開発中のアプリケーションに対し、チームメンバーからフィードバックを得たい場合があります。また、開発中のAPIに対してリモートのクライアントアプリから接続したい場合もあります。そのようなとき変更をリモートリポジトリにプッシュし、デバックしてもらうのではなくポートを公開することで共有・アクセスすることできます。
詳しくは以下のドキュメントを参考にしてください。

docs.github.com

おまけ：環境変数を設定する

DBへの接続文字列、APIキーなどの環境変数の設定は以下のドキュメントを参考にしてください。