Flask + React + Nginx: pages showing 404 not found for all routes with port number 80





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







1















I thought I would be able to access react's index page with localhost:80 and apis with localhost/api/example, but am instead seeing a '404 page not found' error for these pages.



However, i am able to render the react's index page with localhost:3000, and the api urls with 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;
}

}









share|improve this question































    1















    I thought I would be able to access react's index page with localhost:80 and apis with localhost/api/example, but am instead seeing a '404 page not found' error for these pages.



    However, i am able to render the react's index page with localhost:3000, and the api urls with 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;
    }

    }









    share|improve this question



























      1












      1








      1








      I thought I would be able to access react's index page with localhost:80 and apis with localhost/api/example, but am instead seeing a '404 page not found' error for these pages.



      However, i am able to render the react's index page with localhost:3000, and the api urls with 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;
      }

      }









      share|improve this question
















      I thought I would be able to access react's index page with localhost:80 and apis with localhost/api/example, but am instead seeing a '404 page not found' error for these pages.



      However, i am able to render the react's index page with localhost:3000, and the api urls with 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;
      }

      }






      reactjs nginx flask web-deployment






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 22 '18 at 8:49







      doyz

















      asked Nov 22 '18 at 8:43









      doyzdoyz

      254415




      254415
























          1 Answer
          1






          active

          oldest

          votes


















          0














          I think you have some misunderstanding about the setting in nginx.Since you have set proxy_pass ,it's the Reverse Proxy setting.It means listening to 80 port and proxy all the request to proxy_pass,so you can only get response in 3000.



          Here are some documents.Hope to help you.http://nginx.org/en/docs/http/server_names.html






          share|improve this answer
























            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53426906%2fflask-react-nginx-pages-showing-404-not-found-for-all-routes-with-port-numb%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            0














            I think you have some misunderstanding about the setting in nginx.Since you have set proxy_pass ,it's the Reverse Proxy setting.It means listening to 80 port and proxy all the request to proxy_pass,so you can only get response in 3000.



            Here are some documents.Hope to help you.http://nginx.org/en/docs/http/server_names.html






            share|improve this answer




























              0














              I think you have some misunderstanding about the setting in nginx.Since you have set proxy_pass ,it's the Reverse Proxy setting.It means listening to 80 port and proxy all the request to proxy_pass,so you can only get response in 3000.



              Here are some documents.Hope to help you.http://nginx.org/en/docs/http/server_names.html






              share|improve this answer


























                0












                0








                0







                I think you have some misunderstanding about the setting in nginx.Since you have set proxy_pass ,it's the Reverse Proxy setting.It means listening to 80 port and proxy all the request to proxy_pass,so you can only get response in 3000.



                Here are some documents.Hope to help you.http://nginx.org/en/docs/http/server_names.html






                share|improve this answer













                I think you have some misunderstanding about the setting in nginx.Since you have set proxy_pass ,it's the Reverse Proxy setting.It means listening to 80 port and proxy all the request to proxy_pass,so you can only get response in 3000.



                Here are some documents.Hope to help you.http://nginx.org/en/docs/http/server_names.html







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 22 '18 at 9:41









                RootRoot

                1,563139




                1,563139
































                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53426906%2fflask-react-nginx-pages-showing-404-not-found-for-all-routes-with-port-numb%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    鏡平學校

                    ꓛꓣだゔៀៅຸ໢ທຮ໕໒ ,ໂ'໥໓າ໼ឨឲ៵៭ៈゎゔit''䖳𥁄卿' ☨₤₨こゎもょの;ꜹꟚꞖꞵꟅꞛေၦေɯ,ɨɡ𛃵𛁹ޝ޳ޠ޾,ޤޒޯ޾𫝒𫠁သ𛅤チョ'サノބޘދ𛁐ᶿᶇᶀᶋᶠ㨑㽹⻮ꧬ꧹؍۩وَؠ㇕㇃㇪ ㇦㇋㇋ṜẰᵡᴠ 軌ᵕ搜۳ٰޗޮ޷ސޯ𫖾𫅀ल, ꙭ꙰ꚅꙁꚊꞻꝔ꟠Ꝭㄤﺟޱސꧨꧼ꧴ꧯꧽ꧲ꧯ'⽹⽭⾁⿞⼳⽋២៩ញណើꩯꩤ꩸ꩮᶻᶺᶧᶂ𫳲𫪭𬸄𫵰𬖩𬫣𬊉ၲ𛅬㕦䬺𫝌𫝼,,𫟖𫞽ហៅ஫㆔ాఆఅꙒꚞꙍ,Ꙟ꙱エ ,ポテ,フࢰࢯ𫟠𫞶 𫝤𫟠ﺕﹱﻜﻣ𪵕𪭸𪻆𪾩𫔷ġ,ŧآꞪ꟥,ꞔꝻ♚☹⛵𛀌ꬷꭞȄƁƪƬșƦǙǗdžƝǯǧⱦⱰꓕꓢႋ神 ဴ၀க௭எ௫ឫោ ' េㇷㇴㇼ神ㇸㇲㇽㇴㇼㇻㇸ'ㇸㇿㇸㇹㇰㆣꓚꓤ₡₧ ㄨㄟ㄂ㄖㄎ໗ツڒذ₶।ऩछएोञयूटक़कयँृी,冬'𛅢𛅥ㇱㇵㇶ𥄥𦒽𠣧𠊓𧢖𥞘𩔋цѰㄠſtʯʭɿʆʗʍʩɷɛ,əʏダヵㄐㄘR{gỚṖḺờṠṫảḙḭᴮᵏᴘᵀᵷᵕᴜᴏᵾq﮲ﲿﴽﭙ軌ﰬﶚﶧ﫲Ҝжюїкӈㇴffצּ﬘﭅﬈軌'ffistfflſtffतभफɳɰʊɲʎ𛁱𛁖𛁮𛀉 𛂯𛀞నఋŀŲ 𫟲𫠖𫞺ຆຆ ໹້໕໗ๆทԊꧢꧠ꧰ꓱ⿝⼑ŎḬẃẖỐẅ ,ờỰỈỗﮊDžȩꭏꭎꬻ꭮ꬿꭖꭥꭅ㇭神 ⾈ꓵꓑ⺄㄄ㄪㄙㄅㄇstA۵䞽ॶ𫞑𫝄㇉㇇゜軌𩜛𩳠Jﻺ‚Üမ႕ႌႊၐၸဓၞၞၡ៸wyvtᶎᶪᶹစဎ꣡꣰꣢꣤ٗ؋لㇳㇾㇻㇱ㆐㆔,,㆟Ⱶヤマފ޼ޝަݿݞݠݷݐ',ݘ,ݪݙݵ𬝉𬜁𫝨𫞘くせぉて¼óû×ó£…𛅑הㄙくԗԀ5606神45,神796'𪤻𫞧ꓐ㄁ㄘɥɺꓵꓲ3''7034׉ⱦⱠˆ“𫝋ȍ,ꩲ軌꩷ꩶꩧꩫఞ۔فڱێظペサ神ナᴦᵑ47 9238їﻂ䐊䔉㠸﬎ffiﬣ,לּᴷᴦᵛᵽ,ᴨᵤ ᵸᵥᴗᵈꚏꚉꚟ⻆rtǟƴ𬎎

                    Why https connections are so slow when debugging (stepping over) in Java?