• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Front-end na nginx

VPS Starter Arubacloud
0 głosów
248 wizyt
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

0 głosów
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,100 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)

0 głosów
odpowiedź 28 grudnia 2018 przez adrian17 Ekspert (344,100 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,100 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,100 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,100 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.

0 głosów
odpowiedź 30 grudnia 2018 przez kordix Gaduła (3,910 p.)
Pytanko też mniej więcej w tym temacie, tyle że w PHPie - na localhoście serwuję api na jednym porcie i front na drugim, co mam zrobić jak wrzucę to na DigitalOcean?

Podobne pytania

0 głosów
4 odpowiedzi 691 wizyt
pytanie zadane 22 stycznia 2020 w HTML i CSS przez KosaTV Obywatel (1,260 p.)
0 głosów
4 odpowiedzi 420 wizyt
0 głosów
0 odpowiedzi 158 wizyt
pytanie zadane 8 grudnia 2018 w JavaScript przez Paweł Piech Użytkownik (720 p.)

92,452 zapytań

141,262 odpowiedzi

319,079 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...