Angular: Jak zintegrować frontend i backend za pomocą proxy?

Angular udostępnia prosty mechanizm integracji Frontend'u z Backendem. Nazywa się proxy.

Załóżmy, że nasza aplikacja (frontend) działa na porcie: 4200. Mamy także backend, który działa na porcie: 3000. W tym przypadku mamy dwa różne porty, a to jest problem, ponieważ nie jesteśmy w stanie się odwołać do skryptu backendowego.

Ten problem możemy łatwo rozwiązać, konfigurując proxy.

Konfiguracja proxy

Zanim opiszę jak to zrobić, najpierw kilka słów jak to działa. Proxy sprawia, że frontend, który działa na przykład na porcie 4200 będzie mógł się odwołać do backendu, który działa pod innym portem.

Czyli na przykład mamy backend takim API:

• getUsers
• addUser

Za pomocą proxy będziemy mogli odwołać się do tego API na przykład tak: http://localhost:4200/api/getUsers.

Proxy możemy skonfigurować, w dwóch krokach:

Stwórz plik proxy.conf.json

Zwartość pliku: proxy.conf.json:

{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": "true",
    "pathRewrite": {"^/api": ""}
  }
}

W polu target podajemy adres, pod którym działa nasz backend.

Dzięki takiej konfiguracji będziemy mogli we frontendzie wywoływać API, w taki sposób: http://localhost:4200/api/someEndpoint.

Dodanie pliku proxy.conf.json

Teraz zedytujmy plik: package.json i w scripts dodajmy taką linijkę:

{
  "scripts": {
    "start": "ng serve --proxy-config proxy.conf.json"
  },
}

To wszystko. Uruchamiamy backend i frontend:

npm run start

Mamy dostęp do backendu we frontendzie.

Uwaga: Tego sposobu używa się zwykle, w trybie development. Jeśli chodzi o wersję produkcyjną, to można stworzyć virtual host.