Angular アプリケーションの URL を理解しよう！ --base-href と --deploy-url の役割とは？

2024-04-10

Angular CLI ツールの --base-href と --deploy-url パラメータの違い

--base-href

役割: アプリケーションのルート URL を指定します。

影響:

ルーティング: アプリケーション内のリンクは、--base-href で指定された URL を基に生成されます。
HTML ファイル: 生成された HTML ファイルには、base href 属性が --base-href で指定された値に設定されます。

例:

ng build --base-href /my-app

この場合、アプリケーションは https://example.com/my-app でホストされていると想定されます。

--deploy-url

役割: アプリケーションの静的アセット (画像、CSS、JavaScript など) の URL を指定します。

静的アセット: 生成された静的アセットのパスには、--deploy-url で指定された URL プレフィックスが付加されます。

ng build --deploy-url https://cdn.example.com/

この場合、アプリケーションの静的アセットは https://cdn.example.com/ から配信されます。

2 つのパラメータの主な違い

項目	--base-href	--deploy-url
役割	アプリケーションのルート URL を指定	静的アセットの URL を指定
影響	ルーティング、HTML ファイル	静的アセット、HTML ファイル
備考	Angular v13 で非推奨	ビルド速度を遅らせる可能性

--base-href はルーティングと HTML ファイルに影響を与え、--deploy-url は静的アセットに影響を与えます。
2 つのパラメータは似ていますが、異なる役割を果たします。
Angular v13 では --deploy-url は非推奨となっているため、代わりに --base-href を使用する方が好ましいです。

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Angular App</title>
  <base href="/">
</head>
<body>
  <app-root></app-root>
</body>
</html>

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My Angular App';
}

--base-href の使用例

ng build --base-href /my-app

生成された HTML ファイルには、base href 属性が /my-app に設定されます。
アプリケーション内のリンクは /my-app を基に生成されます。

app.component.html 内の href="/home" は /my-app/home になります。
app.component.css 内の url(./image.png) は /my-app/image.png になります。

--deploy-url の使用例

ng build --deploy-url https://cdn.example.com/

生成された HTML ファイル内の静的アセットへの参照は、https://cdn.example.com/ プレフィックスを含みます。

index.html 内の <link href="styles.css"> は <link href="https://cdn.example.com/styles.css"> になります。
app.component.html 内の <img src="image.png"> は <img src="https://cdn.example.com/image.png"> になります。

注意事項

--base-href と --deploy-url は同時に使用できます。
--deploy-url は Angular v13 で非推奨となっています。
--base-href を使用すると、CSS の background-image などのパスが自動的に書き換えられない場合があります。

--base-href と --deploy-url パラメータは、アプリケーションの URL 構造を制御するために使用できます。それぞれの役割を理解して、適切に使用することが重要です。

Angular アプリケーションの URL 構造を制御する他の方法

HTML ファイルの <head> セクションに <base> タグを追加することで、アプリケーションのルート URL を指定できます。

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Angular App</title>
  <base href="/my-app">
</head>
<body>
  <app-root></app-root>
</body>
</html>

この方法を使用すると、--base-href パラメータを指定する必要はありません。

@angular/platform-browser モジュールの APP_BASE_HREF トークンを使用することで、アプリケーションのルート URL をプログラムで設定できます。

import { APP_BASE_HREF, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  imports: [
    BrowserModule
  ],
  providers: [
    { provide: APP_BASE_HREF, useValue: '/my-app' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

この方法を使用すると、環境によって異なる URL を設定することができます。

ルーター設定

Angular のルーター設定を使用して、個々のルートの URL をカスタマイズできます。

import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }