Potencjał proxy w budowaniu struktury frontendowej w React

Obecnie każda biblioteka frontendowa, taka jak React, dostarczana jest z serwerem deweloperskim, gdzie uruchamiamy ją na localhost używając innego portu niż backend. Jednak niesie to ze sobą wiele wyzwań, którym musimy stawić czoła w czasie tworzenia aplikacji. Ten artykuł przedstawi sposoby na ich przezwyciężenie przy użyciu serwera deweloperskiego proxy.

Dlaczego powinniśmy używać proxy?

Istnieje wiele powodów, dla których warto używać serwera proxy do tworzenia aplikacji. Przyjrzyjmy się im nieco bliżej.

1. Koniec z błędami CORS i koniecznością wysyłania żądań przed głównym żądaniem

Błąd CORS (Cross-Origin Resource Sharing) jest jedną z najbardziej irytujących rzeczy, które można napotkać podczas tworzenia i testowania aplikacji internetowych.

Taki błąd pojawia się, gdy przeglądarki internetowe wymuszają regułę tego samego pochodzenia (Same-Origin Policy), aby chronić użytkowników przed atakami typu Cross-Site Scripting (XSS) i innymi.

Nie musi to być problemem na produkcji, ponieważ zarówno frontend jak i backend API zazwyczaj obsługiwane są z tego samego źródła.

Jednak tworząc aplikację, musisz dodać regułę dotyczącą CORS na backendzie, wyraźnie zezwalając na Origin, który reprezentuje frontend. Możesz to jednak pominąć, używając devservera proxy, i pokazując przeglądarce, że backend funkcjonuje dokładnie na tym samym originie

2. Łatwa obsługa przekierowań HTTP/HTTPS

http-proxy-middleware daje możliwość przekierowania adresów URL HTTP lub HTTPS do określonej ścieżki przy użyciu ProxyTable. Poniższa implementacja pokazuje, jak ProxyTable może być użyta do przekierowania żądań do innego target.

Na przykład, żądania mogą być kierowane przy użyciu nagłówka HTTP host lub ścieżki żądania.

const proxyTable = {
  'integration.localhost:3000': 'http://localhost:8001',
  'staging.localhost:3000': 'http://localhost:8002',
  '/rest': 'http://localhost:8003',
};
const options = {
  target: 'http://localhost:8000',
  router: proxyTable,
};
const myProxy = createProxyMiddleware(options);

Przykładowo, jeśli chcesz podłączyć swój frontend do zdalnego backendu działającego na HTTPS, możesz to zrobić przez proxy bez powodowania problemów z dostępem do zasobów HTTPS.

3. Łatwość symulacji środowiska produkcyjnego

Proxy ułatwia testowanie aplikacji w fazie rozwoju, zanim trafią na produkcję.

Załóżmy, że chcesz zmienić ścieżkę w adresie URL API i przetestować ją przed deploymentem. Można to łatwo osiągnąć przez użycie opcji pathRewrite w http-proxy-middleware.

pathRewrite: {
   '^/api/old-path': '/api/new-path',
},

4. Łatwe do kontrolowanie rejestrowania błędów

Jeśli chodzi o określenie źródła błędów, rejestrowanie jest niezwykle pomocne. http-proxy-middleware obsługuje różne poziomy logowania, którymi możemy kontrolować ilość wypisywanych informacji.

 LogLevel : 'debug' pokaże Ci wszystkie logi.

Możesz również użyć atrybutu Log Provider w http-proxy-middleware do skonfigurowania własnego loggera.

5. Łatwa praca ze ścieżkami względnymi na frontendzie

Możesz przybliżyć środowisko developerskie bliżej produkcji. Na przykład, Twój frontend może działać z relatywnymi linkami do API zarówno w fazie developmentu jak i na produkcji.

Proxy zajmie się ścieżkami bezwzględnymi w środowisku developerskim. Pozwala to zaoszczędzić czas programistom frontendowym, ponieważ nie muszą oni już konfigurować hosta w adresie URL.

Przyjrzyjmy się więc, jak możemy skonfigurować proxy z Reactem.

Konfiguracja proxy w praktyce

Istnieją dwa główne sposoby na skonfigurowanie proxy dla frontendu React. Możesz wybrać jeden z nich w zależności od tego, czego oczekujesz od proxy.

1. Konfiguracja proxy za pomocą create-react-app

Dzięki create react app konfiguracja proxy dla Twojego projektu React jest bardzo prosta. Jest on wstępnie skonfigurowany z webpack, dzięki czemu zaoszczędzisz czas.

Wszystko, co musisz zrobić, to dodać pole proxy do pliku package.json tak jak poniżej.

"proxy": "http://localhost:3000",

Ta linia instruuje serwer deweloperski, żeby proxować nieznane żądania do Twojego API w trybie deweloperskim.

Na przykład, gdy użyjesz fetch('/api/test'), serwer deweloperski rozpozna, że nie jest to statyczny zasób i przekieruje twoje żądanie do http://localhost:3000/api/test.

2. Konfiguracja proxy w trybie ręcznym

Możesz również ręcznie skonfigurować proxy używając biblioteki open-source npm o nazwie http-proxy-middleware. Biblioteka ta jest kompatybilna z wieloma serwerami, w tym express i connect, i może być zainstalowana za pomocą poniższej komendy.

npm install http-proxy-middleware --save

Po zainstalowaniu utwórz plik assetupProxy.js w folderze src swojego projektu React i zarejestruj proxy tak jak poniżej.

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:3000',
      changeOrigin: true,
    })
  );
};

Plik ten jest automatycznie rejestrowany podczas uruchamiania serwera deweloperskiego, więc nie musisz go importować nigdzie indziej.

Możesz również proxować wiele API poprzez modyfikację powyższego kodu.

app.use(
  '/api',
   createProxyMiddleware({
     target: 'http://localhost:3000',
     changeOrigin: true,
   })
);
app.use(
   '/api2',
   createProxyMiddleware({
     target: 'http://localhost:3001',
    changeOrigin: true,
   })
);

Uwaga: Nawet w przypadku projektu TypeScript, ten plik powinien być w JavaScript.

Buduj lepsze biblioteki komponentów i systemy projektowania

Rozdzielaj komponenty między zespołami i projektami, żeby przyspieszyć rozwój i zapewnić użytkownikom spójny wygląd w każdym punkcie kontaktu.

Narzędzia OSS takie jak Bit oferują wspaniałe doświadczenie w zakresie tworzenia dzięki budowania, udostępniania i przyjmowaniu komponentów przez zespoły i aplikacje. Stwórz hub komponentów za darmo!

Podsumujmy

Proxy to przydatna funkcja dla każdego programisty Reacta. Może ona przyspieszyć proces rozwoju frontendu i dostarczyć wiele innych wartości dodanych.

Mam nadzieję, że wypróbujesz go w swoim następnym projekcie React.

Dziękuję za przeczytanie! Udanego kodowania!

Oryginał tekstu w języku angielskim przeczytasz tutaj.