在 AWS S3 中部署 react-redux 应用程序 [英] Deploying react-redux app in AWS S3

问题描述

我在像这样的堆栈溢出中遇到了很多类似的问题 一个.每个人对部署 React 应用程序都有不同的看法.

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 和 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 应用程序部署到 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:

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

2. 添加存储桶策略，以便每个人都可以访问 react 应用程序.点击创建的存储桶 -> 属性 -> 权限.在其中点击编辑存储桶策略.以下是存储桶策略的示例.

1. Amazon AWS -> s3 -> create bucket.

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

如果您需要日志，请在属性的日志部分下创建另一个存储桶并设置存储桶名称.

If you want logs, create another bucket and set the bucket name under logs section in properties.

您需要有一个 index.html(这是您应用的起点)和 error.html 以及所有公共资产(浏览过的 reactJSapp 和其他 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 应用程序中进行的更改.我有我的 ma​​in.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.这样做会使 react-router 理解并相应地更改路由.这是我的 ma​​in.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);
   }
 });

因此上传浏览器化或 webpacked 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屋！