Angular CLI リリース パスの構成項目の簡単な分析

Angular CLI リリース パスの構成項目の簡単な分析

序文

プロジェクトのリリースでは、常に特定の状況に応じたパッケージ化が必要です。Angular CLI は、便利なパッケージ化ツール「ng build」を提供します。リリース パスにはいくつかの構成があり、ここではそれらをまとめます。

ベース href

プロジェクト ビルドのディレクトリ構造を指定します。たとえば、「deploy-test」に設定すると、最終的なパッケージ結果は dist/deploy-test ディレクトリに保存されます。

プロジェクトが作成されると、index.html のデフォルト設定は <base href="/" rel="external nofollow" > になります。これは、アプリケーションがルート ディレクトリを基準にして実行されることを意味します。このとき、ページの相対パスはこの設定に基づきます。たとえば、![](image/test.png) の実際のアクセス パスは /image/test.png になります。

リソース要求パスは変更されません。

<本文>
 <アプリルート><​​/アプリルート>
 <script src="runtime.js"></script>
 <script src="polyfill.js"></script>
 <script src="styles.js"></script>
 <script src="main.js"></script>
</本文>

ただし、プロジェクトはサブディレクトリで実行されることが多く、たとえば、Tomcat の Web アプリケーションの下に新しい「deploy-test」プロジェクト ディレクトリを作成します。したがって、base-href も「/deploy-test/」に設定する必要があります。

ここではスラッシュ (/) が重要であることに注意してください。サーバーのサブディレクトリの名前が「test」であると仮定すると、パッケージ化と展開は次のようになります。

  • テスト: どちらの端も追加されていない場合は、baseHref が有効になり、リソースを取得できます。しかし、アプリケーションによって生成されたブラウザ パスは間違っており、host:port/test/test#/index となっています。ページを更新しても、index.html が見つかりません。
  • /test: 先頭のみ追加し、baseHref が無効で、リソースは host:port ルート ディレクトリを基準に読み込まれ、404 が報告されます。
  • test/: 末尾を追加するだけで、リソース要求パスは host:port/test/test/XXX.js となり、404 が報告されます。
  • /test/: アプリケーション生成パスは host:port/test/#/index であり、リソースは正しくロードされます。

パッケージ化時に base-href を変更する主な方法は 3 つあります。

  1. index.html で <base href="XXX" rel="external nofollow" > を設定します。
  2. CLI コマンドラインパラメータを使用して設定します: ng build --baseHref=/XXX/
  3. angular.json で設定します:
 "建築家": {
 "建てる": {
  "ビルダー": "@angular-devkit/build-angular:browser",
  「オプション」: {
  "baseHref": "/kanpm/",
  }
 }
 }

つまり、baseHref はアプリケーションのデプロイメント パスを構成するために使用されます。

デプロイURL

リソースとアプリケーションが同じサーバー ディレクトリに配置されている場合は、baseHref で十分ですが、リソースとアプリケーションが異なる場所にある場合はどうなるでしょうか?
たとえば、アプリケーションが「/app」ディレクトリにデプロイされ、リソース ファイルが「/app/resource」に配置されている場合や、高速化されたアプリケーションのさまざまなリソースを CDN (cdn.example.com など) 経由でホストし、アプリケーション自体を独自のサーバーにデプロイする場合などです。

deploy-url を設定すると、パッケージ化時にリソース要求パスが変更されます。たとえば、--deploy-url=/app/resource/ の場合、最終的にパッケージ化された index.html は次のようになります。

<本文>
 <アプリルート><​​/アプリルート>
 <script src="/app/resource/runtime.js"></script>
 <script src="/app/resource/polyfill.js"></script>
 <script src="/app/resource/styles.js"></script>
 <script src="/app/resource/main.js"></script>
</本文>

例えば、画像 ![](test.png) がある場合、パッケージ化後のパスは "/app/resource/test.png" になります。

同様に、angular.jsonまたはコマンドラインでも設定できます。

"建築家": {
 "建てる": {
 "ビルダー": "@angular-devkit/build-angular:browser",
 「オプション」: {
  "デプロイURL": "/test/",
 }
 }
}

または ng build --deploy-url="/test/"

✨注意: deploy-url はパッケージ化されたリソース ファイルのみを変更できます。

スタイルリソースのインポート

base-href を設定すると、スタイルシートにインポートされたリソース パスの動作は、CLI バージョンによって異なります。

  • バージョン2~7ではベースパスが自動的に追加されます。たとえば、url("/assets/path/to/my/asset.png") の先頭には、base-href が自動的に追加されます。
  • バージョン 8 では、以前のバージョンとの動作の一貫性を保ち、移行を容易にするために、 --rebase-root-relative-css-urls=true コマンドライン パラメータが一時的に追加されていますが、次のバージョンでは廃止される予定です。
  • バージョン 9 以降では、リソース パスをインポートするために相対パスを使用する必要があるため、コンポーネント内のスタイル ファイルのインポートは次のように記述できます (url("~src/assets/path/to/my/asset.png"))。

