Configuración Proxy en Angular CLI

4 julio, 2018
Category : Angular

Proxy en Angular CLI

Hola buenas a todos, hoy les comparto un poco de información que me sirvió muchísimo a la hora de consumir API’s de diferentes servicios.
En un entorno de desarrollo es necesario en ocasiones consumir muchos servicios y por lo general eso es un problema muy pesado cuando se trabaja con equipos de desarrollo de diferentes puntos geográficos.
Aquí es donde podemos configurar un proxy en nuestro proyecto con Angular CLI, esto nos va a ayudar que los tiempos de desarrollo sean mas rápido.

Como podemos ver en la imagen, en algun punto nuestro proyecto puede llegar a necesitar consumir servicios.

Por defecto, Angular CLI asume que el frontend se sirve en una ruta base, es decir “/”, se inserta en el index.html. Por lo tanto, por ejemplo, cuando en el navegador vamos a https://mydomain.com/catalog/index.html, el navegador solicitará entonces main.bundle.js a partir https://mydomain.com/main.bundle.js. Pero esto no se encontrará en ese lugar. El navegador debe solicitarlo desde https://mydomain.com/catalog/main.bundle.js. Esto puede solucionarse especificando la base real de HREF (en este caso, /catalog/) y desplegando la URL en su archivo package.json

"start": "ng serve --base-href /catalog/ --deploy-url /catalog/",
"build": "ng build --prod --base-href /catalog/ --deploy-url /catalog/"

A tener en cuenta

Si ejecuta npm run start debería ver que genera un archivo index.html y debería poder acceder a la página en http://localhost:4200/catalog/. He pasado por alto lo que hace exactamente la configuración deploy-url. Tiene un efecto similar en las referencias url(…) en CSS para realizar una reescritura (por lo tanto, compruebe que esta configuración sea correcta si tiene problemas con recursos de referencia de CSS, como fuentes o imágenes).

De modo que ya se parece más a la estructura con la que esperamos que los servicios y frontend se desplieguen en la producción. Sin embargo, el servidor local en el que Angular CLI ha comenzado a servir los archivos estáticos no sabe nada sobre qué hacer con las solicitudes GET /video/films o GET /library/books ni siquiera GET /catalog/config.

Para manejar esas solicitudes adicionales, debemos configurar Angular CLI para enviar esas solicitudes a otros servidores que puedan comprenderlas y responder adecuadamente. Para hacerlo, cree un archivo proxy.conf.json en la raíz de su proyecto de CLI angular, junto con el archivo package.json. En este ejemplo, los contenidos se parecen a los siguientes

{ 
  "/ library / *": { 
    "target": "http: // localhost: 10000", 
    "secure": false, 
    "logLevel": "debug", 
    "changeOrigin": true, 
    "pathRewrite": { 
      "^ / library ":" " 
    } 
  }, 
  " / video / * ": { 
    " target ":" http: // localhost: 10001 ", 
    " secure ": false, 
    " logLevel ":" debug ", 
    " changeOrigin ": true , 
    "pathRewrite": { 
      "^ / video": "" 
    } 
  }, 
  "/ catalog / api / *": { 
    "target": "http:// localhost: 5000 ", 
    " secure ": false, 
    " logLevel ":" debug ", 
    " changeOrigin ": true, 
    " pathRewrite ": { 
      " ^ / catalog ":" "
    } 
  } 
}

También necesitaras actualizar package.json para agregar la referencia a este archivo cuando se ejecuta localmente, de esta manera:

"start": "ng serve --base-href /catalog/ --deploy-url /catalog/     --proxy-config proxy.conf.json",

Ahora cuando ejecutamos npm run start puedes ver en la línea de comando que establece estas configuraciones de proxy:

Ahora cuando accedes al http://localhost:4200/catalog/ navegador puedes ver en la línea de comandos que el servidor está haciendo varias solicitudes proxy a otros servidores:

La solicitud http://localhost:4200/library/books ha dado lugar a que se envíe una solicitud http://localhost:10000/books y la respuesta se devuelve a la interfaz desde el servidor Angular CLI.

Esto sucedió porque la configuración dice para cualquier ruta que coincida con /library/* y luego apunte al servidor http://localhost:10000. Tiene una configuración Rewrite path adicional que dice que si la ruta coincide ^/library(es decir, si comienza con /library) luego reescribe esa parte con la cadena vacía (es decir, eliminarla de la ruta), por lo que /library/booksse reescribe /booksen la solicitud que se realiza http://localhost:10000.

La configuración se recupera de la http://localhost:4200/catalog/api/configcual coincide con la configuración del proxy “^/catalog/api/*”. La configuración Rewrite path indica que /catalogal comienzo de la ruta debe reemplazarse con la cadena vacía antes de formar la solicitud de proxy, que se convierte en http://localhost:5000/api/config.

Obviamente, estos otros servidores se deben ejecutar localmente para que las solicitudes funcionen. En lugar de apuntar a servidores que se ejecutan localmente, puede orientar un entorno ‘Dev’ si no está trabajando en ningún cambio en las API REST.

Conclusión

Creo que la nueva herramienta Angular CLI es excelente y ha hecho que el desarrollo local sea mucho más fácil que en AngularJS.

Esto es especialmente cierto cuando se trabaja con escenarios de implementación complicados y este ejemplo muestra que es lo suficientemente flexible para acomodar una gran cantidad de esta complejidad. Gracias por leer y espero que los detalles anteriores sean útiles para sus propias configuraciones.

Referencia aquí

Código de ejemplo aquí

Puede interesarte este articulo Autenticación con Angular.

Puede interesarte este articulo Angular 6 y Material

Tags:Angular 6 programacion Proxy REST