AWS 에 Reactjs 빌드 후 배포하기

1. Reactjs 빌드하기
2. AWS CLI 를 이용해 S3 버킷으로 업로드하기
3. package.json 편집하여 빌드 즉시 업로드 설정하기

1. Reactjs 빌드하기

리액트가 잘 실행되면, 터미널에서 실행 중인 프로젝트를 CTRL + C 로 스톱한다. 바로 이어서 yarn build 명령으로 빌드한다. [그림1.1]

프로젝트 폴더 내부에 build 폴더 내부에 빌드된 결과가 있다.[그림1.2]

 

※ 주의사항

React 에서 npm run build (yarn build)를 하지 않고 s3에 올리는 실수를 하기도 한다.

이 때 node module의 10만 개의 파일이 올라가면서, 프리티어이지만 AWS 과금이 발생할 수 있다. [그림1.3]

 

[그림1.1]

[그림1.2]

[그림1.3]

2. AWS CLI 를 이용해 S3 버킷으로 업로드하기

 

이제 AWS 를 통하여 배포를 하려면 프로젝트 디렉토리에서 다음 명령어를 입력한다. [....] 까지를 대체한다.

 

$ aws s3 sync ./build s3:/[그림2.1 적색글씨] --profile=sample-deploy-s3

 

 

[그림2.1]

 

3. package.json 편집하여 빌드 즉시 업로드 설정하기

만약에 이전에 생성한 사용자에서 엑세스키와 비번을 분실했을 경우에만 아래 방식으로 재발급 받는다. (분실하지 않았으면 할 필요 없는 구간이다 )

 

 

다음을 입력해야 한다.

aws configure --profile sample-deploy-s3

AWS Access Key ID [None]: 비밀보안

AWS Secret Access Key [None]: 비밀보안 Default region name [None]: ap-northeast-2 Default output format [None]: json

위 명령문을 실행한 화면이다.

 

배포가 성공했다면, 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 [그림2.1 적색글씨] --profile=sample-deploy-s3" 
     }

yarn deploy (혹은 npm run deploy) 라고 입력한다.

빌드 즉시 S3 버킷으로 업로드 된다.