Question

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

我的on 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";

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);

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

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"
}

问题是，当我点击时，到现在为止，什么都没有加载：

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

OR

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

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

Answer 1

我在https://twitter.com/nswebstudio/status/1149276084304613376上转发了您的问题我知道了它的amplify.yml问题。我按照以下方式更正了构建路径

baseDirectory: build

完成amplify.yml文件的屏幕截图

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

希望有帮助

Answer 2

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

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

原文地址：

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

Redirects for single page web apps (SPA)

<块引用>

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

在AWS Amplify中进行重写和重定向

2 个答案: