220630 프론트엔드 부트캠프 51일차 : 동적 배포 마무리, Docker

나 좀 도와줘!!!

 

Docker에 대한 내용은 아래에 적었다. 

https://hani-honey.tistory.com/129

도커(Docker) 고래 모양 그거

 

  동적 배포 (2) 

 어제 하던 것 이어서...

 

인스턴스 컴퓨터(EC2)안에서 

 

1. curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash

    

2. sudo npm install -g yarn

    
3. 
   

   sudo yum install git

    

4. yarn install
   yarn build
   yarn start

해줍니다. 오늘 컨셉 존댓말..?!!!

 

EC2 - 로드밸런서 들어가서 추가하는데, 이름은 도메인 뒤에 lb(로드 밸런서)를 붙이는 것으로 하겠습니다.

 

healthchecker - 살았는지 죽었는지 체크합니다...!!!

로드밸런서가 하는 역할은 안에 있는 애들에게 트래픽을 나눠주는 역할입니다. 

 근데 어떤 컴퓨터가 서버가 종료가 됐다! 메모리 넘쳐서 시스템에 문제가 있다! 그러면 트래픽 넘겨주면 안되잖아요. 그래서 헬스체커가 5초에 한 번, 두 번씩(설정에 따라 달라짐) 접속을 시도하고 두 번 이상 성공하면 성공, 연속 실패하면 죽은 거 아냐? 의심합니다... 그러다가 응답 없으면 로드밸런서에게 알려줍니다. “지금 3번 문제 있어! 트래픽 넘겨주지마.” “ㅇㅋ나머지에게만 전달할게”

 

 로드밸런서도 방화벽이 있습니다. 그래서 http:80에 대해선 누구나 접속할 수 있게끔 풀어줘야 합니다.

왼쪽 사이드바 보안그룹 - default 규칙 추가

주소 입력->DNS에서 A레코드로 바꿈. 그걸 클라우드 프론트에 넘겨줌->스토리지/로드밸런서 분기

접속할 땐 https지만 넘겨줄 땐 http80으로 넘겨줄 수 있습니다. 모든 곳이 https여야하는 건 아닙니다... 그렇게 하고 싶으면 모든 곳에서 https 인증서를 받아야합니다ㅎ그래서 보통 처음에 접속하는 부분을 https로 합니다. https는 암호화 알고리즘이 들어가기 때문에 어느정도 느려지는 건 감수해야합니다. 

 

동적 페이지 설정

기본은 storage로, 동적인 부분은 elb(elastic load balancer)로 가게 된다.

 

없애는 방법

어피치가 발버둥치는 곳 옆에 있는게 없애야 할 아이디. 

1. ps -ef | grep node (node로 검색해서 실행중인 node 프로그램 데려옴)

2. kill -9 {id} (id 프로그램을 강제 종료)

 

빌드 아이디 통합

이때까지 배운 배포 유형!

 

1

1. 동적이든 정적이든 받아올 수 있습니다. 그러나 프론트엔드 접속자가 너무 많아져서 컴퓨터가 여러대 있을 필요가 생겼습니다! (아래로)

 

2

2. 프론트엔드 컴퓨터 여러대를 만들었습니다. 택배로 요청하면 오래걸렸겠죠...! 하지만 이젠 AWS 등을 통해 빠르게 구할 수 있습니다. 이제 늘어나는 트래픽에 대응할 수 있게 되었습니다. 로드 밸런서가 트래픽을 나눠서 주고 그 옆에서 헬스체커가 헬스체킹도 합니다. 방화벽이 있어서 방화벽 누구든지 접속할 수 있게끔 인바운드를 풀어줬었죠?! 밸런서의 방화벽도 풀어줬었죠! 

 밑에선 정적인 html, css, js 받아오고 useQuery 이런건 백엔드를 통해서 받아옵니다! 

 

3

3. 이제 정적인 페이지들은 서버 필요없으니까(폴더명 확정된 것들) 미리 html 파일로 만들어서 스토리지에 분리 시켜놓겠습니다! 그럼 다섯대 있어야할 컴퓨터가 세 대만 있어도 되는 등 자원이 절약됩니다! 트래픽에 대응하기가 편해지죠. 

 그러면 정적인 것, 동적인 것 분기시켜줄 애가 필요하겠죠. 그래서 CloudFront가 LB로 보낼지 Storage로 보낼지 분기처리를 합니다.

 브라우저에서 접속했을 때 DNS를 거치고 CloudFront에 가서, 거기서 LB와 Storage로 나뉩니다. 그 다음에 useQuery, mutation 등은 백엔드에서 받아옵니다. 동적 페이지 접속할 땐 프론트엔드가 켜져있어야 합니다!

 

 

4

 내일 배울 것입니다. TargetGroup을 통해서 백엔드랑... (그 뒤는 안 들렸습니다...ㅠㅠㅠ ㅠ ㅠ ) 

 

실무에 가면 css만 하는 퍼블리셔가 있을 수도 있습니다. 

프론트도 물론 css 하지만, 주 영역은 데이터의 흐름을 알고 그것을 다루는 일입니다.

 

 

  리액트 네이티브 - 웹뷰

yarn add react-native-webview

android - java(kotlin) (실행될 때 같은 언어로 실행되기 때문에 호환이 잘 된다.)

ios - objective-C(swift)

 

react-native 안드로이드와 ios둘 다 서비스 할 수 있도록 할 수 있다.

javascript 언어를 안드로이드에선 java로 ios에선 objective-C언어로 바꿔주는게 필요하다. - 네이티브 브릿지

 

 

+ 처음에 피그마 짤 때 기획 기반으로 어떤 화면을 만들 것인지 정리해놓습니다. 

 

노트폴리오! 참고 사이트입니다~~ 

 

 오늘은 역대급으로 수업 듣기 힘들었다ㅠㅠ멘토님들이 도와주는 소리 뿐만 아니라 그냥 다른 작업하시다가 떠드시는 분들도 계셔서 혼돈의 카오스였다. 쉬는 시간 후엔 한참동안 시끄러웠다. 속닥거리는 것도 아니고 그냥 말씀들 하셔서 수업소리가 진짜 잘 안들렸다... 흑흑 내 집중력도 떨어졌다... 그치만 이런 것에 너무 휘둘리면 안돼,~~~ 그리고 내일 수업도 끝...(짱 슬픔....) 오늘 수업 끝인줄 알았는데 내일이었다.ㅋ 오늘 끝나는 줄 알고 카드 드렸는데.. 머쓱~~~아무튼 마지막이라니...마지막이라니 .., 사실 팀플 때문에 별로 실감은 안나고 새로운 시작 같다. 그리고 실제로 새로운 시작이니까! 그래도 아쉬운건 아쉽다. 팀 자리가 12층에 될지 13층에 될지 정말 궁금하다...!!! 두시간 뒤가 기다려지는 이유~~~