在AWS S3中部署react-redux应用程序

Question

我已经通过很多的这样的堆栈溢出类似的问题了一个。每个人对部署react应用都有不同的看法。

但是这个问题是针对那些使用 redux ， react-router 和 react-router-redux的人的
。我花了很多时间来找出承载单页应用程序的正确方法。我在这里汇总所有步骤。

我写了以下答案，其中包含将react-redux应用程序部署到S3的步骤。

Answer 1

有一个视频教程，用于将React
App部署到s3。这样就可以轻松地在s3上部署应用程序，但是我们需要在react应用程序中进行一些更改。由于很难遵循，因此我将其概括为步骤。它去了：

1. Amazon AWS- > s3- > 创建存储桶 。

2. 添加存储桶策略，以便每个人都可以访问react应用。单击 创建的存储区 -> 属性 -> 权限 。在那点击 编辑桶策略 。这是存储桶策略的示例。

   {
   "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>/*"
       }
   ]
   

   }

3. 如果需要日志，请创建另一个存储桶，并在 properties的* logs 部分下设置存储桶名称。 *

4. 您需要在文件夹中包含 index.html （这是应用程序的起点）和 error.html 以及所有公共资产（浏览器化的reactJS应用程序和其他CSS，JS，img文件）。

5. 确保在 index.html中* 对所有这些 公共 文件都有 相对 引用。 ***

6. 现在，导航至“ 属性” ->“ 静态网站托管” 。启用 网站托管 选项。将 index.html 和 error.html 分别添加到字段中。保存时，您将收到 Endpoint 。

7. 最后，您的 react-redux 应用已部署。您所有的反应路线都将正常运行。但是，当您 重新加载时 ，S3将重定向到该特定路由。由于尚未定义此类路由，因此会呈现 error.html

8. 我们需要在 静态虚拟主机 下添加一些重定向规则。因此，当发生404时，S3需要重定向到 index.html ，但这只能通过添加一些前缀来实现，例如 ＃!。 。现在，当您使用任何反应路线重新加载页面时，而不是去 error.html ，将加载相同的URL，但带有前缀 ＃!。 。单击 编辑重定向规则， 然后添加以下代码：

        <RoutingRules>
        <RoutingRule>
            <Condition>
                <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
            </Condition>
            <Redirect>
                <HostName> [YOUR_ENDPOINT] </HostName>      
                <ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
            </Redirect>
        </RoutingRule>
    </RoutingRules>

1. 作为响应，我们需要删除该前缀并将路由推送到原始路由。这是您需要在react app中进行的更改。我有 main.js 文件，这是react应用程序的起点。将侦听器添加到 browserHistory， 如下所示：

        browserHistory.listen(location => {
      const path = (/#!(\/.*)$/.exec(location.hash) || [])[1];
      if (path) {
          history.replace(path);
       }
     });

1. 上面的代码将删除前缀并将历史记录推送到正确的路由（HTML 5浏览器历史记录）。例如： http ://s3.hosting/#!/event之类的内容将更改为 http://s3.hosting/event 。这样可以使 react-router 理解并相应地更改路由。这是我的 main.js 文件，用于更好地理解：

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

因此，上传浏览器化或Webpacked react app（app.js文件）将满足所需的需求。由于我发现很难收集所有资料，因此将所有这些汇总为步骤。