first-app / run-and-preview · 約 10 分

起動してプレビューする

node server.js を起動し、GET / が 200 になることを確認します。

学習目標

学習者 PC の localhost でアプリが動きます。サイトは iframe でその URL を開きます。Codex をブラウザ内で動かしているわけではありません。 ^[codex-cli]

学習サイトは Cross-Origin-Embedder-Policy: require-corp のため、iframe に載せる応答には Cross-Origin-Resource-Policy: cross-origin と子側の Cross-Origin-Embedder-Policy: require-corp が必要です。また checks の http_ok はサイト origin から fetch(http://127.0.0.1:4780/) するので、Access-Control-Allow-Origin: * が無いとブラウザが本文を読めません(公開学習本文のみのサーバ向け)。

前提

server.js があること。plan-and-build の starter には上記ヘッダが含まれます。

なぜ必要か

ファイルがあることと、HTTP が 200 を返すことは別です。ヘッダが無いとプレビュー枠や判定がサイト側で失敗します。

実行場所

local-bridge では学習者 PC の Node で実プロセスを動かします。Codex CLI は使いません。

前のレッスン（plan-and-build）で作った server.js を引き継ぐ連続ワークフローのため、このレッスンは local-bridge のみです。ブラウザ内実習（WebContainer）はページ移動でファイルが消えるため、前レッスンの成果物を引き継げません。

node server.js

別の判定タブで checks を走らせます。ポートが塞がっていたら PORT=4781 は使わず、4780 を空けてください。この演習の判定は 4780 固定です。

応答ヘッダの確認例:

curl -sI http://127.0.0.1:4780/ | grep -iE 'access-control-allow-origin|cross-origin-resource-policy|cross-origin-embedder-policy'

成功結果

GET / が 200 で hello-codex-school を返し、上記 CORS / CORP ヘッダがあります。プレビュー iframe に本文が見えます。

失敗対処

listen していないと http_ok は失敗します。先にサーバを起動してください。EADDRINUSE なら既存プロセスを止めます。CORS エラーや iframe が空なら、plan-and-build のヘッダ要件を見直してください。