![amplify]( "amplify")
本文介绍了在 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 中重写和重定向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！