S3과 연결했던 CloudFront에 로드밸런서 연결을 추가해야함
CloudFront ID로 들어감
원본 탭에서 원본 생성 버튼을 클릭함
원본도메인에 로드 밸런서(lb)를 입력
프로토콜 HTTP만 해당 선택 후 원본 생성 버튼 클릭
특정 도메인 접근 시 로드 밸런서로 라우팅 되도록 설정한다
동작탭에서 동작 생성 시작
경로 패턴에 동적 라우팅이 시작되는 주소를 입력
주소가 /board/[boardId] 라면
/board/* 를 입력
뷰어 프로토콜 정책은 http and https
허용된 http 방법은 get,head,options,put,post,patch,delete
동작생성버튼 클릭
그뒤 동작 목록에서 s3와 로드밸런서로 모두 동작이 연결되는 지 확인
S3에 업로드 된 빌드파일을 CloudFront를 이용하여 캐싱하여 빠른 속도로
최초 화면을 보여준다음 나머지 페이지와 데이터는 SSR 방식으로 전달된다.
그렇기떄문에 사용자는 빠르게 사이트를 이용
변경이 적은 레이아웃같은 파일들은 S3로 분리하여 EC2인스턴스에 대한 부하를 줄이고
안정적인 서비스를 제공할 수 있음
도커는 개발 환경 요소들이 설치된 모습을 이미지로 저장한다.
저장한 이미지를 클라우드에 올리고 이미지들이 서로 연결되어 동작하는 설정(Dockerfile)로 저장한다. 새 컴퓨터에 가서 복사한 문서의 내용대로 이미지를 다운받아 설치한다.
가상머신과 비슷하지만 훨씬 빠르고 데이터 낭비가 적음.
도커허브에서는 npm 다운 받는 것처럼 다른 사람들이 올려놓은 이미즈를 다운로드 할수 있고 한 컴퓨터로 여러 환경의 서비스를 실행해야하는 경우 컨테이너로 분리되어있기에 독립적 실행 가능
실무에서는 프론트와 백 구분없이 도커를 사용함
배포를 위해 도커를 사용하는 것이기에 도커를 기반으로 개발을 해야한다.
이미 개발중인 환경에 신입사원이 와서 프로그램 버전과 환경을 동일하게 하여도
실행되지 않을 수 있음
그것을 해결하기 위해 vm 버츄얼 머신으로 os를 동일 하게 맞추었음
그러나 부팅을 이중으로 해야하기에 속도가 많이 느렸음
윈도우는 리눅스를 쓰기 위해서는 WSL (window Subsystem For Linux) 를 추가로 설치해야만함
여러가지 컨테이너를 다룰때 좀더 복잡한 설정이 필요한데
그럴 때 이용 하는 것이 Docker-compos!!
docker-compose.yml 파일을 만들어 설정을 적어두고
docker-compose up
라는 명령어를 입력해서 컨테이너를 실행한다.
version: "3.7"
services:
class_build:
build:
context: .
dockerfile: Dockerfile
ports:
- 3000:3000
docker-compose.yml 파일 예시
들여쓰기는 꼭 구분해야하니 잘 확인해야함!
컨테이너를 실행하기 전에 먼저 이미지를 만들어야한다.
Dockerfile이라는 파일을 만들고 이미지를 만들기 위한 명령어들을 입력하고
docker-compose build 명령어를 통해 이미지를 만든다
# FROM ubuntu:20.04
# RUN apt install nodejs
# RUN npm install -g yarn
# 노드로 설치할경우 위의 것을 설치할 필요없음
FROM node:14
RUN mkdir class_build
COPY . /class_build/
# class_build라는 폴더를 만들어서 내용을 전체 . 복사
RUN class_build
CMD yarn dev
# 최종으로 실행하는 것은 CMD 한번 밖에 못씀
Dockerfile 안에서 환경 변수를 설정하고 싶은 때는 ENV 명령어로 설정합니다.
ENV [key] [value]
ENV [key]=[value]
가장 간단한 배포
DNS를 통해 EC2로 바로 직접 배포
트래픽이 늘어나는 것에 대비가능한 배포
브라우저에서 DNS를 통해 로드 밸런스로 헬스 체킹을 하고 TargetGroup으로 접속되게 배포
CloudFront를 통한 배포
동적 페이지는 클라우드프론트로 가서 로드밸런스로 가서 화면을 가져와서 다시 브라우저로 돌아가서 페이지를 그려주고
쿼리나 뮤테이션이 백엔드로 가는 것
서버사이드 렌더링
DNS-> CF => LB-> F-> B-> DB ->B ->F(html CSS JS)를 한번에 보여줌