Конфигурируемый бэкэнд для приложения Angular 2

Question

У меня есть приложение Angular 2, которое будет установлено на нескольких серверах и должно получить доступ к серверу, который также находится на нескольких серверах. Я использую код от this answer, в частности редактирование, которое работает с методами, отличными от GET, и работает хорошо, если я жестко кодирую URL-адрес.

Для данного внешнего сервера бэкэнд, к которому он должен иметь доступ, всегда будет таким же. Например, если внешний интерфейс находится на «example.com», бэкэнд всегда будет на «example.com:9080».

Я могу связать приложение для каждого другого сервера, изменив «localhost: 9080» в этом ответе на «example1.com:9080», «example2.com:9080» и т. Д., Если это необходимо. Это означало бы необходимость вносить изменения в код и связывать приложение для каждого сервера.

Есть ли способ, который я могу каким-то образом получить URL-адрес, который мне нужен для доступа к бэкэнд, чтобы я мог связать его один раз и развернуть его на всех серверах?

Я использую Angular 2.4.5 и обслуживаю интерфейс с помощью Apache.

Answer 1

Ваш действительно не хочет иметь это в вашем приложении. Это должно быть конфигурация, так как она зависит от вашего сервера (другими словами, вы не хотите менять свой код и перестраивать, когда вы добавляете сервер в более позднюю точку). Поэтому я предполагаю, что вы действительно хотите решить эту проблему на своем сервере Apache. Вы можете использовать ProxyPass и ProxyPassReverse (в httpd.conf или htaccess). Таким образом, вам не нужно беспокоиться об этом в своем приложении, так как там вы использовали бы только относительные пути к вашим конечным точкам api.

Например, предположим, что у вас есть угловое приложение, поданное с example.com, а ваш backend api живет на example.com:9080/api/.

Ваш код будет просто использовать/API как путь к конечным точкам и ProxyPass бы переписать тех бэкэнд с помощью:

ProxyPass /api example.com:9080 
ProxyPassReverse /api example.com:9080 

Вы должны mod_proxy установлены (довольно часто встречается на большинстве хостов): https://httpd.apache.org/docs/current/mod/mod_proxy.html

Answer 2

Я нацеливание IIS, так что я буду использовать обработчик HTTP, чтобы решить эту проблему динамически в зависимости от окружающей среды, но вы можете реализовать его с помощью одного JS файл, что-то вроде этого:

1. Создать JS файл, содержащий настройки, которые вы хотите загрузить в приложение следующим образом:

   var js = {}; js.settings = { API_URL : 'your_api_url_here' };

2. Создать класс для отображения этих значений в приложении:

   export class Settings { API_URL: string; }

3. Убедитесь, что файл JS будет загружен до ваших сценариев приложений, так что положить его в index.html:

   &ltscript src="env.js"></script>

4. Сейчас в вашем app.module, сопоставить эти значения в классе настройки и определить, как они будут предоставлены:

   
   // needed to avoid the TS compilation error. 
   // This can be placed at the top of your app.module file. 
   declare var js: any; 
   
   @NgModule({ 
        imports: [...], 
        declarations: [...], 
        providers: [{ 
        provide: Settings, useFactory:()=> { return js.settings; }}] }) 
   export class AppModule{} 
   

5. Теперь впрыснуть объект Настройки везде может понадобиться, например:

   
   export class ServiceBase { 
       protected apiUrl: string; 
       constructor(private settings: Settings){ 
        this.apiUrl = settings.API_URL; 
   } 
   

Надеюсь, что это сработает и для вас.