javascript - Create react app breaks after deployment on refresh 404 with Nginx - Stack Overflow

admin管理员组

文章数量:1406221

I am using create-react-app, it works fine on my local, with no issues at all. When I have it deployed on IBM Cloud, after login, when I refresh the page it gives 404 not found error It was working fine earlier, not sure what happened.

I saw many related ques, The things I tried to solve and didn't work are following

1. Created a static.json

{
  "root": "build/",
  "routes": {
    "/**": "index.html"
  }
}

2. I have this setup

devServer: {
    historyApiFallback: true,
    contentBase: './',
    hot: true
  },

3. I tried adding around my Routers, didn't work

import React, { Component } from 'react';
import styled from 'styled-ponents';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

    class App extends Component {
      render() {
        return (
          <>
            <Router>
              <Switch>
                <Route exact path="/" ponent={SignUp} />
                <Route path="/some" ponent={Some} />
              </Switch>
            </Router>
            </>
        );
      }
    }

    export default App;

4. I tried to add the following

import { HashRouter } from 'react-router-dom'

<HashRouter>
  <App/>
</HashRouter>

None of these seem to work for me. Any suggestions

I am using create-react-app, it works fine on my local, with no issues at all. When I have it deployed on IBM Cloud, after login, when I refresh the page it gives 404 not found error It was working fine earlier, not sure what happened.

I saw many related ques, The things I tried to solve and didn't work are following

1. Created a static.json

{
  "root": "build/",
  "routes": {
    "/**": "index.html"
  }
}

2. I have this setup

devServer: {
    historyApiFallback: true,
    contentBase: './',
    hot: true
  },

3. I tried adding around my Routers, didn't work

import React, { Component } from 'react';
import styled from 'styled-ponents';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

    class App extends Component {
      render() {
        return (
          <>
            <Router>
              <Switch>
                <Route exact path="/" ponent={SignUp} />
                <Route path="/some" ponent={Some} />
              </Switch>
            </Router>
            </>
        );
      }
    }

    export default App;

4. I tried to add the following

import { HashRouter } from 'react-router-dom'

<HashRouter>
  <App/>
</HashRouter>

None of these seem to work for me. Any suggestions

• javascript
• reactjs
• nginx
• ibm-cloud
• create-react-app

Share Improve this question Follow asked Dec 1, 2018 at 1:46 Apple PieApple Pie 9333 silver badges1414 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

When serving the build/ output as a static site, you have to configure your nginx to always serve index.html (otherwise, it will attempt to match the url path to a static folder/file, which doesn't exist). More info on this behavior can be found in the create-react-app docs

If you're using the nginx docker image to serve your site, you need to set the following default.conf:

server {
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    location ~ ^/$ {
        rewrite  ^.*$  /index.html  last;
    }
    listen       80;
    server_name  localhost;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

Note the rewrite ^.*$ /index.html part that modifies any ining call and serves index.html.

Your minimal Dockerfile would then look like this:

FROM nginx
COPY default.conf /etc/nginx/conf.d/default.conf
COPY build/ /usr/share/nginx/html/

I dont believe that work this:

<HashRouter> 
  <Router>
    <Switch>
    </Switch>
  </Router>
</HashRouter>

I think that you need build the application, and run this. I see an mon error:

react-scripts start
/bin/sh: 1: react-scripts: not found

I hope help you!

I finally figured it out. Thanks, Sebastián Sethson for your answer, which lead to the right path.

I updated my routing to

<HashRouter basename="/"> 
    <Switch>
      <Route exact path="/" ponent={SignUp} />
      <Route path="/some" ponent={Some} />
    </Switch>
</HashRouter>

本文标签： javascriptCreate react app breaks after deployment on refresh 404 with NginxStack Overflow