6월 4일 - S3에 React 배포(정적 웹사이트)

오늘은 S3에 React 배포를 해보자. 그리고 앞으론 3시간 공부가 아니라 오늘의 목표를 끝내면 공부 끝, 못 끝내면 3시간 채우는 방식으로 해야지

 

S3에 React 배포

https://react-etc.vlpt.us/08.deploy-s3.html 를 참고해서 진행했다. 

다른 점은 따로 IAM 계정을 생성하지 않고 루트 계정으로 했다는 것, 

버킷을 만들 때 퍼블릭 액세스가 가능하도록 미리 설정을 했다는 것 정도

 

전체 과정

1. 앱 만들고 빌드하기

2. ASW S3에서 버킷만들기

3. 버킷 권한 설정

4. 정적 웹 사이트 호스팅 설정

5. S3에 파일 올리기

 

1. 앱 만들고 빌드하기 

아무래도 가장 쉬운 방식은 CRA를 사용한 방법이다. 

하지만 공부할 겸 CRA를 사용하지 않고 아래 링크를 참고하여 앱을 만들어 봤다.

https://medium.com/fbdevclagos/creating-react-apps-from-scratch-set-up-webpack4-for-a-react-project-ca0bb0517316

Creating react apps from scratch (Set up Webpack4 for a React Project)

위 링크와 다르게 설정할 부분이 있는데 package.json 파일이다. build 명령어를 추가해 줘야 npm run build를 입력했을 때 프로덕션 번들 파일 파일이 생기게 된다.

npm run build를 입력하면 dist 폴더에 bundlefile.js와 index.html이 생성되는데 bundlefile.js 파일을 살펴보면 내가 메인 페이지에서 보여주는 텍스트가 발견?되며, 

bundlefile.js

index.html 파일에선 bundlefile.js를 가져다가 쓰고있다.

index.html

빌드를 하면 이런식으로 파일이 생성되고, 결국엔 내 앱이 만들어 지는 듯하다. (맞겠지?) 

 

2. ASW S3에서 버킷만들기 

이제 S3에서 버킷을 만들어야 한다.

 

aws s3에 들어가서 버킷 만들기를 클릭한다 -> 이름을 짓고 '권한 설정'이 나올 때까지 다음을 누른다.

 

** 참고했던 글과 다른 부분이 나옵니당

참고했던 글에서는 계속 다음으로 넘기라고 했지만, S3가 바뀌었기에 계속 다음으로 넘기면 안 되고 '권한 설정'에서 바꿀 것이 있다.

그러니 아래와 같이 체크박스를 만들어 주고 다음을 누른다. 그리고 버킷 만들기를 클릭하면 버킷 생성은 끝

(만약 계속 다음으로 넘기게 되면 모든 퍼블릭 액세스가 차단되기 때문에 버킷의 정책으르 수정하여도 액세스가 거부된다.)

3. 버킷 권한 설정

버킷 목록에서 내가 만든 버킷을 클릭 -> 권한 탭 -> 버킷 정책 탭에 들어간다.

그럼 json 형식의 코드?를 입력할 수 있다. 아래 링크에서 '익명 사용자에게 읽기 전용 권한 부여' 항목을 참고하여 작성하면 된다. 

(참고로 아래 문서에서 빨간색으로 되어 있는 'examplebucket'은 우리가 만든 버킷의 이름을 의미한다.)

https://docs.aws.amazon.com/ko_kr/AmazonS3/latest/dev/example-bucket-policies.html 

버킷 정책 예제 - Amazon Simple Storage Service

4. 웹 정적 웹 사이트 호스팅 설정

이제 권한 탭에서 속성 탭으로 넘어간다. '정적 웹 사이트 호스팅'이라는 항목이 있는데, 클릭을 해보면 아래와 같이 뜬다.

앤드포인트는 이 사이트의 주소를 말한다.

내가 버킷에 넣은 index.html이라는 페이지가 엔드포인트로 들어갔을 때 메인 페이지로 뜨게 된다.

오류 문서는 오류가 발생했을 때 보여지는 페이지를 의미한다. 귀찮으니 그냥 index.html로 설정했다.

저장을 누르자.

5. S3에 파일 올리기

참고 문서에는 AWS CLI를 사용해서 S3에 버킷을 올렸으니 나는 S3 콘솔로 올렸다.

S3에서 생성한 버킷 클릭 -> 업로드 -> bundlefile.js, index.html 파일 업로드(다른 설정은 만지지 않고 모두 다음)

이러면 끝~~~

 

기타 

- 이렇게 구현한 홈페이지는 서버 사이드 렌더링이 불가능

- 만든 버킷은 바로 삭제하자. 

---

뭔가 3시간 단위에서 할일 단위로 바꾸니까 집중력이 더 강해진 거 같음, 오늘 공부할 게 쉬운 편이긴 했지만 그래도 금방 끝났다.

** 토요일에 할일은 서버사이드 렌더링 배우기