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

Z时代
2024-01-10
分类：问答

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

但是这个问题是针对那些使用，和

。我花了很多时间来找出承载单页应用程序的正确方法。我在这里汇总所有步骤。

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

回答：

有一个视频教程，用于将React

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

> > 。

添加存储桶策略，以便每个人都可以访问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>/*"
    }
]

}

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

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

确保在文件都有引用。 ***

现在，导航至“ ->“ 。启用选项。将和分别添加到字段中。保存时，您将收到。

最后，您的应用已部署。您所有的反应路线都将正常运行。但是，当您，S3将重定向到该特定路由。由于尚未定义此类路由，因此会呈现

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

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

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

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

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

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