AWS S3에서 React-Redux 앱 배포하기

AWS S3에 React-Redux 앱 배포하기

Redux, React Router 및 React-Router-Redux를 활용하는 React 앱을 사용한다면, AWS S3에 배포하는 과정은 약간 복잡할 수 있습니다. 이 블로그 포스트에서는 AWS S3를 사용하여 싱글 페이지 애플리케이션을 올바르게 호스팅하는 단계별 가이드를 제공합니다. 아래에 필요한 모든 단계를 정리했으니 프로세스를 더욱 쉽게 진행할 수 있습니다.

단계 1: 버킷 정책 추가하기

생성된 버킷을 클릭하고 속성으로 이동한 다음 권한을 클릭하세요. 거기에서 “버킷 정책 편집”을 클릭한 다음 아래 예시 코드를 추가하세요:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "모든 객체에 대한 공개 액세스 허용",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<YOUR_BUCKET_NAME>/*"
        }
    ]
}

단계 2: 로그 설정하기 (선택 사항)

로그를 활성화하려면, 다른 버킷을 생성하고 속성에서 로그 섹션에 버킷 이름을 설정하세요.

단계 3: 파일 준비하기

React 앱에서 index.html 파일(앱의 시작점 역할)과 error.html 파일이 있는지 확인하세요. 또한, 브라우저화된 ReactJS 앱, CSS, JS 및 이미지 파일과 같은 모든 공용 자산이 폴더에 위치해야 합니다. index.html 파일에서 이러한 공용 파일에 대한 상대적인 참조를 유지하는 것이 중요합니다.

단계 4: 정적 웹사이트 호스팅 활성화하기

버킷의 속성 섹션으로 이동하고 “정적 웹사이트 호스팅”을 선택하세요. 웹사이트 호스팅 옵션을 활성화하고 index.html 및 error.html 파일을 각각의 필드에 추가하세요. 저장 후, 앱의 Endpoint를 받게 될 것입니다.

단계 5: 라우트 리다이렉션 처리하기

기본적으로 특정 라우트로 앱을 다시로드하면 S3가 해당 라우트로 리다이렉션합니다. 초기에 라우트가 정의되어 있지 않기 때문에 error.html 페이지가 렌더링될 것입니다. 이를 처리하기 위해, 정적 웹사이트 호스팅 아래에 일부 리다이렉션 규칙을 추가해야 합니다. 리다이렉션 규칙을 편집하고 다음 코드를 추가하세요:

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

단계 6: React 앱에서 변경 사항 적용하기

React 앱의 main.js 파일(React 앱의 시작점)에서 browserHistory에 대한 리스너를 추가하여 접두사를 제거하고 원래 라우트로 이동하도록 설정하세요. 아래 예시에서는 적용해야 할 변경 사항의 예시입니다:

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

위의 변경 사항을 구현함으로써, React-Redux 앱이 AWS S3에 성공적으로 배포되어야 합니다. React Router가 올바르게 작동하며, 리액트 라우트로 페이지를 다시로드하면 접두사 없이 동일한 URL을 로드할 것입니다.

추가 팁

history.listen 함수에서 무한 루프 문제가 발생할 수 있습니다. 이러한 문제가 발생한 경우, 작은 timeout을 추가하여 해결할 수 있습니다. 다음과 같이 코드를 수정하세요:

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

9번 단계를 무시하고 React Router에서 browserHistory를 사용하려면, 8번 구성을 다음과 같이 편집하세요:

<ReplaceKeyPrefixWith>/</ReplaceKeyPrefixWith>

이 단계별 가이드가 React-Redux 앱을 AWS S3에 성공적으로 배포하는 데 도움이 되기를 바랍니다. 즐거운 코딩하세요!

참고 자료 : 

reactjs