在 AWS Amplify 中重写和重定向 [英] Rewrites and redirects in AWS amplify

问题描述

我是 AWS 部署 的新手，并尝试部署后端(NodeJS、Express、MongoDB)和前端(React/Redux)代码到 AWS.我使用 AWS Beanstalk 作为后端，使用 AWS amplify 作为前端代码.我已经完成了后端部署并使用 postman 对其进行了测试，甚至通过在 http://localhost:3000/ 上运行前端来测试 API.我也在 AWS amplify 上部署了代码，但似乎我不知道它使用的 Rewrites and redirects 以便应用程序可以导航到不同的 URL.我的是一个SPA.我可以看到登录屏幕，但是一旦我输入凭据，它就不会导航到受保护的(使用 JWT Auth)URL.

我在 amplify 上的应用托管在:https://url-resolve-changes.d1z993fyobkz3s.amplifyapp.com/

App.js -> 包含不同的路由.除了 /login 和 /register 之外，所有路由都必须首先使用 PrivateRoute 检查，然后才能呈现主页.我声明了 BASE_URL = host，但我不确定如何使用它来导航不同的 URL

//const BASE_URL = "https://url-resolve-changes.d1z993fyobkz3s.amplifyapp.com";类 App 扩展组件 {使成为() {返回 (<div className="应用程序"><MessageSnackbar/><路由器历史={历史}><开关><私人路线精确的路径={`/`}renderFunc={routeProps =><主页{...routeProps}/>}/><路由路径={`/login`} component={Login}/><路由路径={`/register`} component={Register}/></开关></路由器>

);}}导出默认 withTheme()(App);

我在 Amplify 设置中的重写和重定向中进行了以下配置.

manifest.json

<代码>{"short_name": "反应应用程序","name": "创建 React 应用示例",图标":[{"src": "favicon.ico",尺寸":64x64 32x32 24x24 16x16"，类型":图像/x 图标"}],"start_url": ".","display": "独立","theme_color": "#000000","background_color": "#ffffff"}

问题是当我点击时没有加载任何东西:

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

或

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

后端 URL 已正确配置为当我从 http://localhost:3000/ 发送请求时，API 工作正常.这只是我缺少的重定向部分.如果需要任何其他详细信息，请告诉我.感谢您的帮助.提前致谢.

解决方案

虽然我在

另请阅读以供参考:https://docs.aws.amazon.com/amplify/latest/userguide/build-settings.html

希望能帮到你

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.

解决方案

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

这篇关于在 AWS Amplify 中重写和重定向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！