TIL - 2022.03.08 화요일

오늘 배운 것

1. SSG/SSR 배포

지난 주 금요일부터 오늘까지는 배포의 회오리에 풍선인형처럼 휩쓸려 팔랑거리고 있다. VM 인스턴스만 사용하는 단순 동적 배포는 경험이 있지만, 로드밸런서를 이용해서 부하를 분산시키고 클라우드와 VM을 동시에 이용하는 형태의 현대적 배포는 경험이 없다보니 뭐가 뭔지도 모르겠고 정신이 혼미하다. 지금까지 이해한 것을 먼저 적어보자면.

• SSG란? : Static Site Generation / 정적 타입 배포
• SSR이란? : Server Side Rendering / 동적 타입 배포
• 로드밸런서(LB)와 CDN을 이용하면 정적 url로 들어갔을 때에는 SSG 방식으로 소스코드를 내려받고, 동적 url로 접속했을 때에는 SSR 방식으로 소스코드를 내려받도록 분기를 나누어 웹서비스를 배포할 수 있다.
• Next.js를 사용하는 경우, SSG와 SSR 방식으로 각각의 페이지를 build하고 연결해주어야 한다.
• 나는 GCP의 스토리지를 이용한 정적 배포와 VM 인스턴스를 이용한 동적 배포 방식을 실습했다. 그리고 GCP에서 제공하는 LB와 Cloud CDN을 사용해 호스트와 경로 규칙을 만들어주었다.
• 위와 같은 방식을 사용하면 동적 라우팅, 백엔드 서버에서 fetch 해오는 정보까지 브라우저에 반영하여 그릴 수 있다.

 

2. Next.js Build

Next.js의 기본 build 명령어는 다음과 같이 설정되어있다.

이것을 ssg용과 ssr용 명령어로 구분하여 입력해두면 build 작업 할 때 편리하다.

 

3. Docker

여러명이 서로 다른 운영체제를 사용해서 공동 프로젝트를 작업하는 경우, 같은 버전의 동일한 툴을 설치해도 추후 충돌이 발생할 수 있다. 그에 대한 해결 방안으로 나온 것이 바로 VM-Ware 등의 가상 머신. 각각의 PC 안에 가상 머신을 설치하고, 그 안에 Linux같은 공통 OS를 설치하면 동일한 환경으로 작업을 진행할 수 있다. 하지만 이런 방법을 사용할 경우에는 PC 안에서 또 한 번 PC를 구동하는 것이나 마찬가지라 속도가 너무 느린 단점이 있었다.

 

그래서 나온 것이 Docker.

Docker는 컨테이너 기반으로 하는 오픈소스 가상화 플랫폼으로, 부팅 등 운영체제의 핵심 기능(커널)은 기존의 OS와 공유하는 가상머신이다. 이제는 프론트/백을 구분하지 않고 협업에 필수적인 스택으로 떠오르고 있다.

 

설치 및 이용 방법은 docker 공식 페이지 참고.

윈도우의 경우 WSL2를 같이 설치해줘야 오류 없이 이용이 가능하다. 설치 후 Docker 데스크탑 앱을 실행하면 설치 의사를 묻는 메시지 창이 뜬다. 해당 가이드를 따라서 설치하고 실행할 것.

https://www.docker.com/

Empowering App Development for Developers | Docker

기본 프로세스
1. Dockerfile에 실행할 Docker 명령어를 입력한다.
2. docker-compose.yml에 docker 환경설정을 입력한다.
docker-compose를 이용하면 한 번에 여러개의 Docker를 실행하는 것도 가능하다. (FE/BE/DB등등..)
3. 해당 위치에서 docker-compose build 후 docker-compose up 한다.

 

Dockerfile 예시

docker-compose.yaml 예시

 

앞으로 할 것

- Docker 에러와 씨름하느라 배포 놓친부분이 좀 많다. 해당 부분 복습하기

- SSG/SSR 배포 전체적으로 다시 훑어보기

- 팀프로젝트 기본 레이아웃 피그마 만들기