在 AWS amplify 中重写和重定向

Posted 2023-02-21

【中文标题】在 AWS amplify 中重写和重定向

【英文标题】：Rewrites and redirects in AWS amplify

【发布时间】：2019-06-25 21:48:31

【问题描述】：

我是 AWS deployment 的新手，我正在尝试将后端 (NodeJS, Express, MongoDB) 和前端 (React/Redux) 代码部署到 AWS。我将AWS Beanstalk 用于后端，AWS amplify 用于前端代码。我已经完成了后端部署并使用邮递员对其进行了测试，甚至通过在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";

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

我在 Amplify 设置中的 Rewrites and redirects 中进行了以下配置。

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

或

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

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

【参考方案1】：

虽然我在https://twitter.com/nswebstudio/status/1149276084304613376 上转发了您的问题 我想通了它的 amplify.yml 问题。我更正了我的构建路径如下

baseDirectory: build

完整的 amplify.yml 文件截图

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

希望对你有帮助

【参考方案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 次重写，正则表达式中指定的特定文件扩展名除外。