AI任せのWeb開発奮闘記【第82話】

「レビューが反映されない？サーバー設定の可能性を探る」

TAKA: 「老師、コードばっかり見てるけど、もしかしてサーバーとか環境の設定が原因なんじゃない？」
AI老師: 「その可能性もある。コードに異常がないなら、環境や設定を洗い直すべきじゃな。」
状況の振り返り

TAKAが開発中のMyTubeNaviでは、レビュー投稿がブラウザからサーバーに届かないという問題が続いています。コードのデバッグを繰り返しても症状が改善しないことから、今回はサーバーや環境設定の問題を疑って調査を進めることにしました。

サーバーの環境設定を確認

TAKA: 「まずは環境変数から見直してみようと思う。.envファイルとか問題ないかな？」
AI老師: 「うむ。サーバーと認証関連の設定が正しく読み込まれておるかチェックするのじゃ。」

確認すべきポイント：

MongoDBの接続設定
    MONGODB_URIが正しく設定されているか確認。
認証関連の設定
    JWT_SECRETやトークン発行関連の設定が正しいか確認。
ログレベルの設定
    サーバーログが重要なエラーを見逃していないかチェック。

TAKA: 「MongoDBの設定に警告が出てるんだよね。このuseNewUrlParserとuseUnifiedTopologyって警告は無視していいのかな？」
AI老師: 「それは機能的には問題ないが、最新版の設定にアップデートするのが望ましいじゃろうな。」

トークンの状態を確認

TAKA: 「トークンも怪しいよね。ローカルストレージから正しく取得できてるっぽいけど、本当に有効なのかな？」
AI老師: 「ブラウザでトークンの値を確認して、デコードしてみると良い。期限切れになっておる可能性もあるぞ。」

確認手順：

ブラウザのコンソールでlocalStorage.getItem('token')を実行。
トークンをデコードツール（例: jwt.io）で内容を確認。
サーバーでトークンの検証処理が正しく動作しているかを確認。

サーバーのエラーハンドリングを強化

TAKA: 「サーバーのログを増やして、どこで詰まってるのか見える化しようかな。」
AI老師: 「良い考えじゃ。エラーハンドリングとログ出力を増やすことで、問題の詳細がわかるかもしれん。」

例えば、レビュー保存時に追加したログ：

router.post(‘/’, auth, async (req, res) => {
console.log(‘POST /api/reviews called’);
console.log(‘Request body:’, req.body);

if (!req.body.videoId || !req.body.rating || !req.body.comment) {
    console.error('Missing required fields');
    return res.status(400).send({ error: 'Missing required fields' });
}

try {
    const review = new Review({
        videoId: req.body.videoId,
        user: req.user.username,
        rating: req.body.rating,
        comment: req.body.comment,
    });
    await review.save();
    console.log('Review saved:', review);
    res.status(201).send(review);
} catch (error) {
    console.error('Error saving review:', error);
    res.status(500).send({ error: 'Internal Server Error' });
}

});

状況は進展するのか…？

TAKA: 「サーバーのログにも、リクエストが届いてないっぽいんだよね。ってことは、やっぱりブラウザ側の問題かな…？」
AI老師: 「まだ諦めるのは早いぞ。サーバーの設定やネットワーク周りも含めて全体を見直すのじゃ。」
TAKAの今日のまとめ

TAKA: 「結局、サーバーの設定を見直してみたけど、明確な原因はまだ特定できなかった…。でも、少しずつ怪しいポイントが絞れてきた気がする！」
AI老師: 「進展があれば十分じゃ。問題解決の道は、常に小さな確認の積み重ねなのじゃよ。」

TAKAの開発はまだ道半ば。次回はブラウザとサーバーの通信部分にさらに踏み込んで、問題解決に挑みます。

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル