36일) http 안돼 https로 해줄꺼야. 뭐가다른데?! 와이어샤크로 너 정보 다 털릴수도 있거든... code camp FE 6기

김아름·2022년 5월 4일
0

- HTTPS / SSL / TLS

  • 어제했던 배포과정 충분히 익히고 !
  • 우리 이렇게 들어가서 보면, 기본값이 맵핑된 주소가 http인것을 볼 수 있다!

  • 근데 주소입력해서 들어가는것이, 바로 띡 전환해서 맵핑이 진행되는게 아냐!
    naver.com
    armysssir.shop..
    이런 도메인 주소들을 모아놓는 서버를 root dns 서버라고 한다 !
    전세계에 13대가 있다 ㅇㅅㅇ 얘네가 131.233.45.6 이렇게 바꿔주는 애들이라 마비가 되면 안돼 !
    (루트 네임 서버)
  • 우리 이제 그럼 http 말고 https로 해보자 !
    gcp에서 로드밸런서를 사용할때, 구글에서 주는 구글인증서(무료인증서/유료인증서)를 여기에 적용하면
    https로 바로 적용가능!
    ->좀 더 보안이 확실한 https니까 인증서가 필요한건 당연하겠지?!

잠깐 : aws에도 있다! (elb, aws인증서가 있음, DevOps만나도 당황하지마)

  • 그럼 우리 로드밸런서에 구글인증서 설치해보자
    네트워크서비스/부하분산가서 https전용으로 만들어보자 !

    이 로드밸런서의 프런트 / 백은 우리 개발환경말하는거 아니고,
    lb의 앞 뒤를 말하는거다!
    그리고 저번엔 http였으니까 https로 바꿔주고
    지난번 ip와 같은것을 입력하고
    새로운 부하분산기를 만들자

    그리고 우리가 적용해줘야하는 인증서는 SSL인증서! (TLS)
    인증서 만들기 들어가서 도메인 입력해주고 구글에서 받는다고 하자 !
    도메인주소로 인증받을고야

    만들어진 인증서 들어와보면 provisioning!
    만들어지는 중이라는 뜻이다!
  • 리얼 더 중요한거는....

왜 http 와 https를 나눠야하는데?

  • 와이어샤크 : 소스 패킷 분석 툴!
    request response같은게 물리적으로 왔다갔다 할때 그런 데이터들을 가로채서 확인해주는 도구
  • 빨간박스 필터를 거는거야 (34.96.92.221)
  • 저 서버로 왔다갔다하는 데이터만 보여줘!(^지금 연결해놓은 api주소를 적어놓아봤다)
  • 패킷을 캡쳐한다(라고 한다)
  • src (누가 요청을 했느냐)
  • dst (누구한테 요청을 했느냐)

    도착지가 내가 연결해놓은 api인것은 내가 보낸 요청인것 이해가능하지 ?
    더블클릭해보면, variables와 데이터 확인가능!

    -> http는 이렇게 다 볼수 있어!
    (카페에서 무료와이파이 쓰는사람 데이터 전송 다 볼수 있음..)

ARP 스푸핑이라고 한다 !

근데 https로 보내면 이것을 대비해서 나의 데이터들의
암호화가 가능햇
https로 보냈더니 화면이 보라색으로 바뀌고, tls
(ssl이라 부른댜 걍 )로 가는게 보이고,

또 아까는 보였던 데이터들이 암호화가 된게 보인다!

그니까 인증서 설치해서 당연히 https를 써야겠지?!

  • 3-WAY-Handshake
    3번의 악수를 한다 ?!

    syn(싱크로나이즈)를 보내서 서버가 싱크를 받고
    응 연결해도돼 ! syn + ack를 보내줌
    그러면 클라이언트에서 그래! 그럼 연결할게 하고 ack를 보냄

잘 이해가 안가면 와이어샤크에서 3번 왔다갔다 하는걸 볼 수 있다
위쪽의 3개가 쓰리웨이 핸드쉐이크
그 다음에 request가 나가는거다
SYN, SYN&ACK, ACK 인것 확인가능

한번 연결이 되면 연결이 끊어지기 전까지 request를 보내게 된다
57546(나의 랜덤 포트) -> 80은 http를 의미
(0~65535)
우리가 평소 개발자도구에서 볼수 있었던 프리플라이트부분도

나 요청 보낼껀데 괜찮아? 보내도돼? (options)를 먼저 보냈었당

- SSR

->정적파일에 대한것은 모두 Https까지 모두 설정했다!

  • 우리 서버사이드렌더링이 필요했던이유는 meta tag og~ 했던부분 잘 보고오자!
  • 렌더링 할때 서버까지가서 데이터를 틀안에 뽕뽕 채워줘야한다고 했다! (사이트를 그리기전에 데이터를 쓸일이 있응께!)
  • 밑의 예시를 보았을때. useQuery는 맨처음에 뻥뚫린 상태(데이터가 없는상태)로 받아오게 되어서 데이터가 없는것을 볼 수 있다. 하드코딩 된 애들은 잘 들어갔다. 하지만 동적인 데이터 변수가 들어가 있으면 서버사이드렌더링이 필요해!

