원래는 server side rendering을 공부할 겸 lambda를 활용하여 server side rendering을 구현하려 했으나 다음과 같은 이유에서 s3 static web hosting으로 방법을 변경하였다.

1. node의 무식하게 많은 module들 관리가 번거롭다.
일반적으로 labmda에 deploy하게 되면 그 많은 module들이 다 올라가게되고 이는 lambda가 trigger 될 때 무거워지는 요인이 되며 개발한 내용을 갱신할 때 마다 많은 부담이 된다.
그렇다고 이 모듈들을 s3로 해서 연동한다던지 하기에는 모듈을 불러오는 시간이 길어질 것 같아서 비효율적이라고 판단했다.
사람들의 다양한 방법들도 보았는데 솔직히 그 구성에 비해 메리트가 알기 어려웠다.
client side rendring보다 반응이 느린 SSR이 될 것 같은 예감!

2. 사실 static web + apigateway로 구현에 전혀 불편함이 없다
그리고 가볍다!

3. 무엇보다 cloud9의 preview기능을 ssr방식으로는 사용할 수 없다
프론트를 짜는데 실시간 preview 없이 짜기는 너무 힘들고 필요할 때 마다 deploy를 할 수도 없는 노릇이다.
근데 serverless offline으로 구현한 환경은 cloud9의 preview에 포트가 안잡히는지 뭔지 preview가 불가능했다

결국 목적이 개인 Mixcloud를 만드는거라면 그거에 충실한 가장 간단한 방법을 사용하기로 했다.

1. Static webpage hosting이 가능한 s3 버킷 만들기

이름 뒤에는 임의의 문자열등을 붙이는게 여러가지로 보안에 좋다
그럴싸하게 하다가는 트래픽 폭주당해서 비용폭탄이 발생할 수 있습니다
이후 생성할 때 대문자가 들어가 있어서 소문자로 변경하였습니다.

우리는 공개할 웹사이트를 만드는 것이기 때문에 버킷내부의 파일들에 대해 외부에서 접근을 허용해야한다.
그러므로 block public access를 풀어줘야합니다

다음으로는 policy를 작성해줘야합니다.
access는 가능하다했지만 그 파일을 볼 수 있다고는 하지 않았기 때문에 해당 파일의 열람을 허용하는 policy작성이 필요해집니다.
Bucket policy의 Edit을 눌러 다음과 같은 Policy를 추가합니다,

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "버킷의 ARN을 복사하여 여기에 붙여넣기/*"
        }
    ]
}

마지막으로 Properties -> 쭉 내려서 Static website hosting 으로 들어가서 Enabled를 합니다.

Index document는 해당 url로 들어갔을 때 가장먼저 보여질 html파일 Error document는 에러발생시 보여질 파일입니다.
우선 Index document를 index.html로만 설정하겠습니다.

이후 필요에 따라 다른 설정들은 바꿔주시면 됩니다.

이걸로 S3는 준비 끝!

2. react웹페이지 올리기

써본 사람들은 익숙할 다음 명령어를 사용하여 default react app을 만들겠습니다.

npx create-react-app test

create-react-app 명령이 가능한 환경에 대해서는 우선 넘어가겠습니다.

project 생성이 완료되면 npm run build 명령을 사용하여 해당 프로젝트를 build 해줍니다.

build를 하면 해당 폴더 안에 build라는 폴더가 생깁니다.

build폴더 내부의 파일들을 s3 bucket의 root디렉토리에 올려주면 됩니다.
저는 다음과 같은 명령을 사용하여 upload하였습니다.
aws s3 sync ./build s3://staticwebtestbucket-4156165156fdass/

저는 다음과 같은 push.bat 파일을 만들어두고 갱신을 하기로 했습니다.
aws cli 관련 설정도 원래라면 설명을 해야했는데 이 부분도 누락되었군요
다음에 기회가 있으면 적어보도록 하겠습니다

npm run build
aws s3 sync ./build  s3://staticwebtestbucket-4156165156fdass/

다음과 같이 upload가 완료되었습니다.
이제 properties -> Static website hosting으로 가면 나와있는 url을 접속해봅시다.

성공!

다음 글 부터는 만들면서 마주하는 다양한 문제들에 대해서 모아서 모아서 하나하나 돌아보도록 하겠습니다.