在AWS S3中部署react-redux应用程序 [英] Deploying react-redux app in AWS S3
问题描述
I have gone through lot of similar questions in stack overflow like this one. Each one have different perspective of deploying the react app.
但是，这个问题是针对使用 redux ，反应路由器和 react-router-redux 的用户的.我花了很多时间来找出承载单页应用程序的正确方法.我正在汇总所有步骤.
But this question is for those who use redux, react-router and react-router-redux. It took me lot of time to figure out the proper ways to host Single page application. I am aggregating all the steps here.
我写了以下答案，其中包含将react-redux应用程序部署到S3的步骤.
I have written the below answer that contains the steps to deploy react-redux app to S3.
推荐答案
有一个视频教程，用于将React App部署到s3.这样就可以轻松地在s3上部署应用程序，但是我们需要在react应用程序中进行一些更改.由于很难遵循，因此我将其总结为步骤.在这里:
There is a video tutorial for deploying react app to s3. This will be easy for deploying the app as such on s3 but we need to do some changes in our react app. Since it is difficult to follow, I am summarising as steps. Here it goes:
- Amazon AWS -> s3 -> 创建存储桶.
-
添加存储桶策略，以便每个人都可以访问react应用.点击创建的存储桶-> 属性-> 权限.在那点击编辑存储桶策略.这是存储桶策略的示例.
- Amazon AWS -> s3 -> create bucket.
Add bucket policy, so that everyone can access the react app. click created bucket -> properties -> permissions. In that click Edit bucket policy. Here is an example for the bucket policy.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "Allow Public Access to All Objects",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::<YOUR_BUCKET_NAME>/*"
}
]
}
如果需要日志，请创建另一个存储桶，并在属性的 logs 部分下设置存储桶名称.
If you want logs, create another bucket and set the bucket name under logs section in properties.
您需要拥有一个 index.html (这是应用程序的起点)和 error.html 以及所有公共资产(浏览器reactJS)应用程序和其他CSS，JS，img文件)放在一个文件夹中.
You need to have an index.html(which is the starting point of your app) and error.html and all the public assets(browserified reactJS app and other CSS, JS, img files) in a folder.
确保您对 index.html 中的所有这些公共文件具有相对引用.
Make sure you have relative reference to all these public files in index.html.
现在，导航至属性-> 静态网站托管.启用网站托管选项.将 index.html 和 error.html 分别添加到字段中.保存后，您将收到端点.
Now, navigate to properties -> static website hosting. Enable the website hosting option. Add the index.html and error.html to the fields respectively. On saving, you will receive the Endpoint.
最后，将部署您的 react-redux 应用.您所有的反应路线都将正常运行.但是，当您重新加载时，S3将重定向到该特定路由.由于尚未定义此类路由，因此会呈现 error.html
Finally, your react-redux app is deployed. All your react routes will work properly. But when you reload the S3 will redirect to that specific route. As no such routes are already defined, it renders error.html
我们需要在静态网络托管下添加一些重定向规则.因此，当404发生时，S3需要重定向到 index.html ，但这只能通过添加一些前缀来实现，例如#！.现在，当您使用任何反应路线重新加载页面时，而不是转到 error.html 时，将加载相同的URL，但带有前缀#！.点击编辑重定向规则，然后添加以下代码:
We need to add some redirection rules under static web hosting. So, when 404 occurs, S3 needs to redirect to index.html, but this can be done only by adding some prefix like #!. Now, when you reload the page with any react route, instead of going to error.html, the same url will be loaded but with a prefix #!. Click Edit redirection rules and add the following code:
<RoutingRules>
<RoutingRule>
<Condition>
<HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
</Condition>
<Redirect>
<HostName> [YOUR_ENDPOINT] </HostName>
<ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
</Redirect>
</RoutingRule>
</RoutingRules>
在反应中，我们需要删除该前缀并将路由推到原始路由.这是您需要在react app中进行的更改.我有我的 main.js 文件，这是react应用程序的起点.像这样将监听器添加到 browserHistory :
In react, we need to remove that prefix and push the route to original route. Here is the change you need to do in react app. I have my main.js file, which is the starting point of react app. Add a listener to browserHistory like this:
browserHistory.listen(location => {
const path = (/#!(\/.*)$/.exec(location.hash) || [])[1];
if (path) {
history.replace(path);
}
});
上面的代码将删除前缀并将历史记录推送到正确的路由(HTML 5浏览器历史记录).例如，例如: http://s3.hosting/#!/event 将更改为 http://s3.hosting/event .这样做使反应路由器能够理解并相应地更改路由.这是我的 main.js 文件，用于更好地理解:
The above code will remove the prefix and push the history to the correct route (HTML 5 browser history). For eg: something like this http://s3.hosting/#!/event will change to http://s3.hosting/event. Doing that makes react-router to understand and change the route accordingly. Here is my main.js file for better understanding:
import React from 'react';
import ReactDOM from 'react-dom';
import {createStore, compose, applyMiddleware} from 'redux';
import {Provider} from 'react-redux'
import {Router, Route, IndexRoute, browserHistory, useRouterHistory} from 'react-router';
import {syncHistoryWithStore} from 'react-router-redux';
import createLogger from 'redux-logger';
import thunk from 'redux-thunk';
const logger = createLogger();
const createStoreWithMiddleware = applyMiddleware(thunk, logger)(createStore);
const store = createStoreWithMiddleware(reducers);
const history = syncHistoryWithStore(browserHistory, store);
browserHistory.listen(location => {
const path = (/#!(\/.*)$/.exec(location.hash) || [])[1];
if (path) {
history.replace(path);
}
});
因此，上传浏览器化或网络打包的React应用(app.js文件)将满足所需的需求.由于我发现很难收集所有内容，因此我将所有这些内容汇总为步骤.
So uploading the browserified or webpacked react app(app.js file) will do the required need. Since I found difficult to gather all the stuff, I have aggregated all these as steps.
这篇关于在AWS S3中部署react-redux应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
