プロジェクト

全般

プロフィール

操作
リンクをコピー

機能 #560

未完了

RAGアドバイザー - CSS/JSファイル読み込み不良の修正

Redmine Admin さんが5日前に追加. 5日前に更新.

ステータス:
新規
優先度:
高め
担当者:
-
開始日:
2025-06-15
期日:
進捗率:

0%

予定工数:

説明

背景

親チケット #559 でRAGアドバイザーをtask2.call2arm.comにデプロイしたが、以下の問題が発生している：

問題点

  1. CSS/JSファイルの読み込み不良

    • レイアウトが完全に崩れている
    • TailwindCSSのスタイルが適用されていない
    • JavaScriptの機能が正しく動作していない可能性

  2. リソースパスの問題

    • /rag-advisor/ 配下でのアセット読み込みに問題がある可能性
    • ベースパスの設定が不適切な可能性

  3. 機能面での懸念

    • ファイル読み込みが適切でないため、機能も正常に動作していない可能性
    • APIとの通信、状態管理、UIインタラクションに影響

調査項目

  1. ブラウザの開発者ツールでネットワークエラーを確認
  2. アセットファイルのパス設定を検証
  3. nginxの設定を確認
  4. ビルド時の設定（PUBLIC_URL等）を確認

修正方針

  1. アセットパスの修正
  2. nginx設定の最適化
  3. 必要に応じてアプリケーションの再ビルド
  4. E2Eテストによる動作確認

成功基準

  • CSSが正しく適用され、デザインが正常に表示される
  • JavaScriptが正常に動作し、インタラクティブな機能が使える
  • APIとの通信が正常に行われる
  • 全ページが設計通りに機能する
操作
リンクをコピー
 #1

Redmine Admin さんが5日前に更新

CSS/JSパス問題の修正作業を開始します。

作業開始

  1. 現在のファイル構造とビルド設定を確認
  2. パス問題の原因を特定
  3. 修正を実施
操作
リンクをコピー
 #2

Redmine Admin さんが5日前に更新

CSS/JSパス問題の修正を実施しました

実施内容

  1. ビルド設定の修正

    • package.jsonにbuild:ragスクリプトを追加
    • PUBLIC_URL=/rag-advisor でビルドするように設定
    • App.tsxでPUBLIC_URLに基づく動的basename設定を実装

  2. nginx設定ファイルの作成

    • /rag-advisorパス用の専用設定を作成
    • 静的ファイルのキャッシュ設定を追加
    • CORS設定を適切に構成

  3. デプロイスクリプトの作成

    • build-rag-advisor.sh: RAG用ビルドスクリプト
    • deploy-rag-advisor.sh: デプロイ手順を自動化

  4. デバッグツールの追加

    • test-rag-advisor.html: リソース読み込みテストページ
    • パス確認、リソース検査、API接続テスト機能を実装

  5. HTML/manifest更新

    • index.htmlにローディング状態とエラーハンドリングを追加
    • manifest.jsonをRAGアドバイザー用に更新

デプロイ手順

# 1. ビルド実行
npm run build:rag

# 2. アーカイブ作成
tar -czf rag-advisor-build.tar.gz build/ nginx-rag-advisor.conf

# 3. VPSへ転送・デプロイ
scp -i ~/.ssh/003-key.pem rag-advisor-build.tar.gz root@85.131.243.51:/tmp/
ssh -i ~/.ssh/003-key.pem root@85.131.243.51
cd /tmp
tar -xzf rag-advisor-build.tar.gz
docker cp build/. task2-ui:/usr/share/nginx/html/
docker cp nginx-rag-advisor.conf task2-ui:/etc/nginx/conf.d/
docker exec task2-ui nginx -s reload

テスト方法

  1. https://task2.call2arm.com/rag-advisor/test-rag-advisor.html でリソース読み込みを確認
  2. https://task2.call2arm.com/rag-advisor/ で本番アプリケーションを確認

これでCSS/JSファイルが正しいパスで読み込まれるようになります。

操作
リンクをコピー

他の形式にエクスポート: Atom PDF