📔 8주차 학습목표
- 배포를 위한 숲 >> cloud-provider
- 테스트 코드 >> Jest/Cypress/TDD
- 구입한 주소를 연결 >> DNS
- HTTP >> HTTPS/ SSL / TLS
- 서버사이드렌더링 >> SSR
📔 학습목표
- 배포를 위한 숲 >> cloud-provider
- 테스트 코드 >> Jest/Cypress/TDD
서버사이드 렌더링이랑 배포 중요!!!
깃클론해서 얀데브해서 각각 브라우저에서 (html,css,js)다운로드 받을 수 있는데
메인컴퓨터를 종료하면 들어갈 수 없다 (메인컴퓨터를 24시간 켜놔야한다)
다른사람들도 내 컴퓨터에 들어올 수 있도록 네트워크를 수정?
서버를 24시간 켜놓고 종료하지 않는 상태를 유지해야 접속 가능
반드시 서버컴퓨터에 배포를 할 필요는 없다
(접속자가 많지 않다면!!)
접속에 대한 처리를 빨리 하려면 Cpu가 좋아야 한다.
일반적으로 cpu는 2개
여러명의 요청을 동시다발적으로 받으려면 어딘가에 기록을 해놓고 처리해줘야하는데
기록하기 위해서는 메모리가 필요하다 -> Ram (일반적으로 8G/16G)
컴퓨터가 꺼지면 접속을 할 수 없는데(yarn dev가 종료되니까) 그럼 손해가 커짐
그러다 보니 서버 컴퓨터는 항시 켜놓음
팬이 돌면서 컴퓨터가 열받음 열 받지말라고 냉각기 설치
정전되지 말라고 조치도 해놓음
한대가 꺼질 수 있으니 하나만 켜놓는게 아니라 한대를 더 깃클론으로 더 켜놓음
근데 하나를 더 연결하려면 앞단에 로드벨런서(부하분산기) 장비에 프로그래밍을 해놓음연결
도메인을 접속하면 그 요청이 로드벨런스로 가고
로드벨런스가 접속량이 적은 서버로 요청을 보내고
요청이 보내진 서버에서 html,css,js를 다운로드
프론트엔드 서버가 5대 있다면 돌아가면서
트래픽을 나눠준다
라운드 로빈 (round-robin)
least-connection
: 연결이 적은쪽으로 연결해주는
(한쪽은 20명이 접속해있고 반대쪽은 1000명이 접속해있다면 20명이 접속한 서버로 연결)
이런 네트워크 장비를 가지고있는 회사들이 있음
아마존, 구글, 마이크로소프트
컴퓨터 빌려다가 써~
=> 아마존 웹서비스 (AWS)
-> 구글(GCP), micosoft(Azure)
구글 웹서비스 -> 얘는 24시간 켜져있음 (내 컴퓨터가 아니여서)
로드밸런서도 이런식으로 빌릴 수 있음
-> 네트워크 서비스에 부하분산
옛날에는 개발팀이랑 배포팀이 따로 있었음
배포팀 -> 네트워크 장비들 등등 이런걸 많이 알고 있어야했다.
이제는 바뀜!!
개발과 운영이 합쳐짐
개발자가 운영도 할 줄 알아야함
-> 이걸 데브옵스라고 함
구글 클라우드 플랫폼 -> 클라우드 서비스
데브옵스 = > aws, gcp, azure = 클라우드 프로바이더(클라우드 제공자)
하나하나를 인스턴스라고 함
인스턴스 그룹
로드밸런스 아이피가 있음
도메인은 전혀 상관없고
아이피 주소를 치고 엔터를 치거나
로드벨런스를 통해 들어감
얀데브도 해줘야 하지만
서버들이 있고 그 서버들을 그룹핑해주는 인스턴스 그룹
걔네를 통제하고 있는 그룹을 만들어줘야하고
걔네를 분산시켜주는 로드벨런스를 연결해줘야하고(부하분산을 위한 과정)
주소를 외우고 다닐수 없기 때문에 dns에 등록을 해준다
aaa.com으로 접속할 수 있게!
로드밸런스를 통해서만 들어오게 하고 싶은데...
막는 방법?
방화벽 -> 다른 컴퓨터가 ip주소로 들어올 수 없게 막아주는 것
방화벽은 디폴트로 들어가있음
-> 그러므로 로드벨런스로만 들어갈 수 있게 됌
dig - 도메인 어쩌구..
dig는 네트워크 관리 도구 중 하나로 DNS (Domain Name System) 를 질의할 수 있는 도구입니다
디엔에스에 맵핑 시켜놓고
주소창에 ip주소를 치면 네이버로 이동한다
이게 DNS임!
서버모니터링 (cpu가 높은지 메모리지 어쩌구..)
html, css,js 파일을 미리 만들어놓을 수 ㅣㅇㅆ음
그 파일을 스토리지(이미지 올려놓고 다운로드 받는)에 업로드(S3)
싸이월드 했던거처럼 브라우저 열면 자동으로 실행되도록...
량
클라우드 프론트에 연결
얀 빌드 -> 소스코드가 미리 만들어짐
배포 1 - 서버라는 개념이 없음
사람이 무제한으로 접속해도 트래픽처리를 구글이나 아마존에서 알아서 해줌
무한으로 트래픽을 받을 수 있다.
일반적인 배포는 1번 방식임
정적파일을 미리 다운로드 받고 꿀어다 씀
스태틱 사이트
정적인 파일
매번 같은 파일
=======
배포2는 왜 필요할까??
정적인 파일. 변함업ㅂㅅ는파일,.. 동적으러 편한 핑릐 누가$
다우나믹라우팅
동적으로 그때그때 자동ㅇ로 만둘어지는
-> 미리 만들어 놓을 수 없음
서버가 있어야 사용가능
미리만들어놓고
페이지마다 각각의 html, css
분기점을 만들어줌-> ?
처음에 배포를 간단하게 하면
이렇게 가능하다
정적파일들은 스토리지로 분기시키자~
클라우트 프론트를 통해서 주소를 받아옴
트래픽이 많지 않으면 스토리지 생략
모든페이지가 static
테스트 코드
: 마우스로 클릭하는 거 대신해주기
예시) 테스트를 다 마치고 나서
배포를 하고 갑자기 에러 보고가 들어옴
구매랑 장바구니 기능엔 문제가 없었는데 상품에 문제가 생김
-> 구매랑 장바구니 기능이 추가되면서 의존하고 있던 것에 문제가 생김
기능을 추가할때마다 추가된 기능을 테스트 함
기존에 있던 기능들에 영향을 주는지 다시 테스트 해야됌 (문제)
더이상은 사람이 버튼으로 테스트하는데에 한계가 생김
2차 배포부터 불가능해짐
기능하나 추가한다는건 CRUD를 해줘여한다
각각의 테스트 코드
화면에 보여준다 (웹,태블릿,모바일 환경에 적용되게 )
기능하나만 생각할 게 아니라 쪼개서 생각해야 한다
우리가 원하는 결과 잘 받아오는지 버튼클릭과 같은 개별기능 단위테스트
여러기능 한꺼번에 통합테스트
접속해서 로그인하고 구매하는 등 시나리오가 있는 E2E테스트 (엔드투엔드)
Jest (프레임워크)
넥스트에서 제스트를 사용하기 쉽게 만들어 놓음
링크 > [https://nextjs.org/docs/testing][https://github.com/vercel/next.js/tree/canary/examples/with-jest]
설정파일들 보고해도 되고
설치
yarn add --dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-domjest.config파일 만들기
독스에 나와있음!
테스트 코드 예시
두가지 다 가능하다
보통 index.test.ts를 많이 씀
pages 바깥에 폴더를 만드는 게 일반적이다 (next.js jest)
package.json에 "test": "jest --watch" 추가
yarn test 써서 테스트 성공
바뀐부분이 있으면 빨간색
없으면 초록색으로
알려주는거
cypress 설치
yarn add --dev cypress
브라우저 열고 실행
브라우저 가상으로 열고 실행 -> run
