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

react-router 사용할 수 있게하기

S3에 배포를 하면 특정한 도메인이 생기게 되는데, SPA이기 때문에 그 안에서 라우팅을 할 땐 잘 된다.

그러나 새로고침을 한다거나. URL을 입력해서 접속을 할경우 정해진 도메인이 아니라서 에러페이지를 보게된다.

이럴 때 해결할 수 있는 아주 간단한 방법이 있다.

에러페이지 설정

바로 S3의 정적호스팅의 에러페이지를 index.html(시작페이지와 같은파일)로 하는것이다.

싱글페이지 앱이기 때문에 에러페이지로 리다이렉트되어도 index.html이 라우팅을 해주게된다.

우리가 예상했던 페이지로 가는 아주 간단한 방법이다.

이 현상을 해결하기 위해 여러가지 프로그램적인 해결방법이 존재하는데, 에러페이지 설정으로 한방에 끝낼 수 있다.

AWS CLI

나의 경우는 s3cmd라는 CLI를 사용해서 배포한다. 몇가지 설정을 하면 npm 명령어로 한방에 빌드와 배포까지 끝낼 수 있다.

npm run build && s3cmd sync build/* s3://48wedding.com && echo 'Deployed!'

위와같은 명령어를 사용하면 된다.

배포가 엄청 쉬워졌다.

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

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