フロントとバックの繋ぎこみ：CodeSpaceでのCORS設定

４日目。フロントとバックをつないで動かすぞ、という日。
これが、、、大変だった。

ローカルで二つアプリを実行して通信させるだけ、なのですが。
ですが、ネットワーク知識があまりないので、都度ChatGPTに聞きながら、現象を理解しつつエラーを解消していく、というのがなかなか手間でした。

そして、今回、開発環境としてGitHub Codespaceを利用しました。
これがなかなか罠だった。半クラウド環境というか、ローカルとは違って開発環境とリモートで繋がったWeb画面IDEで作業しているので、ネットワーク環境が複雑なんですな。。。

上手くいった手順は以下です。

axios.postにバックエンドアプリのURLを設定する
- CodespaceのVSCodeがポート転送してくれた先のURL
- 公開範囲をPublicにする

cd frontend
npm run dev -- --host

uv run uvicorn backend.main:app --host 0.0.0.0 --port 8000 --reload

CodespaceのVSCodeでポートをPublicにするのは下記。
codespace でのポートの転送 - GitHub Docs
これを見つけるまでなんもわからん、、、の森をぐるぐるまわってしまった。

ChatGPTもこういうのは苦手ですな、新しくてかつ事例が少ないと、事態の正確な把握ができない。
でもWeb検索で↓を出してきてくれたので、だいぶ助かった。
angular - GitHub codespaces CORS issues - Stack Overflow

設定できたところでいよいよ、アプリとしては完成。
フロント画面で入力→生成ボタンを押すとバックエンドでOpenAI APIがコールされ、生成された結果が返ってくる。
生成中はフロントでスピンがくるくる回ってくれる。そして生成結果が画面にドーン。
やったー。できました！

山羊の午後