threejs-deployment について
Three.jsアプリのデプロイ準備を行う開発者向けの、ビルドと配信に関するスキルです。アセットパス、キャッシュ、セキュリティポリシー、本番環境での検証を扱い、公開前の権限確認も促します。
主な機能
- 01既存のビルド・ホスティング規約の維持
- 02Three.js依存関係の互換性確認
- 03ビルドに応じたアセットURLの解決
- 04クロスオリジンとセキュリティポリシーの設定
- 05キャッシュと本番プレビューの検証
活用シーン
- 01Three.jsアプリのデプロイ準備
- 02ネストしたベースパスとルート再読み込みのテスト
- 03アセット欠落や古いキャッシュの調査
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ cesartevisual/ threejs-skills --skill threejs-deploymentインストール後、Claude Code で/threejs-deploymentを入力して読み込まれたか確認します。
詳細
ビルドとデリバリー
プロジェクトにインストール済みのバージョンと既存のアーキテクチャを使用します。以下の指示はユーザーのタスクを補足するものであり、無関係な変更や外部操作を許可するものではありません。
既存のビルドツール、ホスティング先、ベースパス、ブラウザー要件、デプロイの許可を確認します。プロジェクトの規約を維持してください。公開に後からの許可が必要な場合でも、ビルドを準備して検証してください。
Three.js とアドオンのリビジョンに互換性を持たせ、競合するインスタンスを重複排除します。アップグレード前にピア依存関係を確認してください。必要なローダーやヘルパーのみを含め、有用な場合は重いオプション機能のパスを遅延読み込みします。ツリーシェイキングによって未使用のコードが削除されたと想定せず、出力を確認してください。
モデル、テクスチャ、デコーダー、ワーカー、WASM の URL は、ビルドに対応したパスを通じて解決します。実際のネストされたベースパスと、アプリケーションのルートへの直接アクセスをテストしてください。適切な MIME タイプで配信し、アセットへのレスポンスが HTML のフォールバックではないことを確認してください。
正当なクロスオリジンアセットに対して CORS を設定し、選択したワーカー/デコーダー構成に必要な CSP ディレクティブを設定します。必要な機能ではセキュアコンテキストを必須にしてください。実際にスレッド/ランタイム機能で必要な場合に限り、クロスオリジン分離を追加し、サードパーティーリソースへの影響を考慮してください。
コンテンツハッシュ付きアセットには不変キャッシュを使用し、HTML とマニフェストの一貫した更新戦略を採用します。古いサービスワーカーによって、新しいコードと古いデコーダーが組み合わされることを避けてください。製品要件に応じてオフライン状態やエラー状態に対処します。
本番プレビューを実行し、代表的なアセット、キャッシュの動作、読み込み失敗、代替デバイス、ルートの再読み込みを確認します。既存の許可範囲内でのみ公開し、デプロイ済み URL は検証後に限って報告してください。
API リファレンス
正確なシグネチャとリビジョン固有の動作については、公式ドキュメントを参照してください。ドキュメントを利用できない場合は、インストール済みの型定義/ソースを確認し、残る不確実性を明示してください。