☰

CDN 上のアセットにアクセスするために base-href と deploy-url を使用して Angular CLI をビルドする 質問する

tag-icon • tag-icon angular angular-cli
CDN 上のアセットにアクセスするために base-href と deploy-url を使用して Angular CLI をビルドする 質問する

背景

Angular CLI を使用してプロジェクト (複数のアプリを含む) を構築しています。 のように、ドメイン上の別々のサブパスにアプリを公開したいと考えていますexample.com/apps/app1/。

--base-hrefパラメータを に設定すると、/apps/app1/ルーターに関するすべての問題が解決され、アセット (JS、CSS、画像など) が正常に読み込まれます。

このサービスを利用すればLocation、

this.location.prepareExternalUrl('/assets/data/data.json')

動的に読み込まれたアセットを解決します ( に解決されます/apps/app1/assets/data/data.json)。

ここまでは順調です。しかし、今度は、cdn.example.comアプリ自体を元の URL example.com/apps/app1/ でホストしながら、 などの CDN を通じてアプリのアセットを提供したいと思います。そこで、次を使用してアプリをビルドします。

 ng build -prod --app app1 --base-href "/apps/app1/" --deploy-url "http://cdn.example.com/app-assets/apps/app1/"

今回は、 と の両方--base-hrefの--deploy-urlパラメータを適用します。これは、base-href を使用して Router が URL を解決し、CDN から js ファイルと CSS ファイルを読み込むという点でうまく機能します。また、CDN URL を使用して CSS ファイル内の画像 URL 参照も解決します。

問題

アセットフォルダから画像やデータを読み込むとき動的に(サービスまたはテンプレート内)、構成を使用して URL を解決するための適切な方法が見つかりませんdeploy-url。

このサービスを使用する場合Location、base-hrefURLの解決には が使用されるため、

this.location.prepareExternalUrl('/assets/data/data.json')

/apps/app1/assets/data/data.jsonは、 ではなく に解決されますhttp://cdn.example.com/app-assets/apps/app1/assets/data/data.json。

deploy-url特に、同じドメインでファイルをホストする場合と外部ドメインでファイルをホストする場合に機能する一般的なソリューションであるため、値が定義されている場合はその値を使用すると予想されます。

質問

base-hrefと の両方のパラメータを考慮してアセット URL を解決する方法はありますかdeploy-url?

理想的には のような公式の Angular 関数ですLocation.prepareExternalUrlが、何らかの方法で Angular から base-href および deploy-url パラメータを取得できれば、そのための独自のサービスを構築できます。

以下の理由により、環境設定で URL を定義したくありません。

  1. アプリごとに特定の環境設定が必要になる
  2. アプリの構築時に提供される値と競合する可能性があります。

ベストアンサー1

--deploy-urlアプリケーション実行時に値にアクセスするには、deploy-url.ts次のように作成します。

export const DEPLOY_URL = new InjectionToken<string>('deployUrl');

main.ts ファイルで次のスニペットを使用します。

const deployUrl = (function() {
  const scripts = document.getElementsByTagName('script');
  const index = scripts.length - 1;
  const mainScript = scripts[index];
  return mainScript.src.replace(/main.*?\.js$/, '');
})();

const DEPLOY_URL_PROVIDER = {
  provide: DEPLOY_URL,
  useValue: deployUrl,
};

platformBrowserDynamic([DEPLOY_URL_PROVIDER])
  .bootstrapModule(AppModule)
  .catch(err => console.error(err));

アイデアは、現在実行されている Javascript ファイルの URL (main.js (または有効な場合は main.hash.js)) を取得し、そこからファイル名を削除することです。次に、サービスでコンストラクター パラメーターとして値outputHashingを挿入します。--deploy-url@Inject(DEPLOY_URL) deployUrl: string

おすすめ記事