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

序文

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

ベース href

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

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

例えば、画像  がある場合、パッケージ化後のパスは "/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 をよろしくお願いいたします。