Flask + React + Nginx：页面显示未找到端口号为 80 的所有路由的 404答案

【问题标题】：Flask + React + Nginx: pages showing 404 not found for all routes with port number 80Flask + React + Nginx：页面显示未找到端口号为 80 的所有路由的 404
【发布时间】：2019-04-24 21:33:48
【问题描述】：

我以为我可以使用 localhost:80 访问 react 的索引页面，使用 localhost/api/example 访问 apis，但我看到这些页面出现“404 page not found”错误。

但是，我可以使用 localhost:3000 呈现反应的索引页面，并使用 localhost:5000/api/example 呈现 api url。

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

}

【问题讨论】：

你的问题解决了吗？我遇到了和你一样的情况，谢谢！

标签： reactjs nginx flask web-deployment

【解决方案1】：

我想你对nginx中的设置有一些误解。因为你设置了proxy_pass，所以它是反向代理设置。这意味着监听80端口并将所有请求代理到proxy_pass，所以你只能得到3000的响应。

这里有一些文件，希望对你有所帮助。http://nginx.org/en/docs/http/server_names.html

【讨论】：

【解决方案2】：

您可以使用 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;
    }    

}

【讨论】：