AWS S3でreact-reduxアプリケーションをデプロイ

Question

このようなスタックオーバーフローで、このような質問がたくさんありました。oneそれぞれに反応アプリの配備の視点が異なります。

しかし、この質問はReduxの、反応-ルータと反応-ルータ - Reduxのを使う人のためのものです。シングルページアプリケーションをホストする適切な方法を理解するのに多くの時間がかかりました。私はここですべてのステップを集約しています。

私はS3にreact-reduxアプリを導入する手順を含む以下の回答を書いています。

Answer 1

s3に反応アプリをデプロイするためのチュートリアルがあります。videoです。これは、s3でアプリを展開するのは簡単ですが、リアクションアプリでいくつかの変更を行う必要があります。それが続くのは難しいので、私はステップとして要約しています。ここではそれが行く：

1. アマゾンAWS - >はS3 - >をバケツを作成します。

2. 誰でも反応アプリにアクセスできるように、バケットポリシーを追加します。 バケットを作成 - >プロパティ - >許可をクリックします。そのクリックでバケットポリシーを編集します。バケットポリシーの例を次に示します。

   { 
       "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. ログをしたい場合は、別のバケットを作成し、ログ性質でセクションの下にバケツ名を設定します。あなたは（あなたのアプリケーションの出発点である）index.htmlをとerror.htmlとすべての公共資産（browserified reactJSアプリや他のCSS、JS、IMGファイル）にしておく必要があり

4. フォルダー。

5. あなたはindex.htmlを内のすべてのこれらの公共ファイルへ相対の参照を持っていることを確認してください。をホスティング>静的なウェブサイト - 今

6. は、性質に移動します。オプションをホストするウェブサイトを有効にします。 index.htmlとerror.htmlをそれぞれフィールドに追加します。保存すると、エンドポイントが届きます。

7. 最後に、react-reduxアプリがデプロイされています。すべての反応経路が適切に機能します。しかし、をリロードすると、はその特定のルートにリダイレクトされます。そのようなルートは既に定義されていないので、のエラーが表示されます。html

8. 静的ウェブホスティングにリダイレクトルールを追加する必要があります。したがって、404が発生すると、S3はindex.htmlにリダイレクトする必要がありますが、これは＃！のような接頭辞を追加することによってのみ行うことができます。。ここで、反応ルートを使用してページをリロードすると、error.htmlに行くのではなく、同じURLがロードされますが、プレフィックスはです。。 編集リダイレクションルールをクリックし、次のコードを追加します。

   は、Inが反応

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

9. 、我々はその接頭辞を削除し、元のルートへのルートをプッシュする必要があります。反応アプリで行う必要がある変更は次のとおりです。私は私のmain.jsファイルを持っています。これは反応アプリの出発点です。このようbrowserHistoryにリスナーを追加します。

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

10. 上記のコードは、接頭辞を削除し、正しいルート（HTML 5ブラウザの履歴）に歴史をプッシュします。たとえば：このようなものhttp://s3.hosting/#!/eventはhttp://s3.hosting/eventに変更されます。そうすることで、反応ルータはルートを理解してそれに応じて変更します。ここでは、より良い理解のための私の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); 
    } 
}); 

だから、アップロードbrowserifiedまたは必要なニーズを行いますアプリ（app.jsファイル）を反応させwebpacked。私はすべてのものを集めるのが難しいと思ったので、これらをすべてステップとして集めました。

Answer 2

あなたは

<ReplaceKeyPrefixWith>/</ReplaceKeyPrefixWith> 

として8番目の設定を編集して9番目のステップを無視して反応させ、ルータを