[AWS] React 앱 AWS에 배포하기


이번에 48wedding.com이라는 서비스를 만들고 있다. 만드는 과정에서 처음부터 혼자 만든 서비스는 꽤 있었는데, 배포까지 혼자하는건 처음이어서 그 경험을 공유해보려한다.

목차


  • S3에 호스팅하기
  • 서비스에 도메인 입히기

S3에 호스팅하기


먼저 커스텀 도메인을 호스팅하고 싶다면 도메인을 구매해야한다. 고대디, 후이즈, 예스닉, 가비아 등등에서 구매할 수 있다. .com 같은 경우는 보통 1년에 14,000원 정도 선에서 구매할 수 있다.

버킷 생성하기

도메인을 구했으면 S3에 버킷을 도메인 이름으로 생성한다. 이때 www가 달린 버킷도 함께 생성한다. 나 같은 경우는 48wedding.com 버킷과 www.48wedding.com 버킷을 함께 만들었다.

버킷 권한 설정하기

버킷의 Permissions에 버킷 policy에 가서 이렇게 적는다.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::48wedding.com/*"
        }
    ]
}

나 말고도 다른 사람들이 이 버킷의 내용을 받아갈 수 있게 하겠다는 내용이다. 그래야 사람들이 웹사이트를 볼 수 있다.

아. 버젼을 바꾸고 싶은 유혹에 빠질지도 모르는데. “하지말자”

버전은 특정한 버전이 정해져있는거라서 바꾸면 안된다. 자세한 내용은 나도 잘 모르지만. 바꾸지말자. 어차피 바꾸면 에러가 난다.

버킷에 앱 올리기

도메인 버킷에 웹팩 빌드한 폴더의 내용을 업로드 한다. create-react-app을 이용한다면 터미널에 npm run build하면 나오는 폴더를 이야기한다.

build 폴더의 내용만 올리면 된다.

버킷 프로퍼티 바꾸기

도메인 버킷의 프로퍼티에서 정적 웹사이트 호스팅을 ON하고 메인 페이지와 에러페이지를 모두 index.html로 한다. ( 이건 정말 엄청난 팁이다! 자세한 내용은 다음 포스팅에.. )

이제 www.가 달린 버킷의 프로퍼티를 정적 웨사이트 호스팅을 ON하고 redirct한다고 체크하자. redirect를 도메인으로 하면된다. (나같은 경우는 48wedding.com)

이렇게만해도 웹사이트는 오픈된다. <도메인>.s3-website.<리젼>.amazonaws.com으로 접속해보면 구동되는것을 확인할 수 있다.

나의 경우는 48wedding.com.s3-website.ap-northeast-2.amazonaws.com 이었다.

거의 끝났다. 엄청 단순한데 처음하는거라 엄청 헤메었다. 여러분들은 헤메지 마세요. 호구는 저 하나로 족합니다.

웹사이트에 도메인 입히기


이제 Route53으로 가자.

Hosted Zone 생성하기

도메인으로 Hosted Zone을 생성한다. (나의 경우 48wedding.com)

Alias 레코드 추가하기

해당 호스티드 존에 들어가서 create record set을 클릭하고 이름을 도메인(48wedding.com)으로, 타입을 A - IPv4 address으로 한다.

Alias를 yes로 하고 Alias Target을 s3도메인 버킷으로 하면된다.

CNAME 레코드 추가하기

create record set을 클릭하고 이름을 www.도메인(www.48wedding.com)으로, 타입을 CNAME 으로 한다.

다른건 건드리지 않고 value를 www.<도메인>.s3-website.<리젼>.amazonaws.com으로 한다.

이제 마지막 하나만 남았다.

네임서버 변경하기

도메인을 구입한 사이트에 가서 네임서버를 변경하자. Route 53의 호스티드 존을 생성하면 네임서버(NS) 4개가 배당되는데, 그 4개의 네임서버를 후이즈나 가비아 등등 자신이 도메인을 구입한 웹사이트에 도메인 네임서버설정에 적는다.

끝났다. 실제로해보면 엄청 쉽다. 물론 나는 하루종일 했다.ㅠ

마치며


한번설정해 놓으면 다음부턴 엄청 쉽다. 이래서 다들 AWS AWS 하는 구나 싶다.

나 같은경우는 별도의 설정을 더 해놔서 업데이트를 하면 배포하는데는 build파일을 만드는 시간밖에 안걸린다. 내가 쓰는시간은 1초도 안되는데, 이것도 나중에 소개해 보려한다.

배포에 대한 막연한 두려움이나 어려움이 있었는데, 하고나니까 크게 어렵지 않다.

물론 실제로는 여러가지가 덕지덕지 붙게 된다. 젠킨스나 트레비스 같은 툴도 사용하기도하고… 조금씩 공부하는걸로 하자.


2023년 새해에는 성장하고 함께하고 싶다면?

Pre A 단계 이상의 스타트업 C 레벨들이 모여서 커뮤니티를 만들었습니다. 같이 스터디하고 친해질 일잘러를 찾습니다.




© 2017. by isme2n

Powered by aiden