프론트엔드에서 yarn dev로 실행하면 브라우저에서 localhost 주소로 접속해서 html, css, js를 다운받아서 브라우저에서 볼 수 있다. 👈🏻 지금까지 써온 방식
이렇게 하면 localhost에서 접속해야만 들어올 수 있다.(다른 사람은 접속 불가!)
예전의 배포 방식
다른 사람도 접속할 수 있게 하기 위해서 새 컴퓨터를 하나 구매하고, (내 컴퓨터로도 가능하지만, 하루종일 켜놔야 되니까 비용 절감을 위해서~) 구매한 컴퓨터에 `git clone > yarn dev`를 해놓으면 여러 사람이 접속해서 html, css, js를 다운받아갈 수 있게 된다.
사람들이 접속을 하면 요청에 대한 응답을 하고 접속자 체크 등을 위해 메모리가 사용되는데
사용량이 많아지면 평범한 사양의 컴퓨터라면 메모리가 부족해진다.
(참고: 빨리 처리하려면 CPU가 많아야 하고, 저장을 많이 하려면 메모리가 많아야 한다.)
메모리 부족을 해결하기 위해서 컴퓨터를 새로 더 구매해서 같은 방식으로 git clone > yarn dev
하면,
한쪽으로 몰리던 트래픽을 분산할 수는 있다.
하지만 이런 대응 방식으로는 사용자가 '갑작스럽게' 증가했을 때 바로 대응하기 어려울 것이다.
그래서!
컴퓨터를 굉-장히 많이 가지고 있는 회사들이 등장했다!
👉🏻 Cloud Provider
AWS가 사용량이 가장 많고 다음이 GCP이다.
이 회사들은 사용 요금을 받고 컴퓨터를 빌려준다.
이젠 실물 컴퓨터를 구매하는 것이 아니라,
빌릴 컴퓨터의 메모리를 설정하고, 운영체제를 선택(윈도우, 리눅스 등)하면 빌린 컴퓨터에 접속할 수 있게 터미널을 열어준다.
빌린 컴퓨터에 24시간동안 서버를 실행시켜 놓아 사람들이 접속할 수 있게 대기시킨다.
어떻게 선택하지?
보통 처음에 GCP를 사용하다가 서비스가 커지면 AWS로 옮겨간다.
기능은 거의 동일하나, GCP가 가격이 더 저렴하기 때문이다.
(AWS와 비교했을 때 70%정도의 요금이다.)
서비스가 커지면 AWS로 옮겨가는 이유는,
AWS가 더 오래되었기 때문에 AWS 전문가가 더 많아 채용 시 유리하다.
또한 AWS가 커뮤니티도 크고 컨퍼런스도 많이 열리는 등의 이점이 있다.
큰 서비스를 위해 더 유리하기 때문에 서비스가 커지면 AWS로 옮겨가는 것이다.
Multi Cloud: 최근에는 여러 개의 업체를 같이 쓰는 회사도 많아지고 있다.
여기서 켜져있는(체크되어 있는) 컴퓨터에 대해서 요금을 지불하게 된다.
가격: (GCP 기준) 한달에 메모리 1GB 당 10,000원 정도 발생한다.
켜둔 시간만큼 비용이 발생한다.
테스트용을 만들 때는 2GB정도면 충분하다!
위의 VM 인스턴스 화면에서 우측의 SSH를 누르면 나온다.
SSH를 통해 빌린 컴퓨터에 접속한다.
터미널을 Shell이라고 한다. SSH는 보안이 들어간 Shell이란 의미이다.
✨ 터미널을 끈다고 이 컴퓨터가 꺼지는 것은 아니다. 컴퓨터를 끄려면 중지를 시켜야 한다
Ping
[GCPing]
물리적인 컴퓨터로 요청을 보내서 얼마나 걸리는지 측정할 수 있다.
컴퓨터에 접속할 수 있게 네트워크를 열어줄 때 컴퓨터에는 port별로 일반적으로 방화벽이라는 것이 있다.
기본적으로 port가 다 막혀있고, 접속을 허용하려면 해당 port의 방화벽을 해제해줘야 한다.
(이 메뉴에서 해제할 수 있다.)
부분 허용: 특정 아이피를 막거나, 한국에서만 접속 가능하게 등 부분적으로 설정도 가능하다.
Frontend-Server에 아무나 접근하면 안됨! 지정한 특정 접근으로만 방화벽이 열리게 설정해줘야 한다.
도메인 구매 방식은 회사마다 비슷하지만, 네이버 로그인이 있어서 편리하므로 가비아를 사용할 것이다.
[가비아]
Next는 서버에서 미리 HTML 화면을 그린 다음에 브라우저에 보여주는데, 여기에는 2가지 방식이 있다.
1. SSG
빌드할 때 페이지별로 HTML을 생성하고 요청을 받을 때마다 미리 만들어둔 것으로 응답하는 방식
2. SSR: Server-side Rendering
매번 요청을 받을 때마다 서버에서 HTML을 그려서 주는 방식
Static File을 서빙한다.
배포를 하면, 빌린 컴퓨터가 꺼지지 않도록 메모리/CPU 상황 등을 잘 관리해줘야 한다.
트래픽이 늘어나게 되면
html, css, js
파일(정적 파일 = static file)로 추출해내서 이 정적 파일들을 Storage(대용량 파일 저장소)에 올려 놓는다.그런데, Static-File Serving이 안되는 파일이 있다.
WHY? SSR 때문!!
html,css,js
를 새로 만들어서 제공해줘야 하기 때문에 Storage에 정적 파일 형태로 미리 적재해둘 수 없다.하지만, 모든 페이지가 SSR은 아니다.