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

Front-end na nginx

Aruba Cloud PRO i VPS, Openstack, VMWare, MS Hyper-V
0 głosów
183 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

+1 głos
odpowiedź 28 grudnia 2018 przez adrian17 Ekspert (323,640 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 (323,640 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 (323,640 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 (323,640 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ź 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 (323,640 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ź 30 grudnia 2018 przez kordix Gaduła (3,650 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 380 wizyt
pytanie zadane 22 stycznia 2020 w HTML i CSS przez KosaTV Obywatel (1,260 p.)
0 głosów
0 odpowiedzi 135 wizyt
pytanie zadane 8 grudnia 2018 w JavaScript przez Paweł Piech Użytkownik (720 p.)

89,728 zapytań

138,332 odpowiedzi

309,340 komentarzy

59,649 pasjonatów

Advent of Code 2022

Top 15 użytkowników

  1. 429p. - Argeento
  2. 427p. - nidomika
  3. 396p. - Mikbac
  4. 392p. - ssynowiec
  5. 390p. - Łukasz Eckert
  6. 387p. - TheLukaszNs
  7. 386p. - rucin93
  8. 382p. - Michal Drewniak
  9. 382p. - Marcin Harasimowicz
  10. 378p. - JMazurkiewicz
  11. 373p. - tokox
  12. 367p. - Jarosław Roszyk
  13. 362p. - adrian17
  14. 359p. - overcq
  15. 350p. - Mawrok
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

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

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...