本番で動かなくなった時の緊急対応ガイド

たとえば、あなたがパン屋さんを開いたとします。開店初日はお客さんが来て、レジも動いて、すべて順調。でも翌朝、店のドアが開かなくなってお客さんが入れない——そんなことが Web サイトでも起きます。

このレッスンでは、あなたのサイトが突然動かなくなった時に「落ち着いて原因を特定し、AI に助けてもらいながら直す」ための手順を 15 分で身につけます。最終的に、トラブル対応チェックリスト（Markdown ドキュメント） を自分で完成させることがゴールです。

このレッスンを進めるには、次の条件を満たしている必要があります。

• すでにサイトを Vercel（＝サイトをインターネットに公開するサービス）にデプロイ（＝公開）していること
• AI ツール（Claude Code・Codex CLI・Cursor・ChatGPT のいずれか）が使える状態であること

どちらか一つでも準備できていない場合は、先に「AI アプリを Vercel にデプロイする」レッスンを完了してください。

---

まずは「何が起きているか」を正確につかみます。ドアが開かないなら、鍵が壊れているのか、ドアノブが外れているのか——状況を正確にメモすることが最初の一歩です。

やること

1. サイトの URL にアクセスして、画面に表示されているメッセージをそのままコピーする
2. ブラウザの「開発者ツール」を開いて、赤い文字のエラーがあればそれもコピーする
   • Chrome の場合: 画面のどこかで右クリック →「検証」→ 上部の「Console」タブをクリック
   • Safari の場合: メニューバーの「開発」→「Web インスペクタを表示」→「コンソール」タブ
3. コピーしたものをメモ帳やテキストファイルに貼り付けておく

良い例:

「ページを開くと『404 Not Found』と表示される。URL は https://my-app.vercel.app/about。コンソールに赤いエラーは出ていない」

悪い例:

「なんか壊れた」（情報が少なすぎて、次のステップで AI に聞いても的外れな答えが返ってきます）

---

メモした内容を、下の表と照らし合わせてみてください。エラーの種類ごとに「次に何をすればいいか」が変わります。

どれに当てはまるか迷ったら、「一番近いもの」を選べば OK です。

---

ここからが AI の出番です。ステップ 1 でメモしたエラー情報をそのまま AI に渡して、原因を特定してもらいます。

Claude Code / Codex CLI を使う場合

ターミナル（＝パソコンでコマンドを入力する黒い画面）で、プロジェクトのフォルダを開いた状態で以下のように話しかけます。

本番サイト（Vercel）でエラーが出ています。

【画面に出ているエラー】
404 Not Found

【コンソールのエラー】
（ここにコピーしたエラーを貼る）

【最後にやった変更】
ヘッダーのリンク先を /about から /about-us に変えた

原因と修正方法を教えてください。

Claude Code や Codex CLI はプロジェクトのファイルを自動で読めるので、この質問を送るだけで関連ファイルを探して修正案を出してくれます。

Cursor / ChatGPT を使う場合

Cursor なら該当ファイルを開いた状態で Cmd+K（Mac）/ Ctrl+K（Windows）を押して、同じ質問を入力します。ChatGPT の場合はブラウザで開いて、上の質問文を貼り付けてください。

AI に聞くときのコツ

良い例: エラーメッセージ + 直前に変更した内容 + 「修正方法を教えて」の 3 点セットで聞く

悪い例: 「直して」「エラーです」だけ送る（AI も情報が足りないと的外れな答えになります）

ワンポイント: エラーメッセージが英語でも大丈夫。そのままコピーして AI に貼れば、日本語で説明してくれます。

---

「いつから壊れたか」を知ることで、原因の特定がぐっと楽になります。

1. Vercel のダッシュボード（＝管理画面）にログインする
2. 該当するプロジェクトを選ぶ
3. 「Deployments」（＝公開履歴）タブを開く
4. 各デプロイの横にある「Visit」ボタンで、そのバージョンのサイトを確認できる
5. 最後に正常に動いていたデプロイを見つける

良い例:

「2 時間前のデプロイまでは動いていた。その後のデプロイでヘッダーを変更した」

悪い例:

「いつから壊れたかわからない」（履歴を確認すれば必ずわかります）

---

AI から修正案をもらったら、実際にファイルを直して反映します。

1. AI の修正案をファイルに適用する（Claude Code / Codex CLI なら自動で直してくれることも多いです）
2. 変更を保存して Vercel にデプロイする（いつも通り push するだけです）
3. デプロイが完了するまで 1〜2 分待つ（Vercel のダッシュボードで「Ready」になるのを確認）
4. サイトにアクセスして直ったか確認する

大事なルール: 一度に直すのは一箇所だけ。複数の修正を同時にやると、どれが効いたかわからなくなります。料理で調味料を一度に全部変えたら、何が味を変えたかわからなくなるのと同じです。

---

修正しても直らない、あるいは原因がよくわからない場合は、最後に正常に動いていたバージョンに戻すのが一番確実です。パン屋で言えば「昨日のレシピに戻す」ようなものです。

戻し方（ロールバック）

1. Vercel ダッシュボードの「Deployments」タブを開く
2. 最後に正常だったデプロイを見つける
3. そのデプロイの右側にある「…」（三点メニュー）をクリック
4. 「Promote to Production」（＝このバージョンを本番にする）を選ぶ

これでサイトはすぐに元通り動くようになります。焦らず、後でゆっくり原因を調べて、改めて修正しましょう。

AI に振り返りを頼む

戻した後、AI に次のように聞くと今後の参考になります。

本番でエラーが出たので前のバージョンに戻しました。

【エラー内容】
（ステップ1のメモを貼る）

【変更した内容】
（何を変えたか書く）

次に同じことをする時、どうすればエラーを防げますか？

---

修正後（またはロールバック後）は、次のチェックリストをすべて確認しましょう。

• トップページが正しく表示される
• 壊れていたページが正しく表示される
• ブラウザの開発者ツール（Console タブ）に赤いエラーが出ていない
• スマホでもページが表示される（PC だけで確認して終わりにしない）
• Vercel ダッシュボードのデプロイステータスが「Ready」になっている

すべて ✓ が付いたら、このチェックリストをスクリーンショットに撮るか、結果をテキストにまとめて保存してください。それがこのレッスンの成果物です。

---