Flask + React + Nginx : les pages affichent 404 not found pour toutes les routes avec le numéro de port 80

Question

Je pensais pouvoir accéder à la page d'index de react avec localhost:80 et aux apis avec localhost/api/example, mais je vois plutôt une erreur '404 page not found' pour ces pages.

Cependant, je suis capable de rendre la page d'index de react avec localhost:3000, et les urls api avec localhost:5000/api/example.

nginx.conf

events {
    worker_connections  1024;
}

http {
    # include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    upstream nodeweb {
        server localhost:3000;
    }

    upstream flaskapp {
        server localhost:5000;
    }

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {

            # try_files $uri /index.html; -> adding this line gives 500 Internal Server Error

            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_set_header Host $host;

            # enable EventSource
            proxy_set_header Connection '';
            proxy_http_version 1.1;
            chunked_transfer_encoding off;
            proxy_buffering off;
            proxy_cache off;

            proxy_pass http://nodeweb$is_args$args;

        }

        location ~ /api/(?<section>.*) {
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_buffering off;
            proxy_set_header Host $host;

            proxy_pass http://flaskapp/$section$is_args$args;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

}

Answer 1

Je pense que vous avez mal compris les paramètres de nginx.Puisque vous avez défini proxy_pass,il s'agit du paramètre Reverse Proxy.Cela signifie qu'il écoute le port 80 et qu'il transmet toutes les requêtes à proxy_pass,de sorte que vous ne pouvez obtenir qu'une réponse en 3000.

Voici quelques documents qui, je l'espère, vous aideront. http://nginx.org/en/docs/http/server_names.html

Answer 2

Vous pouvez utiliser uwsgi pour gérer la requête de Nginx. De cette manière, vous pouvez utiliser Nginx pour servir votre frontend et votre middleware/backend en même temps.

Procédez de la manière suivante :

server {
    listen 80;
    server_name 127.0.0.1;
    root /usr/share/nginx/html;
    index  index.html;

    location / { 
        try_files $uri $uri/ /index.html;
    }

    location /api {
        include uwsgi_params;
        uwsgi_pass webmaas-backend:8080;
    }    

}