AWS S3 셋팅2 S3 bucket에 build 폴더 올리기
안녕하세요. 저번에 작성한 'AWS S3 셋팅1'에 이어서 진행을 하도록 하겠습니다.
저번에 작성한 셋팅1의 마지막은 버킷을 만든 것입니다. 이제 이 버킷에 build한 프로그램을 넣어야 합니다.
 |
$ npm run build
위 터미널을 사용하면 React의 build를 진행할수 있습니다.
Build가 끝나면 'build'라는 폴더가 생긴것을 확인할수 있습니다.
이제 'myfirstbucketalex'에 들어가서 '업로드'버튼을 눌러줍니다.
방금 build폴더에 있는 모든 파일들을 드래그앤드롭해서 업로드로 옮겨줍니다.
bucket에서 해당 파일이 모두 인식이 됬는지는 파일명으로 확인이 가능합니다.
이제 '업로드'버튼을 눌러 S3버킷에 올려줍니다.
 |
| 업로드 진행중 |
 |
| 업로드 완료 |
 |
| S3 속성창 |
이제 정적 웹사이트 호스팅을 진행합니다. 오른쪽에 '편집'버튼을 눌러줍니다.
첫번째 '정적 웹 사이트 호스팅', '호스팅 유형'은 위 사진처럼 각각 '활성화', '정적 웹 사이트 호스팅'으로 정합니다.
두번째는 인덱스, 오류 문서에 각각 기본, 오류페이지는 작성합니다. React에서 기본페이지는 index.html입니다. 만약 오류가 생길시 다른 페이지를 게제할수 있습니다. 하지만 이거는 S3 버킷을 업로드 하는 방법을 알려주는 글이기 때문에 오류문서에도 똑같이 'index.html'이라고 하겠습니다.
 |
| 작성 완료후 '변경 사항 저장' 버튼 클릭 |
 |
| '버킷 웹 사이트 엔드포인트 생성' |
 |
| 403에러 출력 |
'버킷 웹 사이트 엔드 포인트' http에 들어가도 에러가 발생한 것을 알수 있습니다. 이는 권한설정을 안했기 때문에 발생한 문제입니다.
 |
| 권한 지정 |
이제 2가지 방법이 있는데 '정책 생성기'로 Policy JSON구문을 생성하여 넣는 방법과 직접 작성하는 방법이 있습니다. 만약 직접 작성하려면 아래 Policy JSON을 참고해 주시기 바랍니다.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::[버킷이름]/*"
}
]
}
위 사진대로 작성하고 'Add Statement'를 눌러주시기 바랍니다.
 |
Policy JSON 전체를 복사 |
 |
| Policy JSON값을 정책에 붙여넣기 |
 |
| 변경사항 저장 |
 |
| 적용 완료 및 페이지 출력(http) |
이로써 S3를 웹사이트에 올리는 방법에 대해서 작성을 하였습니다. S3에는 Front-Ended 자료들이 올라가며 서버(EC2)와 주로 연동이 됩니다. 이 내용은 차후에 다루도록 하겠습니다.
댓글
댓글 쓰기