在 AWS amplify 中重写和重定向

Sha*_*mar 8 amazon-web-services node.js reactjs react-router aws-amplify

我是新手,正在尝试将后端 ( ) 和前端 ( ) 代码AWS deployment部署到 AWS。我用于后端和前端代码。我已经完成了后端部署并使用 postman 对其进行了测试,甚至通过在. 我也在 AWS amplify 上部署了代码,但似乎我不知道它使用什么以便应用程序可以导航到不同的 URL。我的是一个. 我可以看到登录屏幕,但输入凭据后,它不会导航到受保护的(使用)URL。NodeJS, Express, MongoDBReact/ReduxAWS BeanstalkAWS amplifyhttp://localhost:3000/Rewrites and redirectsSPAJWT Auth

我的放大应用程序托管在: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";

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);
Run Code Online (Sandbox Code Playgroud)

我在放大设置中的重写和重定向中进行了以下配置。

在此输入图像描述

清单.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"
}
Run Code Online (Sandbox Code Playgroud)

问题是,当我点击时,目前还没有加载任何内容:

https://url-resolve-changes.d1z993fyobkz3s.amplifyapp.com/index.html
Run Code Online (Sandbox Code Playgroud)

或者

https://url-resolve-changes.d1z993fyobkz3s.amplifyapp.com/
Run Code Online (Sandbox Code Playgroud)

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

mvl*_*adk 7

我在使用路由路径刷新页面时遇到问题,收到响应 AccessDenied ,这是由于 S3 实际上没有该路径或文件造成的。首先在搜索结果中得到这个问题,所以在这里发布我的解决方案。

通过以下方式解决了该问题

原文地址:

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

在放大设置中的重写和重定向中进行配置:

单页 Web 应用程序 (SPA) 的重定向

大多数 SPA 框架支持 HTML5 History.pushState() 来更改浏览器位置而不触发服务器请求。这适用于从根目录(或 /index.html)开始旅程的用户,但对于直接导航到任何其他页面的用户则失败。使用正则表达式,以下示例为除正则表达式中指定的特定文件扩展名之外的所有文件设置 200 重写到 index.html。


小智 1

当我在https://twitter.com/nswebstudio/status/1149276084304613376上转发你的问题时, 我发现了它的 amplify.yml 问题。我更正了我的构建路径如下

baseDirectory: build
Run Code Online (Sandbox Code Playgroud)

完整的amplify.yml文件截图 在此输入图像描述

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

希望能帮助到你