Front-end na nginx

pytanie zadane 28 grudnia 2018 w Python przez PelikanFix16 Użytkownik (950 p.)

Chcę postawić API napisane w Pythonie przy użyciu biblioteki Flask na serwerze. API domyślnie działa na porcie 5000, do tego API chcę napisać front-end. Domyślnie nie wiem, czy API powinno zwracać stronę HTML, dlatego myślę nad postawieniem nginx na tym serwerze, który pracuje na porcie 80, żeby po zapytaniu na IP serwera został zwracany HTML front-end, i wewnątrz tego był kod JavaScript, który wysyła zapytania pod API.

Mniej więcej coś takiego.

Kod HTML który jest zwracany przez Nginx.

<!<!DOCTYPE html>

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>


<script type="text/javascript">

  let s = {"username":"Tomek","password":"test"}

  $.ajax({
      type: "GET",
      url: "http://127.0.0.1/api/account/registration",
      // The key needs to match your method's input parameter (case-sensitive).
      data: s,
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function(data){alert(data);},
      failure: function(errMsg) {
          alert(errMsg);
      }
  });

</script>

  </body>
</html>

W konsoli przeglądarki wyskakuje błąd.

Access to XMLHttpRequest at 'http://127.0.0.1/api/account/registration?username=Tomek&password=test' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

3 odpowiedzi

odpowiedź 28 grudnia 2018 przez Muhin Gaduła (4,120 p.)
edycja 28 grudnia 2018 przez Muhin

Błąd dokładnie mówi o co chodzi. Twoja przeglądarka blokuje żądanie z innej domeny. Spróbuj wejść na stronę z localhost zamiast z 127.0.0.1.

By the way takie kombinowanie nie jest Ci potrzebne. Przecież flask ma w sobie gotowe narzędzie do robienia templatek: http://jinja.pocoo.org/docs/2.10/ chyba, że coś źle zrozumiałem i chodzi Ci o coś jeszcze innego.

komentarz 29 grudnia 2018 przez adrian17 Ekspert (344,860 p.)

Przecież flask ma w sobie gotowe narzędzie do robienia templatek

(to be fair, to nie jest wbudowane we Flaska - Flask to microframework, domyślnie nie ma praktycznie niczego)

odpowiedź 28 grudnia 2018 przez adrian17 Ekspert (344,860 p.)

dlatego myślę nad postawieniem nginx na tym serwerze

Boczna uwaga: w praktyce, API czy nie API, i tak na serwerze powinien stać nginx/apache chowający flaska/djagno.

Też uważam że przekombinowujesz znacząco. Normalnie na serwerze stoi publicznie nginx, który obsługuje zarówno API, jak i frontend. Obie te rzeczy mogą być jednym kodem z jednym Flaskiem... lub dwoma, jeśli to nie są powiązane aplikacje.

komentarz 28 grudnia 2018 przez PelikanFix16 Użytkownik (950 p.)

Czyli mam postawić na serwerze Nginx który będzie obsługiwał API a frontend będzie zwracany przez templaty flaska ?

komentarz 29 grudnia 2018 przez adrian17 Ekspert (344,860 p.)

Może źle zrozumiałem... czy frontend jest kompletnie statyczny? To zwykły plik .html? Czy chcesz go generować dynamicznie? Od tego zależy odpowiedź :)

komentarz 29 grudnia 2018 przez adrian17 Ekspert (344,860 p.)

Jeśli to zwykły plik HTML, to fakt, nie trzeba do niego Flaska. Wciąż jest rozsądnie robić wszystko przez nginxa.

Na przykład jeśli strona będzie pod www.strona.com/index.html, a api pod www.strona.com/api/, to wystarczy w nginxie ustawić żeby domyślnie strona.com używała plików z <katalog w którym jest Twój HTML>, a pod /api/ przerzucała na uwsgi z Flaskiem.

komentarz 30 grudnia 2018 przez PelikanFix16 Użytkownik (950 p.)

Zamierzam zrobić tak, żeby po wpisaniu www.strona.com nginx zwracał HTML z kodem JS, który odpytuje API, które będzie pod adresem www.strona.com/api. Js będzie dynamicznie zmieniał widok zależnie od zwróconego wyniku zapytania.

komentarz 30 grudnia 2018 przez adrian17 Ekspert (344,860 p.)

No to brzmi standardowo. Coś w stylu, na oko, bardzo na sucho:

location / {
    alias /path/to/static/files/;
}
location /api/ {
    rewrite  ^/api/(.*) /$1 break; # tylko jesli nie chcesz we flasku obslugiwac przedrostka /api we Flasku
    include uwsgi_params;
    uwsgi_pass unix:/your_uwsgi_socket_location;
}

komentarz 30 grudnia 2018 przez PelikanFix16 Użytkownik (950 p.)

Mam taki config nginix.

server {
    listen       80;
    server_name  localhost;



    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;

    }

    location /menu {
      root   /usr/share/nginx/html;
      index  menu.html menu.htm;
    }


    location /api/ {
    proxy_pass http://waiter_flask_1: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;
  }

}

I mam z tym 2 problemy po wpisaniu w przeglądarkę localhost/menu serwer nie zwraca menu.html. I jeszcze nie wiem jak zrobić, żeby po wpisaniu localhost/*.html serwer odrzucał zapytania.