-> 브라우저에서 2차쿼리하는게 아니라, 프론트엔드서버에서 쿼리요청을 해서 데이터랑 틀이랑 합친것을 보내줘야한다 (서버사이드렌더링)

  • 서버사이드 렌더링을 통해서 데이터 빵꾸 채워줘야하는페이지 예시

    데이터 받아서 넣어주는 모습

    완벽한 html!
    근데 useQuery는 아폴로 세팅이 되어있어야 가능한데,
    안되어있으니까 axios 혹은 grqphql-request를 써서 해보자!
    yarn add graphql-request

서버에서 받는 요청 같은건 context안에 들어가 있다.
boardId불러올때 router같은것도 없으니까 거기가서 꺼내오는 모습입니다

우리는 build ssr
yarn start 해야하는거 알게찌?
구글 클라우드가서 설정해주자
컴퓨터엔진/VM인스턴스 인스턴스를 만들자
물리적인 컴퓨터를 빌리자 어떻게 빌리냐. ssh 시큐어 쉘을 빌리는거다 !
이건 내 컴퓨터가 아니고 구글컴퓨터의 터미널이다 ! 여기서 계속 켜놓기땜시
내 컴퓨터를 끄더라도 상관이 없어 ! 상태가 초록불로 되어있으면 24시간 켜져 있는것!

트래픽 양에 상관없이 켜져있으면 요금이 나간다 ! 기가당 만원정도..
한국설정.우분투설정.용량30기가설정!

내부 ip는 우리가 사용하는ㄱ 아니고, 외부ip 사용하는거야
로드밸런서에 있는것도 다 외부 ip!
(그 컴퓨터의 ip주소인것이다)

1. 내 폴더에서 깃 에드 커밋 푸시
ssh들어가서 해줘야하는게

2. 깃 클론 (내 배포하는 폴더꺼! 깃설치 안해도 저기서 저절로 됨,친절한 구글 컴터가 먼저 해놓았다)
3.내 배포 폴더로 들어가서
우분투에는 노드js 없어서 설치해줘야한다
sudo apt update (apt는 브루와 같은것이다 패키지와같은거 업데이트 해준다)
sudo apt install nodejs
curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -E -
sudo apt install -y nodejs
노드 설치하면 npm은 자동으로 설치 됨
node -v 하면 잘 깔린거 확인 가능하고
sudo npm install -g yarn
얀깔자 그러면
yarn --version
npm -v
node -v
이렇게 써서 버전다 나오면 잘 깔린것이다 !
내가 올린 파일 깃 클론하면 ,,
이것들이 없으니까 저쪽 컴터에서 실행하기위해 환경셋팅하는 과정!이당 !
환경 설정 되었으면 yarn install
내가 정해줬던 yarn build:ssr
그러면 리눅스 환경의 우분투 브라우저? 즉. 내가 빌린 구글 컴퓨터에서 내 파일이 켜질 준비가 된것이다@
yarn start 하면 자주 보던 로컬 호스트 등장 !

-> 근데 .. 외부 ip들어가도 안된다... ㅠ?

컴퓨터 한 대 한대에는 방화벽이 존재해.. (firewall)
내가 개발하기 전에 그냥 무심코 넘어갔던 방화벽이라는 이름이 이제 등장하는구나..
방화벽이라는것은 포트별로 막혀져있다
localhost 3000 포트가 막혀져 있기 때문에 접속이 불가
3000포트를 풀어줘야 접속이 가능하겠지 !
-> 방화벽 풀어주는 스티커를 만들자 ?!
스티커를 내가 풀 컴퓨터에 붙이자
구글/ vpc네트워크 /방화벽규칙만들기 ! (스티커만들기)
이 스티커를 만드는거고
이걸 붙이ㅣ는 컴퓨터는 모두다 3000번이 열린다는 뜻이야 !
소스는 어디까지 접근하게 하겠는가 ! 인데
일단은 모든 사람에게 범위 접근 가능하게 해보자 0.0.0.0/0
tcp는 어디 포트 열어줄건데 ? 3000번이요! 적어주면 된다
그러면 스티커완성! 컴퓨터가서 붙여주자!
컴퓨터 엔진/ vm인스턴스 수정가서 네트워크 태그에 스티커 이름 붙여주자 !

http://34.64.159.167:3000/boards/
서버사이드렌더링까지 되는지 확인해보자

yarn add graphql
yarn build:ssr
yarn start

이게 없다고 해서 다시 깔아주고 스타트 한거고
http://34.64.159.167:3000/boards/
이 뒤에 boardId가 들어간데가 서버사이드렌더링 사이트가 되는거고
ssr 확인하려면 curl + 도메인
터미널에 입력해보면 데이터가 들어가 있는지 확인이 가능하다

profile
SUNNY SUMMER ! 같이 일하고 싶은 개발자 여름이의 초심을 잃지 않기 위한 주절주절 부트캠프 시절 블로그.

0개의 댓글