Project deploy - EC2 ~ Vercel

Project deploy - EC2

• 어떻게 배포를 하고 사람들에게 어떻게 보여줄 것인가.

• amazon, netlify, vercel, firebase, github pages 등이 있음.

• History API 기반의 SPA를 배포하려면 해당 서비스에서 404 error에 대한 처리옵션이 필요함. ex) aws의 Create Custom Error Response

• 놀고 있는 컴퓨터(?)에 서버를 연결해서 사용할 수도 있음.

배포 타입

• 서버에서 직접 호스팅하기 - 자유도는 가장 높지만 서버에 대한 많은 지식이 필요함.

• 여러 클라우드 업체에서 제공하는 서버에 직접 호스팅 하는 방법 - EC2, Azure, cafe24, iwin, oracle, naver cloud paltform, google compute engine 등등 있음.

AWS s3 + cloudfront

• s3 : HTML, CSS, IMG, video 등 파일을 보관할 수 있는 서비스. FE의 정적인 요소들이 가능함.

• cloudFront : 실제 접속을 받고, 받은 요청을 S3에서 꺼내 사용함 + SPA의 404 에러 해결 + 매번 파일을 꺼내오는게 아닌 하루동안 캐싱을 해놓기 때문에 속도가 빠름.

github pages

• 무료가 장점임.

• URL에 특정 워딩(ex. github.io)이 붙으면 라우팅 URL 조건을 다시 설정해주어야 함. 로컬 개발할 때 depth와 path가 들어갔을 때 depth가 일치하는지 확인하는 것도 있음. 따라서 배포할 때 포함되게 하는 방법도 괜찮음.

Firebase

• firebase hosting을 이용하여 배포 가능함.

• 배포 시 cmd 창에서 index.html을 찾는 문제를 해결할 것인지 등 여러 가지를 물어봄.

Netlify

• 배포가 간단하고 쉬움.

• 명렁어가 아닌 깃허브, 깃랩 등 레파지토리를 올릴 수 있음.

• 클릭으로만 배포 가능.

• SPA 404에러 해결 방법 : _redirects에서 /* /index.html 200를 포함시키면 됨, url 경로를 찾지 못하면 index.html로 돌리라는 뜻.

• 다만 한국 서버가 없음. 따라서 사이트 접속이 느림.

Vercel