이번에 졸업작품으로 진행중인 스마트 세탁 사이트 배포 과정을 간단히 포스팅해보려합니다.
AWS S3에 대한 개념은 notion링크를 따로 걸어놓겠습니다.
AWS S3 notion link : https://www.notion.so/1-AWS-S3-f0a6b1740d9d4b4da05cdec0e0d158d1
1. 빌드
저는 react를 사용하여 스마트 세탁 웹 사이트를 작성하였는데 다른 SPA또한 같은 과정으로 배포하면 될것 같습니다.
먼저 react로 작성한 웹 앱을 빌드해줍니다.
터미널에서 yarn build를 통해 react앱을 빌드해주었습니다.
옆 쪽에 build 폴더가 생성되었을것입니다. 
build폴더를 열어보면 static 파일로 css와 자바스크립트파일이 빌드가 되어있습니다.
2. AWS S3
빌드가 된 것을 확인 한 후 아마존에 들어가서 로그인 해줍니다.
아마존 콘솔에 들어가 S3를 들어가줍니다.
빌드한 웹 앱을 업로드 해주기 위해 버킷을 생성해줍니다.
버킷이름에 자신이 원하는 버킷이름을 작성합니다.
버킷을 작성하였다면 속성에 들어가줍니다.
버킷을 작성하였다면 속성에 들어가 정적 웹 사이트 호스팅을 설정합니다.
인덱스 문서에 가장 뿌리가 되는 index.html을 작성하고 물론 자신이 설정한 html로 하는것이 원칙입니다.
오류문서에는 유저가 예기치 못한 요청을 했을 경우 에러를 나타내는 html을 작성하면됩니다. 저는 따로 오류 문서를 작성하지 않았기 때문에 똑같이 index.html로 작성하겠습니다.
속성에서 모두 작성이 끝났다면 권한에 들어가서 퍼블릭 액세스 자신이 원하는데로 설정을 해줍니다.
저는 퍼블릭 액세스를 열어 놓겠습니다.
다음으로는 버킷 정책 편집기에 들어가줍니다.
현재 편집기가 비어있는것을 확인 할 수 있습니다.
정책 생성기를 눌러 정책을 생성해줍니다.
정책 생성기를 누르면 위와 같은 화면이 나오는데 저는 S3를 사용할것이기 때문에 Step1에서 S3 bucket policy를 선택해줍니다.
Step2에서 pricipal에는 *을 해줍니다.
다음으로 Action에서는 객체를 얻어오는 getObject를 설정 해줍니다.
저는 객체만 가져와 사용하면 되기때문에 getObject로 설정하였습니다.
Principal reference: https://docs.aws.amazon.com/ko_kr/AmazonS3/latest/dev/s3-bucket-user-policy-specifying-principal-intro.html
마지막으로 ARN을 작성해줍니다. ARN은 arn:aws:s3:::<bucket_name>/<key_name> 포맷을 가지고 있습니다. 버킷이름에 위에서 작성한 버킷이름을 넣어줍니다. 저는 key_name을 따로 설정하지 않았기 때문에 *로 작성하겠습니다.
저의 ARN은 arn:aws:s3:::laudaryservice/* 입니다.
ARN reference: https://docs.aws.amazon.com/ko_kr/AmazonS3/latest/dev/s3-arn-format.html
Add Statement를 눌러 정책을 만들어줍니다.
정책을 만들어 생성된 Json파일을 정책 편집기에 삽입해줍니다.
자 모든 과정이 끝났습니다.
3. 업로드
위의 과정을 모두 완료하였지만 아마존 페이지에는 404가 나옵니다.
그 이유는 빌드한 파일을 아직 버킷에 업로드 하지 않아서 입니다. 하하
react로 빌드한 파일을 드래그 해서 업로드 해줍니다.
파일이 잘 업로드 된것을 볼 수 있습니다.
http://laudaryservice.s3-website.ap-northeast-2.amazonaws.com/
아마존에서 설정 해준 도메인으로 가면 잘 렌더가 된것을 확인 할 수 있습니다.
이상 AWS S3를 통한 웹사이트 배포를 마치겠습니다. ㅎㅎ
