在 AWS Amplify 中重写和重定向

Question

I am new to AWS deployment and trying to deploy both Backends ( NodeJS, Express, MongoDB ) and Frontend( React/Redux ) code to AWS. I am using AWS Beanstalk for backend and AWS amplify for Frontend code. I have completed the backend deployment and tested it using postman and even testing the API's by running frontend at http://localhost:3000/ . I have deployed the code on AWS amplify also but seems I am not aware of the Rewrites and redirects it uses so that the app can navigate to different URL's. Mine is a SPA . I can see the login screen but once I enter the credentials it dosen't navigate to protected(Using JWT Auth ) URL.

My app on amplify is hosted on : https://url-resolve-changes.d1z993fyobkz3s.amplifyapp.com/

App.js -> Contains different routes. Apart from /login and /register all the routes have to be checked first using PrivateRoute and then can render the Homepage. I declared BASE_URL = host but I am not sure how I can use it that to navigate on different URL's

// const BASE_URL = "https://url-resolve-changes.d1z993fyobkz3s.amplifyapp.com";

class App extends Component {
  render() {
    return (
      <div className="App">
        <MessageSnackbar />
        <Router history={history}>
          <Switch>
            <PrivateRoute
              exact
              path={`/`}
              renderFunc={routeProps => <HomePage {...routeProps} />}
            />
            <Route path={`/login`} component={Login} />
            <Route path={`/register`} component={Register} />
          </Switch>
        </Router>
      </div>
    );
  }
}

export default withTheme()(App);

I have below configured in Rewrites and redirects in the Amplify settings.

manifest.json

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

The issue is that nothing loads as of now when I hit :

https://url-resolve-changes.d1z993fyobkz3s.amplifyapp.com/index.html

OR

https://url-resolve-changes.d1z993fyobkz3s.amplifyapp.com/

The backend URL though is correctly configured as when I send the request from http://localhost:3000/ the API's are working fine. It's just the redirecting part I am missing. Do let me know if any other details are required. Appreciate your help. Thanks in advance.

Answer 1

While I reshared your question on https://twitter.com/nswebstudio/status/1149276084304613376 I figured it out its amplify.yml issue. I corrected my Build path as follows

baseDirectory: build

Complete amplify.yml file screenshot

Also read for reference: https://docs.aws.amazon.com/amplify/latest/userguide/build-settings.html

Hope it helps

Answer 2

I had a problem when refreshing page with route path, received response AccessDenied , caused by S3 does not really have that path or file. Got this question first on search result, so posting my solution here.

Resolved the issue by:

Original address:

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/>

Redirects for single page web apps (SPA)

Most SPA frameworks support HTML5 history.pushState() to change browser location without triggering a server request. This works for users who begin their journey from the root (or /index.html), but fails for users who navigate directly to any other page. Using regular expressions, the following example sets up a 200 rewrite for all files to index.html except for the specific file extensions specified in the regular expression.