[AWS] React 웹 AWS S3로 배포하기

먼저, IAM에서 유저 생성 후 AmazonS3FullAccess 권한 추가

Access key ID, Secret access key 발급 받은 후에 보관해놓고 S3로 이동한다.

 

S3로 들어가서 버킷 만들기 클릭 -> 버킷 이름(유니크하게)

 

 

ACL 활성화됨 체크

 

 

퍼블릭 엑세스 차단 체크 풀고 버킷 생성한다.

 

그 후 배포할 프로젝트 터미널에 npm run build 실행 -> build 폴더 생성

 

생성된 버킷 들어가서 업로드 클릭 -> 폴더 추가 -> 생성된 build 폴더 업로드

 

그 후 권한 탭의 버킷 정책 편집 클릭

{
  "Version":"2012-10-17",
  "Statement":[
    {
      "Sid":"AddPerm",
      "Effect":"Allow",
      "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::vlpt-sample-deploy/*"]
    }
  ]
}

Resource의 vlpt-sample-deploy 부분은 지우고 해당 버킷명을 적는다.

 

그 후 속성 탭 맨 아래 정적 웹 사이트 호스팅 편집 클릭 -> 활성화 체크 

하고 변경사항 저장하면 엔드포인트 주소가 생성된다. S3로 배포하면 이 링크로 접속할 수 있다.

---

배포하기

 

AWS CLI 설치한다.

aws --version

실행 후 aws-cli/~~~ 뜨면 정상 설치된 것이다.

 

aws configure --profile IAM유저이름
AWS Access Key ID [None]: 유저생성시발급받은액세스키
AWS Secret Access Key [None]: 유저생성시발급받은시크릿액세스키
Default region name [None]: ap-northeast-2 // aws region
Default output format [None]: json

터미널에 실행 완료 하면 CLI 프로파일 추가 완료.

 

aws configure list-profiles

CLI 프로파일 리스트 확인하는 명령어

 

aws s3 sync ./build s3://aaaa --profile=bbbb

// aaaa 부분엔 build폴더 업로드한 S3의 버킷 이름 작성
// bbbb 부분엔 생성한 CLI프로파일명 (IAM유저이름) 작성

배포할 프로젝트로 경로 이동 후 위 명령어 실행하면 배포가 된다.