Блог

В настоящее время я использую proxy.conf.json для настройки URL API для разработки. Я считаю, что он работает только на локальном сервере. Как я могу настроить URL-адрес API при его развертывании на UAT и рабочем сервере? Я хотел бы изменить URL-адрес API на сервере без повторного построения всего приложения.

proxy.conf.json:

 {
    "/api": {
      "target": "http://api_server:88",
      "secure": false,
      "pathRewrite": {
      "^/api": ""
    },
      "changeOrigin": true
    }
  }
 

api.service.ts:

 get<T>(params: any = {}) : Observable<T> {
    return this.http.get<T>("/api/data", {params: params});
}
 

Конфигурации прокси-сервера в proxy.conf.json файле предназначены для того, чтобы ваш сервер разработки Webpack запускал ваше приложение Angular локально с помощью ng serve команды. Его не следует использовать для производственных и промежуточных сред. Вы можете найти подробную информацию об этом на официальной странице Angular docs.

Если вы хотите добавить аналогичную функцию на свой NodeJS или любой другой сервер, на котором размещается ваше приложение angular, проверьте, доступны ли плагины API-шлюза для используемого вами сервера.

Проверьте эту статью, если вы не знаете о шлюзах API.

Этот способ отлично работает для нас:

1. Создайте пользовательскую службу HTTP и создайте функцию, которая будет проверять текущий URL-адрес.

пользовательский-http.service.ts

 @Injectable()
export class CustomHttpService {

    constructor(private http: HttpClient) {
    }

    public getCurrentEnvironment(): string {
        const host = window.location.origin;
        let env = "";
        switch(host) {
            case 'http://localhost:4200': {
                env = 'LOCALDEV';
                break;
            }
            case 'https://my-test-site.azurewebsites.net': {
                env = 'TEST';
                break;
            }
            case 'https://my-prod-site.azurewebsites.net': {
                env = 'PROD';
                break;
            }
            case 'https://customdomain.com': {
                env = 'PROD';
                break;
            }
            default: {
                env = 'PROD';
                break;
            }

        }
        return env;
    }

    public get(url: string): Observable<any> {
        return this.http.get(url);
    }

    public getWithHeader(url: string, header: HttpHeaders): Observable<any> {
        return this.http.get(url, {headers: header});
    }

    public post(url: string, body: any): Observable<any> {
        return this.http.post(url, body);
    }

    public put(url: string, body: any): Observable<any> {
        return this.http.put(url, body);
    }

    public delete(url: string): Observable<any> {
        return this.http.delete(url);
    }
}
 

Вы можете вызвать getCurrentEnvironment() из любого места вашего приложения, чтобы узнать, в какой среде вы находитесь.

2. Создайте вспомогательную службу URL-адресов, она будет передавать правильный URL-адрес API для вашей конкретной среды.

 @Injectable()
export class URLHelper {
    constructor(private httpService: CustomHttpService) {

    }

    private env: string = this.httpService.getCurrentEnvironment();
    private Server: string = this.getServerUrl(this.env);

    getServerUrl(env: string): string {
        let server = "";
        switch (env) {
            case "LOCALDEV": {
                server = "http://localhost/project/";
                break;
            }
            case "TEST": {
                server = "https://my-test-site-api.azurewebsites.net/";
                break;
            }
            case "PROD": {
                server = "https://my-prod-site-api.azurewebsites.net/";
                break;
            }
            default: {
                console.error('No Env Found');
                server = "https://my-prod-site-api.azurewebsites.net/";
            }
        }
        return server;
    }

    // Here you will define all the API endpoints your app will use and 'this.Server ' will contain the proper host API server url at runtime for each environment.
    public User = this.Server   'api/User';
 

3. Использование. Чтобы использовать это сейчас, все, что вам нужно сделать, это в любой из ваших служб функциональных модулей добавить CustomHttpService и UrlHelper в конструктор

 @Injectable()
export class AdminService {

    constructor(private urlHelper: URLHelper, private httpService: CustomHttpService) { }

    getUser(): Observable<any> {
        return this.httpService.get(this.urlHelper.User);
    }

}