AI Dev Lab
Web本番障害シミュレーター

環境変数ミスで 500 エラーが出るときに最初に見るポイント

環境変数の typo や未設定で 500 エラーが出るときに、何から確認し、どう切り分けるかを incident-sim の訓練視点で整理したガイドです。

·decision主力·stage公開中

環境変数ミスで 500 エラーが出るときに最初に見るポイント

環境変数の typo や未設定は、障害対応の初動でかなり出会いやすいパターンです。
しかも「500 が出た」だけでは、アプリ本体の不具合なのか、設定差分なのかがすぐ分からないことが多いです。

このページでは、incident-sim の訓練導線に寄せて、最初に何を見るべきかを整理します。

まず確認する順番

迷ったら、次の順番で見ます。

  1. 直前の変更に環境変数まわりが含まれていないか
  2. 必須の環境変数が欠けていないか
  3. 値の typo、空文字、桁違いがないか
  4. 本番と検証で参照元がずれていないか
  5. 失敗ログに missing, undefined, invalid のような兆候がないか

ありがちな詰まりどころ

  • デプロイ時に .env の値だけ更新されていない
  • シークレット名を変えたのに参照コードが古いまま
  • 数値や URL のフォーマットが環境ごとに違う
  • ロールバック時に古い設定へ戻っていない

訓練で身につけたいこと

incident-sim でこのテーマを触る意味は、答えを覚えることではありません。

  • 設定変更を疑うタイミング
  • ログと設定を往復する順番
  • 共有時に「どこまで確認できたか」を短く伝える力

この三つを反復で固めることが重要です。

次に試すとよい導線

  • incident-sim のシナリオ一覧で初級から 1 本選ぶ
  • CORS やロールバック失敗のガイドも見て、似た初動との差を比べる
  • 結果画面で、確認順が飛んでいないかを振り返る

設定ミスは地味ですが、初動の質がそのまま出ます。
だからこそ、障害対応の練習テーマとして価値があります。

[ ./next_action ]

読んだら、 Web本番障害シミュレーター を実際に動かす。

この開発ログは Web本番障害シミュレーター をどう作ったかの記録です。 読み終わったらそのままサービス本体へ戻って、 実物で価値を確かめてください。

[ ./related_logs ]

関連する開発ログ

all logs →
ToonCast

ToonCast ができるまで — AnimeGANv2 をブラウザで動かす

AnimeGANv2 の小さな ONNX (約9MB) を onnxruntime-web (単一スレッド WASM=COOP/COEP不要、 color-revive で承認済みライブラリの再利用) で実行。 512x512・[-1,1] 正規化で推論し、 結果を元解像度に戻して表示する設計記録。 写真は端末内処理。

read log →
ColorRevive

ColorRevive ができるまで — onnxruntime-web で白黒写真をカラー化

DeOldify の量子化 ONNX を onnxruntime-web (CDN side-load・単一スレッド WASM=COOP/COEP不要) で実行。 256x256 でモデル推論し、 輝度は元写真・色だけ AI を YCbCr で再合成して輪郭を保つ設計記録。 写真は端末内処理。

read log →
PhotoTwin

PhotoTwin ができるまで — CLIP画像埋め込みで似た写真を見つける

CLIP (Xenova/clip-vit-base-patch32) の image-feature-extraction を transformers.js の CDN ESM で side-load し、 各写真を正規化ベクトル化。 cosine 類似度で重複・似た写真をブラウザ内で検出する設計記録 (新ライブラリ追加なし=what-cam と同じ CLIP の再利用)。

read log →
AkinFind

AkinFind ができるまで — 文章embeddingsで意味検索をブラウザ内に

多言語の文章埋め込みモデル (Xenova/multilingual-e5-small) を transformers.js の CDN ESM で side-load し、 各文を正規化ベクトル化。 cosine 類似度で意味検索と似ている文ペア検出を全て端末内で行う設計記録。

read log →
WhatCam

WhatCam ができるまで — CLIP のゼロショット画像分類をブラウザで動かす

CLIP (Xenova/clip-vit-base-patch32) を transformers.js の CDN ESM で side-load し、 写真と候補ラベルの近さをブラウザ内で計算。 日本語ラベルを英語プロンプトに変換し、 図鑑と自由入力の両モードで「これ何?」を判定する設計記録。

read log →
DepthCast

DepthCast ができるまで — 1枚の写真をAIの深度推定で立体にする

Depth Anything (transformers.js) を CDN ESM で side-load し、 1枚の写真から深度マップを推定。 WebGL2 フラグメントシェーダで深度に比例した視差 (iterative backward parallax) を作り、 赤青アナグリフ / WebM 書き出しまで端末内で完結させた設計記録。

read log →