AWS S3와 CloudFront를 이용한 React 배포 방법

먼저 S3와 클라우드 프론트가 무엇인지 알고 있다는 전제하에 진행하도록 하겠습니다.

S3와 CloudFront 대한 설명은 밑에 자세히 나와있습니다.

S3의 내용: Amazon S3 비용 등 | Seagate 대한민국

 

CDN 서비스 | CloudFront | Amazon Web Services

 

IAM사용자 추가 및 권한 설정

AWS 서비스 검색창에 IAM을 검색해서 들어가주도록 합니다.

 

왼쪽에 사용자를 클릭한 뒤 사용자 추가를 눌러줍니다.

 

사용자 이름과 비밀번호는 원하는대로 적어주시고 설정은 아래와 같이 해주시면 되겠습니다.

저희는 CLI를 이용할 것이기 때문에 콘솔 비밀번호는 설정 안하셔도 됩니다

기존 정책 연결에서 s3fullaccess를 선택해줍니다.

쭉 다음다음 누른다음에 csv파일을 다운받아줍니다.

 

이제 AWS CLI에서 설정을 해줘야합니다.

최신 버전의 AWS CLI 설치 또는 업데이트 - AWS Command Line Interface

AWS CLI 설치가 되어있지 않다면 위에 들어가서 운영체제에 맞게 설치해주세요

 

aws configure --profile s3_manager // user 이름
AWS Access Key ID [None]: ACCESS-KEY-ID // 다운받은 csv 파일 보고서 입력
AWS Secret Access Key [None]: SECRET-ACCESS-KEY
Default region name [None]: ap-northeast-2
Default output format [None]: json

설치를 다했다면 터미널 혹은 명령 프롬프트에 위와 같이 작성해주면 됩니다.

 

React App 만들기

npx create-react-app my-app
cd my-app
npm start

create-react-app을 이용해서 프로젝트를 만들어주고 실행이 잘 되는지까지 확인해봅니다.

 

S3 버킷 만들기

s3에 들어가줍니다.

버킷 만들기를 하고 나머지 이름만 지정하고 나머지 값들은 default로 설정했습니다.

 

CloudFront 배포 생성

클라우드 프론트에 들어가주도록 합니다

 

배포 생성을 누르고 원본 도메인, S3 버킷 액세스 설정을 위와 같이 한 뒤 나머지는 기본값으로 해주고 배포 생성을 해줍니다.

생성하면 위와 같이 정책을 업데이트하라고 뜰 것입니다. 

들어가주도록 합니다.

{
        "Version": "2008-10-17",
        "Id": "PolicyForCloudFrontPrivateContent",
        "Statement": [
            {
                "Sid": "AllowCloudFrontServicePrincipal",
                "Effect": "Allow",
                "Principal": {
                    "Service": "cloudfront.amazonaws.com"
                },
                "Action": "s3:GetObject",
                "Resource": "arn:aws:s3:::[your s3 bucket name]/*",
                "Condition": {
                    "StringEquals": {
                      "AWS:SourceArn": "[your cloud front arn]"
                    }
                }
            }
        ]
      }

정책 편집을 누러주고서 위와 같이 입력해줍니다. 

cloud font arn은 cloudfont 메인에서 확인하실수 있습니다. 

 

아니면 더 쉬운 방법으로는 

CloudFront -> 원본 탭 클릭 -> 편집 -> S3 버킷 액세스에 있는 정책 복사 클릭 -> S3 정책 편집

위와 같은 방법으로 해주면 됩니다.

 

S3 버킷에 React App 올리기

reacp app에 있는 package.json 파일을 수정해주도록 합니다.

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "aws s3 sync ./build s3://[your s3 name] --profile=[your s3 manage name]"
  },

이렇게 수정하고서 먼저 빌드를 해주도록합니다

npm run build 혹은 yarn build

그리고 배포는 npm run deploy 혹은 yarn deploy를 해줍니다.

이러면 S3버킷에 react app이 잘 올라간 것을 확인하실수 있습니다.

이제 접속이 잘 되는지 확인해봅니다.

 

cloudfront의 배포 도메인 네임 주소를 복사한 뒤에 들어가면....!

아마 Access Deny가 뜰 것입니다.

한가지만 수정해주면 됩니다.

CloudFront -> 일반 -> 편집 -> 기본 루트 객체 index.html 위처럼 바꿔주시면 됩니다.

그리고 다시 접속하면

이렇게 잘 뜨는 것을 볼 수 있답니다.

 

route53, acm인증서 받기 이런거는 생략을 했는데 좀만 찾으면 쉽게 하실 수 있으실 것입니다.

다른 블로그 보면 S3 버킷을 퍼블릭으로 열고 하는데 CloudFront로 배포하실거면 굳이 그럴 필요는 없을 것 같습니다.

 

궁금하신 점이나 안되는 점 있으면 편하게 질문 주세요