배포? 그냥 올리면 되는거 아님? 이라고 생각했던 나는 일주일을 삽질을 하게됩니다..

첫번째 계획

netlify+lightsail 조합

문제

lightsail에는 잘 배포가 되었으나 netlify는 아래와 같은 화면이 계속 렌더링 되었습니다.

해결노력

_redirect 파일을 작성하였으나 해결되지않음, netlify.toml파일을 작성하였으나 동일한 증상나타남.
netlify를 사용한 사람들의 증상을보면 보통 첫화면은 렌더링되고 기능을 작동시켰을때 문제가 발생하였으나 나의경우는 첫화면부터 문제가 발생하였습니다.
콘솔창을 들어가서 빌드를 보면 빌드는 제대로 되는듯합니다.

결론

배포 플랫폼을 옮겨보자.

두번째 계획

vercel+lightsail 조합

이전 문제에 대한 해결 : 여기서 해결할 수 있었습니다.

드디어 에러가 떳습니다.


로컬에서 개발할때는 첫번째 사진과 같이 파일이름을 설정해주었었는데 제가 중간에 파일 이름을 바꾸었는지 깃헙에서는 두번째 사진과 같은 파일이름으로 설정해주었습니다.
이 문제를 해결하니
첫화면은 렌더링되었습니다.

문제

찾아보니 https에서 http 접근이 안된다합니다. 이걸 해결하려면 서버측에서
1. 도메인을 산다.
2. 연결한다.
3. 서버측에서 내가 리눅스 명령어로 snap과 nginx를 사용해서 let's encrypt 인증을 받는다.
일듯합니다.
자료가 많으면 시도해볼법한데 한편으론 서버측에서도 vercel이나 netlify처럼 https를 지원하는 배포 플랫폼을 좀 더 찾아보기로 합니다.

세번째 계획

vercel+cloudtype 조합

찾았습니다. https로 백엔드 배포를 지원하는 플랫폼을! 하지만 아니나 다를까 이런문제가 발생했고 이용문의를 남겨보니 이런문제가 발생했습니다. 이전에 lightsail에선 발생하지않던 문제가 발생했습니다.

문제

이 문제를 해결하기위해 공식문서를 뒤적거리다보니

이러면 나중에 기능추가도 힘들어 보였습니다. 또한 이러면 pm2나 forever는 어떻게 설치해야하는것인가.. 막막해보였다. pm2나 forever는 터미널을 통해 설치할텐데 말입니다.
그리고 이용문의쪽을 주루룩 훑어보니

배포를 한다해도 정상적인 채팅기능을 만들긴 힘들어보였습니다. 사실 이런 플랫폼을 처음써보며 느낀점은 올리기만 쉽고 작동하게 하는건 다똑같이 어려운듯했습니다.

결론

플랫폼을 또 옮기자.

네번째 계획

s3+cloudfront+ec2 조합

사실 배포!하면 제일 처음생각나는 조합이긴하였으나 너무 어려워보였기에 다른플랫폼을 사용할려고 하였으나 돌고돌아 여기로 왔습니다. 여기는 어려워보이긴해도 자료가 가장 많은방법입니다.

1. route53에서 ssl인증까지 받기
2. ec2 올리기.
3. 대상그룹설정
4. 로드밸런서 elb연결
5. react파일 빌드후 s3올리기
6. cloudfront올리기
7. route53에서 api랑 연결하기

이렇게 설정하였습니다. 사실 방법자체가 복잡하긴해도 자료가 많아서인지 각각의 방법별로 에러는 잘 발생하지않았습니다.

성공!😁

이런 아키텍처의 프로젝트가 완성되었습니다.
.
.
.
프리티어라고해서 했는데 route53과 aws waf는 과금이 되는듯해보였습니다.