> Week 6. 첫 배포 연습 !! 아자아자 👏
⚠️ SPA Routing
History API 기반의 SPA를 배포하기 위해선 404 에러 처리 옵션이 필요.
원인: 1개의 inex.html 파일에 여러 경로로 오기 때문에 index.html을 찾지 못해 404 에러 발생.
👉🏻 npx serve-s
👉🏻 플랫폼에서 설정
🍡 서버에서 직접 호스팅 (자유도 👍)
여러 클라우드 업체에서 제공하는 서버에서 직접 호스팅하는 방법
☺️ 장점
- 서버를 직접 빌려서 조작(?)하기 때문에 자유도가 높음.
- 호스팅 지식들이 높아지면 다른 툴과의 전환이 쉬움.
🥲 단점
인프라와 서버 관련 지식들이 필요해서 난이도가 높음.
🙄 종류
EC2: 아마존사
S3 + CloudFront: 아마존사 - 버킷
GCP (Google Compute Engine): 구글
Azure: MS사
Naver Cloud Platform: 네이버
Cafe24
iwin: 달에 3처넌 (쌈)
oracle
👉🏻 매달 비용이 발생. 일년 동안은 무료? 서비스가 있음.
IaaS (Intrastructure as a Service)
1. 아마존사의 EC2, S3 + CloudFront
S3 + CloudFront: 버킷(일종의 폴더)이란 공간에 정적 콘텐츠를 저장하여
인터넷을 통해 접근할 수 있도록 할 수 있는 서비스
S3에 올리는 것만으로도 클라우드 서비스를 사용 가능하다.
다만 url 등 실제 배포되는 부분과는 차이가 있기 때문에
CloudFront를 통해 유저 요청을 받으면 S3에서 꺼내는 형식으로 이루어짐.
CloudFront의 역할
- 404 오류 해결해줌
- 캐싱 기능으로 속도가 빠름
2. github pages
정적 페이지 올리기에 좋고 추상화가 잘 되어 있음. (그런가...? 🙄)
방법
- 기존 레포에서 branch를 하나 파기
- url depth가 하나씩 들어가서 기존 코드를 (많이...) 수정해야 함 ㄷㄷ - 레포를 파기
- 잘 모르겠음.
3. firebase
- 작은 규모 프로젝트에 유용. 트래픽 일정 규모 이상일 때 비용 발생
- 프로젝트 제한 개수: 20개?
GCP랑 firebase 차이가 궁금해져 찾아보니,
Firebase is Google's mobile development platform.
👉🏻 모바일 특화, CSR 특화
Google Cloud is a suite of cloud computing services.
👉🏻 backend & SSR 특화
인 것 같다....?
FaaS (Function as a Service)
장점:
- 소규모 프로젝트에서 유용.
- 추상화 레벨이 높아서 버튼 몇 개 누르면 배포 끝 ㅎ
- 도메인을 사지 않아도 그럴싸한 이름을 넣어준다 WOW
단점:
- 일정 프로젝트 규모 | 배포 시간이 넘어가면 비용 발생 (개인 프로젝트에는 상관 없...)
1. Netlify
- 완전 간단
- 명령어가 아닌 별도의 저장소랑 연결(ex. github)
2. Vercel
- Next.js(리액트 SSR 관련 프레임워크) 만든 회사
- UI 매우 깔끔
- ⚠️ Team 만들면 돈 나가기 때문에 조심
가장 고민이 되었던 3가지 선택지의 차이가 무엇일까...
Netlify, Vercel은 비슷해보이고 github page는 뭔가 복잡한데 무슨 장단점이 있을까?
Netlify | Vercel | github page 차이
Netlify와 Vercel은서버리스 플랫폼으로
AWS lamda 기반으로 작동하는 FaaS(Function as a Service)라 한다.
프로젝트를 함수 단위로 쪼개어 함수가 실행되는 횟수 | 시간만큼
비용을 지불하는 방식이다.
gitgub page는 우리가 아는 서버 호스팅 플랫폼.
IaaS(Intrastructure as a Service)로
서버 인프라를 공급업체가 제공하고 웹사이트를 배포시
24시간 코드가 돌아가는 방식이라 한다.
첫 배포하는 입장에선 FaaS가 더 직관적이고 추상화 레벨이 높아
Netlify로 시도해보자는 결론을 내렸다!
(Netlify가 하루 배포 시간 제한이 없어서 더 매력적)
아 근데 Netlify는 한국 서버가 없어서 살짝 느리다고 한다... ㅜ
Vercel로 급변경 ㅋㅋㅋㅋㅋㅋㅋㅋ
데헷 💕
🍡 꿀팁
- 각 서버가 어떤 인프라 레벨을 추상화한 것인지 알기
- 인프라 공부...?
- 배포를 하고 어떻게 운영을 했는지에 대한 경험 쌓기
- cross-site-scripting 방지하기
