Today I Learn📖
- AWS s3 + cloudfront (강의)
- github pages (강의)
- Firebase (강의)
- Netlify (강의)
- Vercel (강의)
Project deploy
-
History API기반의 SPA를 배포하려면, 해당 서비스에서 404 에러에 대해 처리할 수 있어야함
ex) npx serve -s -
프론트엔드 Project deploy 방법
- 서버에서 직접 호스팅하기
-> 서버 업체에서 서버를 빌려서, 사용자가 서버 운영 체제 & 필요한 소프트웨어 등을 직접 설정해서 프로젝트 배포
=> 자유도가 높지만 난이도도 높음(서버랑 인프라 지식 필요) - 여러 클라우드 업체에서 제공하는 서버에서 직접 호스팅 하기
-> 매달 일정 금액을 내고 가상 서버를 빌려오는 것
ex) AWS - EC2, Google Cloud - Compute Engine, Microsoft Azure - Virtual Machines, ...
- 서버에서 직접 호스팅하기
AWS s3 + cloudfront
-
s3: 파일을 저장하는 웹 기반 저장소
-> html, css, js, 이미지 등의 파일 저장 (프론트엔드 코드는 별도 서버가 필요없어서 가능한 것)
=> 별도의 서버 없이 정적 웹사이트 호스팅하면 남들에게 공유 가능 -
cloudfront: AWS의 CDN(Content Delivery Network) 서비스- 서비스 사용자의 요청을 받아서 s3에 넘기면 s3가 서비스 제공
- 404 에러에서 HTTP 응답 처리 지원해줌
-> 모든 에러를 index.html로 반환하지 않기 위해서는Create Custom Error Response에서 404일 때만 처리하면 좋음 - s3 버킷에서 꺼내온 뒤 캐싱해두기 때문에 재요청시 속도가 빠름
github page
깃허브에 올린 코드로 정적인 사이트(html, css, js, ... 만 있으니까) 생성 가능
-
깃허브 레파지토리에
아이디.github.io를 생성한 뒤, 그 코드로 만들기 (추천) -
프로젝트에서 특정한 브랜치 규칙(gh-pages) 과 생성 방식을 따라 만들어서, 그 브랜치에서 생성
=> url:아이디.github.io/레파지토리명- url 뒤에 레파지토리명이 붙기 때문에, 코드에 작성해둔 url 경로와 안 맞을 수 있음 (코드에는 없으니까)
-> 별도의 환경 변수로 빼서 빌드할 때 처리되도록 수정 필요
아니면 도메인을 별도로 사도 됨 - 404 에러를 해결하기 위해
404.html을 만들고index.html을 똑같이 베껴 내용 채우면 됨
- url 뒤에 레파지토리명이 붙기 때문에, 코드에 작성해둔 url 경로와 안 맞을 수 있음 (코드에는 없으니까)
Firebase
- 구글에서 만듦, 일정 크기 넘어가면 과금이고 그 전까지는 무료, 개수 제한 있음
- 굉장히 다양한 API, 데이터베이스, 호스팅 등의 도구를 지원함 (인증에 sns 로그인 등 여러 기능 존재)
- 제공되는 도메인:
.web.app,.firebaseapp.com(커스텀 도메인 추가 가능)
// firebase.json
{
"hosting": {
"public": "project", // 필요에 따라 변경
"ignore": [
"firebase. json",
"**/.*"
"**/node_modules/**"
]
"rewrites": [ // 이 부분이 404 에러 처리하는 부분
{
"source": "**", // 모든 경로를
"destination": "/index.html" // index.html로 보낸다
}
]
}
}Netlify
-
배포가 쉽고 간편함 (배포의 추상화가 잘 되어있음)
-
GitHub,GitLab,BitBucket의 코드 저장소와 연동해서 코드 가져옴
-> 코드 변경되면 알아서 감지해서 자동으로 새 버전 웹사이트로 빌드 & 배포 -
처음에는 단어들의 조합인 도메인 제공 (커스텀 도메인으로 변경 가능)
-
브랜치 선택해서 배포 가능 (디자이너, 기획자들과 협업에 유용)
-
한국 서버가 없어서 서비스 접속이 느림
-
404 에러 해결법
=>_redirects라는 파일 추가하면 됨
Vercel
-
역시 배포가 쉽고 간편함, 한국 서버 있어서 접속 빠름
-
Git등의 코드 저장소와 연동해서 코드 가져옴
- 개인 사용은 무료지만Create a Team해서 팀 만드는 건 유료임 ! 스킵 추천 ㅎ.ㅎ
- 사용한 프레임워크 선택하면 빌드 환경 맞춰줌, 빌드 옵션과 환경 변수 설정 가능 -
기본 도메인은
레파지토리명.vercel.app -
vercel에 브랜치 push 하면 배포됨 (브랜치 선택 배포 가능)
-
404 에러 해결법 중 하나
// vercel.json { "routes": [{ "src": "/[^.]+", "dest": "/", "status": "status": 200 }] }
😊오늘의 느낀점😊
여러가지 배포툴에 대해 알게되었다. 다 이름만 들어봤던 것들인데 훑어보는 시간이 되어서 유익했다 ! 그 중에 AWS는 UI가 친절하지 않아서 사용하려면 학습이 많이 필요할 거라고 하셨는데, 서비스 직접 들어가보고 바로 이해했다 ㅋㅋㅋㅋㅜㅜ
프론트엔드도 JS 코드만 잘 짜는 게 아니라 인프라 최적화에 대한 지식 필요하다는 말씀을 하셨다. 또, 코드를 짜서 로컬에만 갖고있을 게 아니라 서비스 운영 & 배포를 하는 것도 중요하다고 하신 것 꼭 새겨듣기 !!
