AWS S3로 React 배포하기
시작하며...
사실 AWS에 대한 두려움이 있었다ㅋㅋㅋㅋ😨
전에 1년 프리티어 기간이 끝나고 나서 생성해 둔 EC2, RDS 때문에 금액에 부과되었다... 다행히 고객센터를 통해 일부분 환불 받을 수 있었지만, 이런 경험 때문에 AWS를 사용하는 게 무섭다ㅠㅠ! 라는 편견이 생겼다.
하지만 최근(?)에 AWS Amplify로 풀스택 개발을 하게 되었으며, AWS의 다양한 자원인 DynamoDB, Cognito, CloudWatch 등을 사용하게 되면서 그 두려움과 편견을 극복할 수 있게 되었다.
어려워 보이는 UI 때문에 진입장벽이 있었으나 막상 사용해 보니 생각보다 유용한 기능들이 많았고 이를 이해하고 나니 매우 편리하였다.
그러다 문득..! React 웹 어플리케이션을 Vercel이 아닌 AWS를 사용해 배포해보고 싶다는 생각을 하였고, 이번에 도전해 보게 되었다!
AWS S3로 React 배포하기
AWS S3(Simple Storage Service)란?
AWS S3로 React 웹 어플리케이션을 배포할 것이다. S3는 주로 이미지와 같은 정적 파일을 저장하고 제공하는데 특화된 서비스이다.
React는 클라이언트 사이드 애플리케이션으로 HTML, CSS, JavaScript와 같은 정적 파일을 실행하는 방식이기 때문에 AWS S3로 배포하는 것이 적합하다. 즉, 서버나 백엔드 없이 클라이언트에서 직접 실행되므로 정적 웹 호스팅 서비스에 배포한다.
(그래서 서버 사이드로 동작하는 Next.js는 서버가 필요하기 때문에 S3에서 배포하면 안 된다!)
1. 빌드하기
React로 작성된 코드들은 JSX 문법으로 되어있다. 이러한 문법은 웹 브라우저가 그대로 해석할 수 없다. 그래서 순수한 JavaScript 코드로 변환을 해야 한다.
그래서 웹 브라우저가 해석할 수 있도록 순수한 JavaScript로 변환해 주는 "빌드"를 해야 한다.
빌드 명령어
아래 명령어를 입력하면 빌드를 하게 된다.
npm run build
빌드 결과물
dist 폴더에 빌드된 결과물이 담기게 된다. (참고로 vite로 만든 프로젝트)
2. 정적 파일 테스트
빌드된 결과물이 잘 실행되는지 로컬에서 웹 서버를 실행해보아야 한다. 이때 serve를 사용하여 간단한 서버를 실행해서 확인할 수 있다.
serve 명령어
참고로 빌드된 결과물이 dist 폴더 내에 있으므로 아래와 같은 명령어를 입력해 준다.
그러면 dist 폴더 안에 있는 파일을 로컬 서버에서 테스트할 수 있게 되어, 배포 전에 최종 결과물을 미리 확인할 수 있게 된다.
npx serve dist
참고로 같은 인터넷에 접근 중이면 IP 주소를 통해 해당 애플리케이션에 접근할 수 있다.
3. S3 버킷 만들기
참고로 버킷이란 S3에서 파일을 모아 두는 큰 단위이다.
가장 먼저 오른쪽에 "버킷 만들기" 버튼을 클릭한다.
버킷 이름을 작성해 준다.
(만약 배포된 사이트에 도메인을 적용하기 위해서는 버킷 이름을 도메인 이름과 동일하게 작성해야 한다.)
모든 사람들이 배포된 사이트를 볼 수 있어야 하므로 "퍼블릭 액세스 차단 설정"을 아래와 같이 체크한다.
이제 맨 하단에 있는 "버킷 만들기" 버튼을 누르면 버킷이 생성된다.
4. 정적 웹 사이트 호스팅
생성된 버킷을 클릭하고 속성 탭에 들어와 맨 아래로 스크롤한다. 그러면 "정적 웹 사이트 호스팅"이 보이며 "편집" 버튼을 눌러준다.
활성화를 눌러 활성화시켜준다.
인덱스 문서를 index.html로 지정하고, 오류 문서에는 파일이 없는 경로로 접근했을 때 보여 줄 HTML 파일을 설정할 수 있는데, 이때 기본 페이지로 가도록 index.html로 설정하였다.
맨 하단에 있는 "변경 사항 저장" 버튼을 눌러준다.
5. 버킷 정책
다음으로 권한 탭에 들어와 권한을 설정해 주는 "버킷 정책"의 "편집" 버튼을 눌러준다.
"정책 생성기"를 통해 정책을 간단하게 생성할 수 있다.
그전에 "버킷 ARN"을 미리 복사해 둔다.
Step1에서 S3를 선택한다.
Step2에서 모든 사람들이 S3 파일을 읽을 수 있도록 Principal에 * 을, Actions에서는 GetObject(파일을 읽어올 수 있는 권한)를, ARN엔 위에서 복사한 ARN에 /* 를 뒤에 붙여 모든 파일에 정책을 허용할 수 있도록 한다.
"Add Statement"를 누르고, "Generage Policy" 버튼을 눌러 정책을 생성해 준다.
그러면 JSON 형태의 정책이 만들어진다. 이를 복사하여 정책에 붙여 넣고 "변경 사항 저장" 버튼을 누른다.
6. 빌드 파일 업로드
객체 탭에서 "업로드" 버튼을 눌러, 위에서 빌드한 폴더에 있는 내용들을 모두 업로드해 주면 된다.
이러면 업로드가 된 것이다!
7. 배포된 프로젝트 접속
속성 탭에 들어와 아까 설정한 "정적 웹 사이트 호스팅" 부분에 "버킷 웹 사이트 엔드포인트"가 생긴 것을 확인할 수 있다.
해당 주소에 접근하면 우리가 생성한 React 웹 애플리케이션이 배포된 것을 확인할 수 있다!
마치며...
사실 S3로 정적 배포를 했다고 끝난 것이 아니다!!
잘 보면 배포된 주소는 http인 것을 확인할 수 있다. 그래서 https를 사용하기 위해서는 CloudFront를 사용해야 한다. (이건 나중에...)
그리고 매번 귀찮게 파일을 업로드해서 배포하는 과정이 배우 번거롭다.. 그래서 GitHub Action를 사용하여 자동으로 빌드하고 배포되도록 해볼 것이다.. (이것도 나중에...)
사실 도메인 연결도 해보고 싶다... (이것도 나중에...)
그리고 Next.js도 AWS로 배포해보고 싶다... (이것도 나중에...)
왜 이렇게 해보고 싶은 게 많지.. 나중에 천천히 해봐야지 😆
아무튼 두려웠던 AWS를 극복할 수 있게 된 것 같다.. 다음에 위에서 말했던 것을 시도해보고 싶다!