Angular HttpClient の baseUrl 設定

Angular HttpClient を使用して API と通信する場合、共通のベース URL を設定することで、リクエスト URL を簡潔に記述できます。

方法 1: HttpClientModule のオプションを使用

1. HttpClientModule をインポート
   

   import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
   

2. app.module.ts で HttpClientModule を設定
   

   @NgModule({
     // ...
     imports: [
       HttpClientModule.forRoot({
         baseUrl: 'https://your-api-base-url'
       })
     ],
     // ...
   })
   export class AppModule { }
   

方法 2: HTTP インターセプターを使用

1. インターセプターを作成
   

   import { Injectable } from '@angular/core';
   import {
     HttpRequest,
     HttpHandler,
     HttpEvent,
     HttpInterceptor
   } from '@angular/common/http';
   import { Observable } from 'rx   js';
   
   @Injectable()
   export    class BaseUrlInterceptor implements HttpInterceptor {
     intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
       co   nst baseUrl = 'https://your-api-base-url';
       const newReq = req.clone({
         url: baseUrl + req.url
       });
       return next.handle(newReq);
     }
   }
   

2. インターセプターを app.module.ts で登録
   

   @NgModule({
     // ...
     providers: [
       { provide: HTTP_INTERCEPTORS, useClass: BaseUrlInterceptor, multi: true }
     ],
     // ...
   })
   export class AppModule { }
   

どちらの方法でも、リクエスト URL を簡略化できます

import { HttpClient } from '@angular/common/http';

// ...

constructor(private http: HttpClient) {}

getData() {
  return this.http.get('/api/data'); // ベース URL が自動的に追加されます
}

注意

• インターセプターを使用すると、より柔軟なリクエストのカスタマイズが可能になります。
• ベース URL は環境変数を使用して動的に設定することもできます。

// app.module.ts
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  // ...
  imports: [
    HttpClientModule.forRoot({
      baseUrl: 'https://api.example.com'
    })
  ],
  // ...
})
export class AppModule { }

この方法では、アプリケーション全体に対して共通のベース URL を設定します。

// base-url.interceptor.ts
import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rx   js';

@Injectable()
export class BaseUrlInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandle   r): Observable<HttpEvent<any>> {
    const baseUrl = 'https://a   pi.example.com';
    const newReq = req.clone({
      url: baseUrl + req.url
    });
    return next.handle(newReq);
  }
}

// app.module.ts
import { HTTP_INTERCEPTORS } from '@angular/common/http';

@NgModule({
  // ...
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: BaseUrlInterceptor, multi: true }
  ],
  // ...
})
export class AppModule { }

この方法では、リクエストごとにベース URL を動的に追加できます。

使い方

import { HttpClient } from '@angular/common/http';

// ...

constructor(private http: HttpClient) {}

getData() {
  return this.http.get('/users'); // ベース URL が自動的に追加され、'https://api.example.com/users' にリクエストされる
}

環境変数を使用すると、ビルド時にベース URL を動的に設定できます。これは、開発環境、ステージング環境、本番環境で異なるベース URL を使用する際に便利です。

// environment.ts (開発環境)
export const environment = {
  production: false,
  baseUrl: 'http://localhost:3000/api'
};

// environment.prod.ts (本番環境)
export const environment = {
  production: true,
  baseUrl: 'https://api.example.com'
};

// app.component.ts
import { environment } from '../environments/environment';

@Component({
  // ...
})
export class AppComponent {
  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get(environment.baseUrl + '/users');
  }
}

Angular CLI の --base-href オプションを使用する

Angular CLI の --base-href オプションを使用すると、アプリケーションのベース URL を設定できます。これは、アプリケーションをサブディレクトリにデプロイする場合に便利です。

ng build --base-href /my-app/

カスタム HTTP インターセプターを使用する

カスタム HTTP インターセプターを作成することで、リクエストごとにベース URL を動的に設定できます。これは、より高度なカスタマイズが必要な場合に便利です。

// custom-interceptor.ts
import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
  HttpEvent
} from '@angular/common/http';
import { Observable } from 'rx   js';

@Injectable()
export class CustomInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<a   ny>> {
    const baseUrl = 'https://api.example.com'; // または環境変数から取得
    const newReq = req.clone({
      url: baseUrl + req.url
    });
    return next.handle(newReq);
  }
}

// app.module.ts
@NgModule({
  // ...
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: CustomInterceptor, multi: true }
  ]
})
export class AppModule { }