클라우드 프론트 설정 및 배포하기

s3 버킷이 이미 생성 되어 있어야 합니다.

1. AWS-CLI 를 사용하기 위해 설치를 한다.
   여기 에서 운영체제에 맞게 설치 할 수 있도록 한다.

2. AWS 계정 설정을 해줘야 한다.

$ aws configure
AWS Access Key ID [None]: AKIATQC56M**********
AWS Secret Access Key [None]: Xy3d**********************

Access Key ID 는 IAM 계정 을 만들면 생성되는데 이때 얻은 ID를 입력하면 된다. Secret Access Key 역시 마찬가지.

3. 클라우드 프론트를 만든다.
   접속.

• 접속하고 난 뒤, CloudFront 를 찾아 아래 화면과 같이 접속한다.

• Create Distribution 클릭한다.

• 길게 입력하는 부분이 나오는데, 특별히 맨처음 Origin Domain Name 부분에는 이미 만들어 놓은 S3 버킷을 선택하면 된다. (미리 말을 하진 못했지만, s3 버킷 생성이 우선입니다. 제 계정에서는 버킷이 이미 만들어져 있었습니다.)

• 입력할 곳을 전부 채우고 난 뒤, Create Distribution 을 클릭한다.

• Error Pages 탭을 눌러 Create Custom Error Response를 눌러준다.

• react app 은 CSR 으로 하나의 index.html 파일만 있기 때문에 에러 페이지 작업을 해줘야 한다. 그렇지 않으면 Access Denied 에러가 나오게 된다.

• 다음과 같이 설정해준다.
• 마찬가지로 404 에러도 만들어 준다.

4. s3 버킷의 권한을 설정한다.

• 버킷에 들어가 - 권한 - 버킷 정책 의 편집을 클릭한다.

{
    "Version": "2021-05-18",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::youngjunkim-etc/*" // 이 부분은 여러분의 버킷으로 수정하면 됩니다.
        }
    ]
}

AWS공식버킷권한설정 을 참고하면 IP에 따라서도 권한을 제어하는 법을 찾을 수 있다.

이렇게하면 AWS 에서 할 수 있는 설정을 하게 되었다.

5. 리액트 프로젝트에서 빌드하여 업로드

package.json에 있는 scripts 코드에 syncs3:prod,invalidate:prod,upload:prod 를 추가했다.

배포시에는

$ yarn upload:prod

위와 같이 입력하면 된다.

코드에 대해 설명을 하면,
1. yarn build 를 먼저 하고 나면 빌드된 /build 폴더가 생성된다.
2. syncs3:prod 가 실행된다. ./build 폴더를 s3버킷인 s3://youngjunkim-etc 에 업로드 한다.
3. invalidate:prod가 실행된다. --distribution-id 는 클라우드 프론트를 만든 ID 를 입력하면 된다.

 "syncs3:prod": "aws s3 sync ./build s3://youngjunkim-etc/",
 "invalidate:prod": "aws cloudfront create-invalidation --distribution-id E********* --paths  \"/*\"",
 "upload:prod": "yarn build && yarn syncs3:prod && yarn invalidate:prod"

6. 배포

• yarn upload:prod 를 하게 되면
  • 윈도우 에서는 aws 가 없다고 나올 수 있다. 그땐 cmd 에서 해당 프로젝트로 이동 한뒤, 입력해보면 될것이다. VScode 에서는 aws 를 인식 못해서 그런가보다.
  • macOS 에서는 잘 됨.

• 배포를 하고 난 뒤, 해당 주소로 들어가 보면 확인할 수 있다.

배포확인