今回は、自動エージェントコーディングというよりは、システム構成の設定方法の支援でClaude Codeが役立ったという話です。
React Routerを使っている場合のApacheでのルーティング問題という割と有名な問題があり、ウェブで検索すると色々説明が出てきて、私が抱えていた問題は、まさにこれだったのですが、それらの説明サンプルでは、非常に単純なケースの例しか見つからず、私のケースでは結局どう設定する必要があるのかわからず、半年以上解決できずにいました。
昨今実感しているClaude Codeの優秀さを考えれば、この問題を解決してくれるだろうと思い、問い合わせを行った所、予想通り、一発で解決してくれました。
最初の質問です
デバッグモードの場合、トピックIDの直接指定で正しく動作しますが、
デプロイモードでWebサーバーをApacheにすると404エラーになります。
直接指定方法は、
http://localhost:portno/faqdirect/Content/100
のような形式です。
.htaccessにどのように指定すればいいですか?
Claude Codeの回答です。
Apacheでのルーティング問題ですね。React Routerを使っている場合、全てのリクエストをindex.htmlにフォールバックさせる必要があります。
既存の.htaccessの内容を確認しました。サブパス(/faqdirect/)に配置する場合は RewriteBase の指定が必要です。
現在の.htaccessにRewriteBaseが欠けているのが原因です。以下のように修正してください:
正しい.htaccessの内容:
RewriteEngine On
RewriteBase /faqdirect/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^ index.html [QSA,L]
合わせて package.json の homepage も設定が必要です:
これを設定した上で npm run build を実行することで、ビルド済みの JS/CSS のパスが /faqdirect/static/... になります。