리액트 앱 AWS S3, CloudFront 에 배포하기
이번 튜토리얼에서는 리액트 앱을 AWS S3 에 배포하고 CloudFront 를 통하여 CDN 에 태우는 방법을 알아보겠습니다.
우선, CRA 를 사용하여 프로젝트를 만들어주겠습니다.
$ create-react-app sample-deploy
그리고, 이 프로젝트를 yarn build (혹은 npm run build) 명령어를 입력하여 빌드를 해줍니다.
$ cd sample-deploy
$ yarn build
yarn run v1.7.0
$ react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
36.71 KB build/static/js/main.61911c33.js
299 B build/static/css/main.c17080f1.css
The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:
"homepage" : "http://myname.github.io/myapp",
The build folder is ready to be deployed.
You may serve it with a static server:
yarn global add serve
serve -s build
Find out more about deployment here:
http://bit.ly/2vY88Kr
✨ Done in 6.39s.
이런 식으로 빌드가 완료 되겠지요?
build 디렉토리에 리액트 앱이 빌드되어있을텐데요, 이를 S3 에 올려봅시다!
IAM 에서 권한 설정 및 CLI 설정
우리는 터미널을 통하여 스크립트로 S3 에 우리의 프로젝트를 배포할건데요, 이를 수행하기 위해선 AWS 에서 권한 설정을 해주셔야합니다.
우선 AWS 에서 IAM 을 검색하여 IAM 페이지에 들어가세요.
그 다음엔, 사용자 추가를 합니다.
사용자 이름을 원하는 이름으로 설정하시고 하단의 프로그래밍 방식 액세스를 체크해주세요.
그리고 기존 정책 직접 연결을 선택후 S3 를 검색해서 AmazonS3FullAccess 를 체크하세요. 이 권한은 S3 의 모든 사용권한을 부여해줍니다.
다음으로 넘어간 다음에, 사용자 만들기를 누르면 다음과 같이 액세스키가 만들어집니다.
여기서 .csv 다운로드 를 누르셔서 아주 안전한 곳에다가 저장해주세요.
AWS CLI 설치
그 다음엔 AWS CLI 를 설치하세요. 이 도구를 설치하면 명령어를 통하여 AWS 관련 작업을 처리 할 수 있게 됩니다. 설치 방법은 AWS Command Interface 설치 매뉴얼을 참고하시길 바랍니다. 운영체제마다 방식이 다르니 좌측에서 여러분이 사용하는 운영체제를 선택해서 진행해주세요.
유저 추가
설치를 완료하셨다면, CLI 를 통하여 유저를 추가하세요.
$ aws configure --profile sample-deploy-s3
AWS Access Key ID [None]: AKIAIGLC3EVKE3Z4JKWA
AWS Secret Access Key [None]: 비밀이에요비밀아까전에받은키여기에입력해요그리고이건다른사람한테절대로노출되면안돼요
Default region name [None]: ap-northeast-2
Default output format [None]: json
이제 CLI 관련 설정은 모두 다 되었습니다!
S3 설정하기
이제 우리의 프로젝트를 올릴 S3 관련 작업을 해주겠습니다!
S3 버킷 생성하기
우선 S3 버킷을 생성하겠습니다. S3 를 검색해서 S3 관리 페이지로 이동하세요.
그리고 버킷 만들기 버튼을 누르세요.
그리고 다음과 같이 버킷 이름을 입력하고 다음을 누릅니다. 버킷 이름은 고유해야하니, 여러분의 서비스명을 넣어주거나 앞부분에 고유적인 무언가를 넣어주시길 바랍니다. (예를들어 sample-deploy 라고만 입력하면 중복된다면서 오류가 발생할것입니다)
그리고, 아래 화면이 나타날때까지 계속 다음을 누르세요.
만들고 나서 생성된 S3 를 목록에서 클릭하면 다음과 같은 화면이 나타납니다.
S3 에 익명 사용자에게 읽기전용 권한 부여하기
우리가 만든 S3 버킷에 익명 사용자들이 파일들을 조회 할 수 있도록 권한을 설정해주겠습니다. 참고 링크
우선 상단의 버킷 정책을 클릭하세요.
그 다음엔 다음과 같이 입력해줍니다.
{
"Version":"2012-10-17",
"Statement":[
{
"Sid":"AddPerm",
"Effect":"Allow",
"Principal": "*",
"Action":["s3:GetObject"],
"Resource":["arn:aws:s3:::vlpt-sample-deploy/*"]
}
]
}
위에 vlpt-sample-deploy 라고 적혀있는 부분엔 여러분의 s3 버킷 이름을 적으세요.
입력 후에는 저장을 누르세요. 위에 경고가 나타나게 되는데 이는 정상적입니다.
그 다음에는 속성 탭에 들어가서 정적 웹 사이트 호스팅을 누르세요.
그리고, 인덱스 문서와 오류 문서는 index.html 으로 입력하고 저장을 하세요. 그리고, 이 화면에서 엔드 포인트 주소가 나타나는데, 우리가 S3 에 파일들을 올리면 이 링크로 조회 할 수 있게됩니다.
배포하기
이제 AWS 를 통하여 배포를 하려면 프로젝트 디렉토리에서 다음 명령어를 입력하시면 된답니다.
$ aws s3 sync ./build s3://vlpt-sample-deploy --profile=sample-deploy-s3
배포할때마다 이 명령어를 입력하기는 번거로우니까 다음과 같이 package.json 에 스크립트로 추가해두면 편합니다.
package.json 중 scripts 섹션
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"deploy": "aws s3 sync ./build s3://vlpt-sample-deploy --profile=sample-deploy-s3"
}
그럼 이제 yarn deploy (혹은 npm run deploy) 라고 입력하면 됩니다.
CloudFront 설정하기
아직 다 끝난게 아닙니다. CloudFront 를 사용하여 S3 의 파일들을 CDN 에 태워줌으로서, 다음 장점들을 챙길 수 있습니다.
- S3에 커스텀 도메인 + HTTPS 지원
- CDN 을 통한 더 빠른 페이지 응답속도
만약에 여러분들이 CloudFront 를 사용하지 않을거라면 이 튜토리얼의 하단부 PUBLIC_URL 설정하기 로 넘어가세요.
이번엔 AWS 에서 CloudFront 를 검색하세요
CloudFront 페이지에 들어가서 Create Distribution 버튼을 만드세요 (아직 이 부분은 한글화가 안되어있습니다.)
그리고, Web 쪽의 Get Started 를 누르세요
Origin Domain Name 쪽을 선택하시면 우리가 만들었던 S3 버킷 정적 호스팅 주소가 보일것입니다. 해당 이름을 누르시고, 그리고 하단 쪽 Viewer Protocol Policy 에서는 Redirect HTTP to HTTPS 를 선택하세요. 그리고 쭉 내려서 Create Distribution 을 누르세요.
그러면 이렇게, In Progress 라고 뜨는 항목이 보일 것입니다. 보통 약 15분 ~ 30분 걸려야 CloudFront 생성이 완료 됩니다. 저기에 보이는 d34mxf1sfh85ol.cloudfront.net 형식의 주소가 CDN 이 적용된 주소입니다.
만약에 여기에 여러분들의 도메인을 연결시켜주고 싶다면 ID 를 클릭해서 General 탭의 Edit 버튼을 눌러서 설정하시면 됩니다.
다음 이미지는 실제로 CloudFront 에 커스텀 도메인을 적용한 설정 예시입니다.
그리고 Route 53 에서는 이런식으로 설정되어있습니다.
캐시 Purge 하기
CDN 을 사용한다면, 만약에 프로젝트에 업데이트가 발생했을 때 기존에 CDN 에 퍼져있는 파일들을 새로고침 해주어야 합니다. 해당 작업을 처리하기 위해선 Purge, 혹은 Invaldiation 이라는 작업을 해주어야 합니다. CDN 에 퍼져있는 파일을 제거처리함으로서 새로 받아오게끔 하는것이죠.
이를 하려면 우선 우리가 이전에 만들었던 계정에 CloudFrontFullAccess 라는 권한도 추가해주어야 합니다. IAM 에서 우리가 만들었던 계정에 다음과 같이 권한을 추가하세요.
이제, AWS CLI 로 해당 CloudFront 의 앱 정보를 날려주려면 다음 명령어를 사용하면 됩니다.
$ aws cloudfront create-invalidation --profile=sample-deploy-s3 --distribution-id E17X9MK8ZOCOCW --paths / /index.html /error.html /service-worker.js /manifest.json /favicon.ico
distribution-id 는 CloudFront 에서 보여지는 ID 값을 넣어주면됩니다.
그럼, 이것도 script 로 추가해주면 좋겠죠?
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"deploy": "aws s3 sync ./build s3://vlpt-sample-deploy --profile=sample-deploy-s3",
"invalidate": "aws cloudfront create-invalidation --profile=sample-deploy-s3 --distribution-id E17X9MK8ZOCOCW --paths / /index.html /error.html /service-worker.js /manifest.json /favicon.ico"
}
이제 프로젝트 빌드 후 배포 할 때 이렇게 하시면 됩니다.
$ yarn build && yarn deploy && yarn invalidate
만약에 한꺼번에 명령어를 실행하고 싶으시다면 npm-run-all 이라는 도구가 있으니 참고하세요.
PUBLIC_URL 설정하기
이 작업은, 만약에 여러분의 서비스 도메인과 리액트 앱이 제공될 도메인이 다른 경우 (예를들어 라프텔에서는 서비스 도메인은 laftel.net 이며 리액트 앱 관련 파일은 cdn.laftel.net 이라는 주소로 제공되고 있습니다.)
그런 경우엔! 프로젝트의 루트 디렉토리에 .env 파일을 만들어서 PUBLIC_URL 을 설정하시면 됩니다.
.env
PUBLIC_URL=https://cdn.yourdomain.com/
다른 환경 변수들도 확인하고 싶다면? Advanced Configuration 을 확인하세요.
만약에 여러분들이 S3 만 사용하고 CloudFront 는 사용하지 않는다면 다음과 같이 작성하면 됩니다.
PUBLIC_URL=https://vlpt-sample-deploy.s3.ap-northeast-2.amazonaws.com/
우리가 만들었던 정적 웹사이트 호스팅 주소가 아닌, [s3-bucket-name].s3.[region].amazonaws.com 형식의 주소입니다. 이렇게 하는 이유는, 우리의 정적 웹사이트 호스팅 주소는 HTTPS 지원이 되지 않는 반면 이 S3 형식의 주소의 경우 HTTPS 지원이 되기 때문입니다.
정리
이번 튜토리얼에서는 S3 에 리액트 프로젝트를 배포하는 흐름을 알아보았습니다. 또 다른, 조금은 복잡하지만 체계적인 배포흐름 중에선 CircleCI 혹은 Jenkins 를 사용하는 방법이 있습니다. 이에 대해선.. 나중에 기회가 된다면 다뤄보겠습니다.
이에 관하여 참고할만한 좋은 자료들은 하단에 참고 문헌에 포함시키겠습니다.