Flask + React + Nginx: страницы, показывающие 404, не найдены для всех маршрутов с номером порта 80

Я думал, что смогу получить доступ к странице индекса реакции с помощью localhost: 80 и apis с помощью localhost / api / example, но вместо этого вижу ошибку «404 страница не найдена» для этих страниц.

Однако я могу отобразить страницу индекса реакции с помощью localhost: 3000 и URL-адреса API с помощью 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;
        }

}

Вы решили свой вопрос? Столкнулся с такой же ситуацией, как у вас, спасибо!

Journey Woo 24.04.2020 07:44
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
1
240
2

Ответы 2

Я думаю, у вас есть какое-то непонимание настройки в nginx. Поскольку вы установили proxy_pass, это настройка обратного прокси. Это означает, что вы слушаете порт 80 и проксируете все запросы на proxy_pass, поэтому вы можете получить ответ только через 3000.

Вот несколько документов. Надеюсь на помощь.http://nginx.org/en/docs/http/server_names.html

Вы можете использовать uwsgi для обработки запроса от Nginx. Таким образом, вы можете использовать Nginx для одновременного обслуживания своего внешнего интерфейса и промежуточного программного обеспечения / серверной части.

Делай это так:

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;
    }    

}

Другие вопросы по теме