baseHref は、Angular アプリケーションの相対パスを制御するランタイム値であるためです。コンパイル時にパッケージ化の動作を処理するために使用しないでください。パッケージ化の依存関係管理では、webpack は相対パスを通じてそれを識別する必要があります。これは、リソースの追加処理 (リソース ファイル名にハッシュ値を追加してキャッシュされないようにするなど) にも便利です。

✨注: パッケージ化の際、パッケージ化する必要のあるリソースは webpack によってコピーされ、dist ルート ディレクトリに配置されます (assets フォルダーにも元のコピーがあります)。したがって、CLI がプロジェクトを作成するときに angular.json のデフォルト構成が次のようになるため、スタイルまたはコンポーネントで導入されたファイルは、assets ディレクトリの外部に配置する必要があります。

"建築家": {
 "建てる": {
 ...
 「オプション」: {
  「資産」: [
  "src/favicon.ico",
  「src/アセット」、
  ]、
 }
}

ご覧の通り、デフォルト設定では、assets フォルダ内のすべてのファイルがパッケージ化されずに dist フォルダに直接コピーされます (個人的には Nuxt のディレクトリ名は statics フォルダと呼ぶ方が適切だと思います)。コンポーネントにインポートする必要があるファイルや、スタイル ファイルに相対パスで導入する必要があるファイルは、別のフォルダーに配置できます。パッケージ化後にファイルが重複しないように、angular.jsn でそれらを構成する必要はありません。

要約する

これらをまとめて要約してみましょう。

ng ビルド --prod --base-href="/kanpm/" rel="外部 nofollow" --deploy-url="/kanpm/resource/"

コンパイルされパッケージ化された dist/kanpm フォルダーを取得した後、パッケージ化されコンパイルされたすべてのファイルをサーバーの kanpm/resource ディレクトリに配置し、index.html とその他の直接コピーされた静的ファイルをサーバーの kanpm/ディレクトリに配置します。 host:port/kanpm をリクエストすると、プロジェクトが正常に実行されていることがわかります。

このことから、base-href はアプリケーションの展開場所、つまりユーザーが Web サイトにアクセスできるパスを決定することがわかります。 deploy-url は、パッケージ化されたリソース ファイル (画像、フォント、js など) がデプロイされる場所を決定します。上記の例のようにアプリケーションのサブディレクトリ内、または CDN サーバー内に配置できます。

Angular CLI リリース パスの設定項目に関するこの記事はこれで終わりです。Angular CLI リリース パスの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  Linuxにgitをインストールする方法

>>:  Centos6.9 インストール Mysql5.7.18 ステップ記録

推薦する

Windows Server 2008 のサーバー パフォーマンス監視に関するチュートリアル

次に、ログ管理、ログのアーカイブ、ログのトラブルシューティング、イベントの転送と収集のためのコンピュ...

PostgreSQL データベースにおける varchar、char、text の比較に関する簡単な説明

以下のように表示されます。名前説明する文字可変(n)、varchar(n)長さ制限あり、可変長文字(...

丸い角や鋭い角の代わりに文字を使用することに関する研究経験の共有

1. フォントと文字表示の関係左側と右側の鋭角部分は Songti フォントで表示されます: &l...

HTMLコードテキストボックスの制限入力テキストボックスが灰色になり、制限テキストボックスの入力

方法 1: readonly 属性を true に設定します。入力値=読み取り専用 readOnly...

HTMLページでよく使われるいくつかの小さなメソッド

<Head>タグに追加する<meta http-equiv="pragm...

IISMonitor を使用して Web ページを監視し、IIS を自動的に再起動します。

目次1. ツールの紹介2. ワークフロー3. 操作インターフェースとパラメータ設定(1)監視と再起動...

Sitemesh チュートリアル - ページ装飾技術の原理と応用

1. 基本概念1. Sitemeshはページ装飾技術です。 1 : フィルターを通してページアクセス...

jsでシンプルなパズルゲームを実現する

この記事では、簡単なパズルゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な...

@Font-face の基本的な使い方と、すべてのブラウザと互換性を持たせる方法

@Font-face 基本紹介: @font-face は、Web ページにカスタム フォントを表示...

最もよく使用されるJavaScriptイベントについて詳しく学ぶ

目次JavaScript イベント:よく使用されるイベント:イベントアクション要約するJavaScr...

Docker構成 Alibaba Cloud Container Serviceの操作

Alibaba Cloud Dockerコンテナサービスの設定Alibaba Cloud Image...

Dockerでリモートアクセスを有効にする方法

DockerデーモンソケットDocker デーモンは、 unix 、 tcp 、 fdの 3 種類の...

MySQL 8.0.22 zip圧縮パッケージ版(無料インストール)のダウンロード、インストール、および構成手順の詳細

目次最初のステップはMySQLをダウンロードすることですステップ2: ダウンロードした圧縮パッケージ...

MySQLのインストール時に発生する可能性のある問題

質問1:インストール中に net start mysql と入力すると、次のエラー メッセージが表示...

vue-element-adminフレームワークを使用して、バックエンドからメニュー機能を動的に取得します。

目次2. 詳しい説明2.1. asyncRoutesルーティングを追加する2.2. 新しいpermi...