같은 종류의 문제를 찾고있었습니다. 위에서 설명한 제안 솔루션을 혼합하여 사용했습니다.
먼저 여러 폴더가있는 s3 버킷이 있으며 각 폴더는 react / redux 웹 사이트를 나타냅니다. 또한 캐시 무효화를 위해 cloudfront를 사용합니다.
따라서 404를 지원하기 위해 라우팅 규칙을 사용하고 해시 구성으로 리디렉션해야했습니다.
<RoutingRules>
<RoutingRule>
<Condition>
<KeyPrefixEquals>website1/</KeyPrefixEquals>
<HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
</Condition>
<Redirect>
<Protocol>https</Protocol>
<HostName>my.host.com</HostName>
<ReplaceKeyPrefixWith>website1#</ReplaceKeyPrefixWith>
</Redirect>
</RoutingRule>
<RoutingRule>
<Condition>
<KeyPrefixEquals>website2/</KeyPrefixEquals>
<HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
</Condition>
<Redirect>
<Protocol>https</Protocol>
<HostName>my.host.com</HostName>
<ReplaceKeyPrefixWith>website2#</ReplaceKeyPrefixWith>
</Redirect>
</RoutingRule>
<RoutingRule>
<Condition>
<KeyPrefixEquals>website3/</KeyPrefixEquals>
<HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
</Condition>
<Redirect>
<Protocol>https</Protocol>
<HostName>my.host.com</HostName>
<ReplaceKeyPrefixWith>website3#</ReplaceKeyPrefixWith>
</Redirect>
</RoutingRule>
</RoutingRules>
내 js 코드에서 baseNamereact-router 구성 으로 처리해야했습니다 . 우선, 반드시 의존성이 상호 운용 할, 내가 설치 한 history==4.0.0호환이었다 느릅 나무 react-router==3.0.1.
내 의존성은 다음과 같습니다
- "역사": "3.2.0",
- "반응": "15.4.1",
- "react-redux": "4.4.6",
- "반응 라우터": "3.0.1",
- "react-router-redux": "4.0.7",
history.js기록을로드하기위한 파일을 만들었습니다 .
import {useRouterHistory} from 'react-router';
import createBrowserHistory from 'history/lib/createBrowserHistory';
export const browserHistory = useRouterHistory(createBrowserHistory)({
basename: '/website1/',
});
browserHistory.listen((location) => {
const path = (/#(.*)$/.exec(location.hash) || [])[1];
if (path) {
browserHistory.replace(path);
}
});
export default browserHistory;
이 코드는 서버가 보낸 404를 해시로 처리하고 경로를로드하기 위해 기록에서 대체합니다.
이제이 파일을 사용하여 상점 및 루트 파일을 구성 할 수 있습니다.
import {routerMiddleware} from 'react-router-redux';
import {applyMiddleware, compose} from 'redux';
import rootSaga from '../sagas';
import rootReducer from '../reducers';
import {createInjectSagasStore, sagaMiddleware} from './redux-sagas-injector';
import {browserHistory} from '../history';
export default function configureStore(initialState) {
const enhancers = [
applyMiddleware(
sagaMiddleware,
routerMiddleware(browserHistory),
)];
return createInjectSagasStore(rootReducer, rootSaga, initialState, compose(...enhancers));
}
import React, {PropTypes} from 'react';
import {Provider} from 'react-redux';
import {Router} from 'react-router';
import {syncHistoryWithStore} from 'react-router-redux';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import variables from '!!sass-variable-loader!../../../css/variables/variables.prod.scss';
import routesFactory from '../routes';
import {browserHistory} from '../history';
const muiTheme = getMuiTheme({
palette: {
primary1Color: variables.baseColor,
},
});
const Root = ({store}) => {
const history = syncHistoryWithStore(browserHistory, store);
const routes = routesFactory(store);
return (
<Provider {...{store}}>
<MuiThemeProvider muiTheme={muiTheme}>
<Router {...{history, routes}} />
</MuiThemeProvider>
</Provider>
);
};
Root.propTypes = {
store: PropTypes.shape({}).isRequired,
};
export default Root;
도움이 되길 바랍니다. 이 구성에서 라우팅을 통해 자바 스크립트를 비동기 적으로로드하기 위해 redux 인젝터와 homebrew sagas 인젝터를 사용합니다. 이 줄에 신경 쓰지 마십시오.
