Angular-CLI パラメータ解説
2024-10-14
Angular-CLI の --base-href と --deploy-url パラメータの違いを日本語で解説
--base-href パラメータ
- 例
--base-href=/my-app/ - 影響
アプリケーションのリンクやリソースのパスを構築するために使用されます。 - 役割
アプリケーションのベース URL を指定します。
--deploy-url パラメータ
- 例
--deploy-url=https://example.com/my-app/ - 影響
アプリケーションのビルドプロセス中に、静的アセット（HTML、CSS、JavaScript）のパスを調整します。
両パラメータの関係
- 例外
アプリケーションがサブディレクトリにデプロイされる場合、--deploy-urlを使用して、ビルドされたアセットのパスを適切に調整します。 - 基本
通常は--base-hrefを使用します。
- 使い分け
通常は--base-hrefを使用し、サブディレクトリデプロイの場合は--deploy-urlを追加する。 - --deploy-url
ビルドされたアセットのパスをデプロイ先の URL に合わせる。 - --base-href
アプリケーションのベース URL を設定する。
ng build --base-href=/my-app/
このコマンドは、アプリケーションをビルドし、my-app サブディレクトリにデプロイすることを想定して、リンクやリソースのパスを調整します。
サブディレクトリにデプロイされる場合
ng build --base-href=/my-app/ --deploy-url=https://example.com/
このコマンドは、アプリケーションをビルドし、https://example.com/my-app/ にデプロイすることを想定して、リンクやリソースのパスを調整します。
ng build --deploy-url=https://example.com/my-app/
サーバーサイドレンダリング (SSR):
- 方法
- Angular Universalを使用
- アプリケーションをサーバー上で実行し、クライアントにレンダリングされたHTMLを提供
- 利点
- SEOの改善
- 初期表示の高速化
- サーバーサイドのロジックの実行
- 原理
アプリケーションをサーバー上でレンダリングし、HTMLをクライアントに送信します。
ビルド後のパス修正:
- 方法
- ビルド後のファイルのパスを検索・置換するスクリプトを作成
- デプロイ先の環境に合わせてパスを修正
- 利点
- シンプルなアプローチ
- 柔軟性
- 原理
ビルドされたアセットのパスを、デプロイ先の環境に合わせて手動で修正します。
環境変数:
- 方法
angular.jsonファイルのconfigurationsオブジェクトを使用して環境変数を定義- ビルド時に環境変数を参照し、パスを調整
- 利点
- 複数の環境に対応しやすい
- 自動化が可能
- 原理
アプリケーションの環境変数を設定し、ビルド時にパスを調整します。
ビルドシステムのプラグイン:
- 方法
- 利点
- ビルドシステムの機能を活用できる
- 原理
ビルドシステム（Webpack、Rollupなど）のプラグインを使用して、パスを調整します。
angular angular-cli
