AWS S3로 리액트 배포하기

AWS는 클라우드 컴퓨팅 서비스이다. 컴퓨팅 자원을 비롯해 수많은 안정성 있는 서비스를 제공해 준다는 것이 장점이다. AWS S3를 이용하여 CRA로 생성한 리액트 프로젝트를 배포해 보았다.

AWS S3란?

AWS Simple Storage Service의 약자로 파일을 저장하고 인터넷으로 접근할 수 있게 해주는 서비스이다. 정적 웹 호스팅, 이미지 또는 파일 저장하는 용도로 사용한다. CRA로 생성한 프로젝트는 정적인 build 파일로 브라우저에서 접근할 수 있는 정적 웹사이트이기 때문에 S3를 이용해 배포할 수 있다.

1. S3 버킷 생성

2. npm run build 명령어 실행 후 생성되는 build 폴더의 하위 파일들을 객체에 업로드한다.
   
   

3. 속성 탭 정적 웹 사이트 호스팅 활성화

   권한 설정을 하지 않은 경우 403 Forbidden 에러가 뜬다.
   

4. 권한 설정

   {
       "Version": "2012-10-17",
       "Statement": [
           {
               "Effect": "Allow",
               "Principal": "*",
               "Action": "s3:GetObject",
               "Resource": "arn:aws:s3:::<버킷 이름>/*"
           }
       ]
   }

여기까지 진행한다면 빌드를 진행할 때마다 기존에 존재하는 객체를 삭제하고 새로 빌드 한 객체를 재업로드 해야 한다. AWS에서 제공하는 Command Line을 이용해서 이 과정을 자동화할 수 있다.

AWS CLI를 이용한 빌드 파일 업로드 자동화

aws에서 제공하는 Command Line을 설치하고 아래의 명령어로 설치 여부를 확인할 수 있다.

aws --version

aws cli를 사용하려면 보안 자격 증명에서 액세스 키를 발급해야 한다. 액세스 키는 발급 후 확인 불가능하기 때문에 .csv 파일을 다운로드하는 것이 좋다고 한다.

액세스 키를 발급받았다면 배포할 프로젝트 터미널에서 aws configure 명령어를 치고 발급받은 키를 입력한다.

완료 후 아래 명령어로 프로젝트에 설정한 버킷 정보를 알 수 있다.

aws s3 ls

기존에 존재하는 객체들을 삭제하고 새로운 빌드 파일을 업로드하는 aws 명령어이다. 다음 명령어를 package.json script에 deploy로 적용한 다음 사용했다.

aws s3 sync build/ s3://<버킷이름> --delete

“deploy” : npm run build && aws s3 sync 파일/ s3://<버킷 이름> —delete

하지만 자동화해주는 스크립트 배포도 aws config를 설정한 환경에서만 배포를 바로 진행할 수 있다는 단점이 있다. CI / CD 환경을 구축하면 이러한 단점을 보완할 수 있다.

느낀점

이전에 AWS를 이용해 배포할 때는 설정에 대한 궁금증을 가지지 않았다. 매번 배포할 때마다 블로그 글을 찾아보고 배포하는 것에만 집중했다. 확실하게 설정하는 이유를 알게 되니 기본적인 설정만 했을 경우의 AWS 배포는 스스로 할 수 있을 것 같다. 하지만 수많은 설정과 정책을 이해하고 작성하기에 한계가 있는 것 같다🥲 프론트엔드 배포에 많이 사용하는 S3, CloudFront, Route53 등 앞으로 내가 사용하게 될, 사용해야 하는 서비스에 대해서는 꾸준히 학습하고 적용해 봐야겠다.