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 ステップ記録

推薦する

入力テキストボックスの長さをコンテンツに応じて変更する方法

初め:コードをコピーコードは次のとおりです。 <input type="text&q...

1つの記事でNavicat for MySQLの基本を理解する

目次1. データベース操作2. データ型3. バックアップとリカバリ3. 操作4. 上級5. 知識補...

Docker データボリュームの一般的な操作コードの例

開発者が Dockerfile を使用してイメージをビルドする場合は、イメージをビルドするときにデー...

js でオブジェクトを作成するさまざまな方法とその長所と短所のまとめ

目次初期作成方法ファクトリーパターンコンストラクターパターンコンストラクタパターンの最適化プロトタイ...

JSはフロントエンドのページング効果を実現します

この記事の例では、フロントエンドのページング効果を実現するためのJSの具体的なコードを参考までに共有...

jQuery タグセレクターの適用例の詳細な説明

この記事では、jQueryタグセレクターアプリケーションの具体的なコードを例として紹介します。具体的...

フロントエンド HTML+CSS+JS を使用してシンプルな TODOLIST 関数を開発する (メモ帳)

目次1. 簡単な紹介2. スクリーンショットを実行する3. コードの紹介4. まとめ1. 簡単な紹介...

JS+Canvas が抽選ホイールを引く

この記事では、宝くじターンテーブルを描画するJS + Canvasの具体的なコードを参考までに共有し...

HTML タグのリストと使用方法

HTMLタグのリストマークタイプ名前または意味効果述べるファイルのタグ付け<HTML> ...

Vue axios インターセプターは、繰り返しリクエストのキャンセルによく使用されます。

導入前回の記事では、axios のシンプルなカプセル化と、axios インターセプターの適用シナリオ...

ウェブページの幅を携帯電話の画面(ビューポート)の幅に自動的に適応させる実装コード

一般的な書き方は次のとおりです。 XML/HTML コードコンテンツをクリップボードにコピー<...

HTMLで細い線のテーブルを作成する簡単な例

この細線の表を作成する方法については、Baidu で検索すると、表に対して border="...

vue-seamless-scrollがスクロールしていいねをするときのデータ同期の問題を解決する

VUE は vue-seamless-scroll を使用して、自動的にスクロールしていいねします。...

docker run 起動パラメータ コマンドを表示する方法 (推奨)

runlike を使用してコンテナの docker run 起動パラメータを表示します。 pipを...

WebWorkerはJavaScriptサンドボックスの詳細をカプセル化します

目次1. シナリオ2. IJavaScriptShadowboxを実装する2.1 メインスレッドの実...