Proxy oraz Reverse Proxy - czym są i jak działają?

📅
🏷️Inne

Przy tworzeniu stron internetowych dość kluczowe znaczenie ma zrozumienie, w jaki sposób przepływa ruch sieciowy między klientami (np. przeglądarka, aplikacja mobilna) a serwerami. Ważnymi komponentami w zarządzaniu tym przepływem są serwery proxy oraz reverse proxy. Serwer proxy (lub forward proxy) to tzw. serwer pośredniczący, który wysyła żądania do innych serwerów w imieniu klienta, głównie w celu zachowania prywatności i ominięcia ograniczeń geograficznych. Z kolei reverse proxy to serwer, który kieruje przychodzące żądania klientów do jednego lub więcej serwerów zaplecza i jest używany głównie do równoważenia obciążenia, buforowania, kompresji i ustalania granicy szyfrowania (SSL).

Koncepcje te nie są tylko teoretyczne; mają one praktyczne zastosowanie w rozwoju zarówno frontendu, jak i backendu. W kontekście frontendowym forward proxy mogą pomóc w problemach związanych z CORS, a reverse proxy mogą być wykorzystywane do zarządzania i kontrolowania przychodzących żądań klientów w technologiach serwerowych, takich jak Nginx lub Node.js z Express.js (obecnie frontend ponownie zmierza w kierunku SSR, więc tematy te niedługo powinny być dobrze znane również frontowym developerom). W tym artykule omówimy, czym są serwery proxy i reverse proxy, jak działają i jak można je wykorzystać w praktyce.

Proxy (Forward Proxy)

Proxy to serwer, który działa jako pośrednik między klientem a innym serwerem. Klient może być dowolnym urządzeniem, które łączy się z internetem, takim jak komputer, tablet lub smartfon. Serwer może być dowolnym serwerem, który udostępnia zasoby, takie jak pliki graficzne, dane lub strony internetowe (pliki HTML, CSS, JS). Proxy działa jako pośrednik między klientem a serwerem, który udostępnia te zasoby. Proxy może być używany do kontroli dostępu do zasobów serwera lub do przyspieszenia dostępu do zasobów serwera poprzez buforowanie.

Serwer proxy lub po prostu proxy to więc serwer, który działa jako pośrednik dla żądań klientów szukających zasobów z innych serwerów.

Oto jak to działa:

Celem serwera proxy może być zachowanie prywatności lub ominięcie ograniczeń regionalnych.

przykład forward proxy

Reverse Proxy

Z drugiej strony, reverse proxy jest rodzajem serwera proxy, który pobiera zasoby w imieniu klienta z jednego lub więcej serwerów. Zasoby te są zwracane do klienta, wyglądając tak, jakby pochodziły tylko z tego jednego serwera. Oto jak działa reverse proxy:

Główne powody korzystania z reverse proxy obejmują równoważenie obciążenia, buforowanie, kompresję i zakończenie SSL. Reverse proxy zapewnia dodatkowy poziom abstrakcji i kontroli, aby zapewnić płynny przepływ ruchu sieciowego między klientami a serwerami.

przykład reverse forward proxy

Różnice

Główna różnica między forward proxy i reverse proxy polega na ich wykorzystaniu i stronie modelu klient-serwer, którą obsługują.

Forward proxy służy po stronie klienta. Jest jak brama z sieci lokalnej do większego Internetu, używana często do zapewnienia anonimowości i omijania ograniczeń geograficznych. Z perspektywy Internetu wszystkie żądania wydają się pochodzić od serwera proxy, a nie od rzeczywistego klienta, który się za nim znajduje.

Reverse proxy obsługuje stronę serwera. Zazwyczaj jest on umieszczany na brzegu sieci, chroniąc, ukrywając i równoważąc obciążenie serwerów. Z perspektywy klientów w Internecie, rozmawiają oni po prostu z serwerem reverse proxy i nie mają pojęcia o wewnętrznej sieci serwerów za nim.

Przykłady frontendowe

Spójrzmy teraz na kilka przykładów użycia proxy i reverse proxy w kontekście frontendowym.

1. Używanie proxy z Axios w aplikacji React (forward proxy)

Kiedy pracujesz z Reactem i musisz wykonywać zapytania API, możesz być w sytuacji, gdzie nie posiadasz API uruchomionego lokalnie, ale znajduje się ono na jakimś serwerze developerskim. Aby nie musieć stawiać API lokalnie i wykorzystać serwer developerski, często konfigurujemy serwer proxy przy użyciu klucza proxy w pliku package.json:

{
  "name": "my-app",
  "version": "0.1.0",
  "proxy": "http://my-api-server.com"
}

Gdy wykonujesz zapytanie w swojej aplikacji, będzie ono przechodziło przez tymczasowo uruchomiony lokalny serwer proxy określony w kluczu proxy, aby przekierować ruch na jakiś wybrany przez nas serwer:

axios.get("/api/data").then((response) => {
  console.log(response.data);
});

W powyższym przykładzie rzeczywiste żądanie zostanie wysłane na adres http://my-api-server.com/api/data, ale dla aplikacji React wygląda to tak, jakby wywoływała /api/data. Jest to przykład działania forward proxy.

2. Używanie Nginx z aplikacją Node.js

Nginx jest popularnym wyborem dla reverse proxy. Załóżmy, że na serwerze działa aplikacja Node.js o adresie http://localhost:5000. Możesz skonfigurować Nginx tak, aby akceptował żądania pod adresem http://yourpublicwebsite.com i przekazywał je do twojej aplikacji.

Oto podstawowy przykład tego, jak może wyglądać konfiguracja Nginx:

server {
    listen 80;
    server_name yourpublicwebsite.com;
 
    location / {
        proxy_pass http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

W tym przypadku Nginx działa jako reverse proxy. Klienci wysyłają żądania do http://yourpublicwebsite.com, a Nginx przekazuje je do aplikacji Node.js działającej na http://localhost:5000. Wszelkie odpowiedzi są następnie wysyłane z powrotem przez Nginx do klienta, dając złudzenie, że Nginx jest źródłem odpowiedzi.

3. Express.js i http-proxy-middleware

Można również utworzyć reverse proxy przy użyciu Node.js i Express.js z biblioteką http-proxy-middleware. Jest to częsty scenariusz, gdy chcesz ominąć ograniczenia CORS podczas programowania lub rozdzielić obciążenie między różne usługi w architekturze mikro usług.

Oto podstawowa konfiguracja:

const express = require("express");
const { createProxyMiddleware } = require("http-proxy-middleware");
 
const app = express();
 
app.use(
  "/api",
  createProxyMiddleware({
    target: "http://api.yourserver.com",
    changeOrigin: true,
  })
);
app.listen(3000);

Teraz gdy wykonasz żądanie do http://localhost:3000/api, zostanie ono przekierowane do http://api.yourserver.com.

To tylko kilka przykładów. Szczegóły będą zależeć od przypadku użycia, używanych technologii oraz charakteru aplikacji i architektury sieci.

Podsumowanie