Frontend 의 배포

Frontend에서 만든 페이지를 배포하여 올리는 방법에는 꽤 많은 방법이 있다고 한다. 나는 이 방법중에서 백엔드 (서버)에서 HTTP로 올리는지, HTTPS 로 올리는지에 따라 맞춰서 배포하기 위해 노력한다. FE와 BE를 http-http 또는 https-https 로 맞춰주어야 CORS 오류를 최소화 할 수 있다고 생각하기 때문이다.

물론 HTTP로 서버를 배포하고, 프론트엔드에서 HTTPS로 배포한 후 proxy sever를 이용하는 방법도 있지만, 개인적으로 이 방법은 사용하지 않는게 좋다고 생각하기 때문에 최대한 맞춰서 배포하기 위해 노력하고 있다.

HTTP 배포

내가 알고있는 방법은 크게 2가지 방법이 있다.

1. AWS EC2 배포 (GCP도 비슷하다.)

EC2의 ubuntu 환경에서 nginx를 통해 배포하는 방법이 있다. 이 방법으로 배포를 진행하면 url이 ip주소로 되어 보기가 좀 불편한 것 같다. 그리고 이것저것 설정해야할것들이 좀 많아서 많이 복잡하다.

탄력적 ip 적용이 서툴어서 초반에 1000~3000원 정도 지불했던 기억도 있다.

CRA와 Vite에 따라 build 를 진행할때 뱉어내는 파일과 경로가 조금씩 달라서 이 부분도 잘 생각을 해야하더라..

작년까지 열심히 사용했지만, 이제는 잘 사용하지 않는다.

2. AWS S3 bucket 배포

너무너무너무 간단하다. 그냥 local에서 build 파일 만들어서 던져주면 알아서 해준다. 대신 url이 조금 길어진다. http://{ service-name }.s3-website.ap-northeast-2.amazonaws.com/ 이런식으로 길어지게 된다. 그래도 편하잖아?

백엔드에서는 보통 사진같은 파일들을 S3에서 관리한다고 한다. 프론트엔드의 경우 주로 ‘정적 페이지’를 배포하기때문에 이와 비슷하게 배포하는 것 같다. (아닐수도..?)

(조만간 S3 배포 방법과 GIt Action을 활용해서 배포 자동화 구현방법을 정리해볼려고 한다!)

HTTPS 배포

정말 많은 방법이 있지만, 크게 3개만 소개해볼려고 한다.

1. Vercel 배포 (netilify도 비슷한 방법이다.)

Github 레포지토리만 등록하게 되면 알아서 배포를 해준다. 프론트엔드를 공부하는 주변 친구들끼리는 장난으로 ‘Vercel 딸깍’ 이라고 한다 ㅎㅎ

하지만 이번에 경험했는데, organization에 위치한 레포지토리를 배포할때는 Pro 버전을 지불해서 사용해야하는 것 같더라. 이럴땐 레포지토리를 Fork 해서 진행하면 되는데, 솔직히 좀 귀찮기도 하고, 뭔가 원본이 아니라 복사본 같은 느낌이라 좀 불편하다..

2. Github page 배포

옛날에 html 공부할때 많이 사용한 방법이다. 레포지토리에서 설정을 통해 간편하게 배포할 수 있다. 아직 React 로 만든 프로젝트에서는 경험해보지 못했다..

3. CloudFlare Pages

카카오 테크 캠퍼스에서 강사님이 소개해주셨던 방법이다. vercel이랑 비슷하게 Github 레포지토리를 등록해서 사용할 수 있다고 한다. 한번도 사용은 안했지만, 전체적으로 vervel과 비슷한 형태로 배포된다고 한다.

후기

항상 말하는건데, 정답은 없는 것 같다. 이것 저것 써보고, 왜 쓰는지? 왜 좋은지? 왜 불편한지? 하나하나 소화시켜보면서 정리하는 습관을 기르는게 좋을것 같다.