GCP(Google Cloud Platform) 세팅

Static Site Generation(SSG)이란?

pages 폴더에서 작성한 페이지들의 각각의 HTML 문서를 생성해서 static 문서로 가지고 있고,
각각의 해당하는 페이지에 대한 유저들의 요청이 발생하게 되면
요청에 따라 서버에서 재 생성 하는 것이 아니라 이미 생성이 완료된 페이지를 반환해주게 된다.
따라서 생성이 완료된 HTML 문서를 재활용 하기에 응답 속도가 매우 빠르다.

build하는 과정

yarn build

소스코드를 빌드해주는 작업
build된 최종 폴더를 뽑아서 그 폴더를 스토리지에 업로드 해야함

package.json에서 해줘야하는 작업

package.json에서 빌드부분이

"build" : "next build" 이렇게 되어있는걸

"build" : "next build && next export" 이렇게 바꿔준다

이렇게 하고나서 yarn build 하면 필드폴더가 만들어짐
근데 에러가 날거임

/pages/index.js 에서 해줘야하는 작업

next.js에서 이미지 태그를 제공해주는데, pages/index.js => "next/image" 주석처리 해줘야함
그리고 next/image를 쓰는 부분도 주석처리 해줘야함
자체적으로 image관련 기능이 들어있는데, build할때 서로간의 호환이 안됨

이렇게 해주고나서
다시 yarn build 를 해주면

빌드가 성공이 되고, out이라는 폴더가 생성이 됨

next.config.js 파일 세팅

boards/index.html이런식으로 들어가야 하는데 그냥
파일만 덩그러니 있다.

이 부분은 next.config.js 파일에서
trailingSlash : true 해주고 yarn build를 다시 해준다

그럼 이렇게 우리가 사용해왔던 폴더구조로 만들어진다.

GCP에 빌드파일 저장

GCP

GCP 햄버거버튼 => 클라우드 스토리지 => 버킷 만들기 버튼 클릭

그 다음

1. 버킷 이름 지정 해주고
2. 위치 유형 선택

• multi-region 선택
  위치 asia 선택

나머지는 계속 누르고

만들기 버튼 누르면 됨

build하면 만들어지는 out폴더 안에 있는것들

다 복붙해준다

빌드폴더 세팅

상위 폴더에서 만든 폴더 맨 오른쪽에 땡땡땡 누르면

이렇게 목록이 나옴 여기서 버킷 권한 수정 과 웹사이트 구성 수정 을 만져줘야함

구성 수정

그리고 저장버튼 누름

버킷 관한 수정

주 구성원 추가 버튼 누르고

새 주 구성원 allUsers라고 하고
역할에 Cloud Storage에서 저장소 개체 뷰어 선택후
저장

빌드 폴더 세팅할때 폴더안에 있는것들이 복붙(드래그앤 드랍)이 안될때 해결 방법

터미널 아이콘 누르면 밑에 터미널이 생기는데

codecamp-03 이라는 폴더를 만들고
나의 codecamp-03 폴더를 git clone 해준다.

class_build 폴더안에 들어가서
yarn install 실행 시켜주고

노드 버전 업그레이드 해준다

노드 버전 업그레이드 방법

node 버전 업그레이드를 하려면 Node Version Manager(nvm)을 깔아야 한다.
nvm은 한 컴퓨터에서 여러 버전의 node버전을 쓰고 싶을때 사용한다.

nvm의 자세한 설치방법은 nvm 설치방법 에서 보면 된다.

$ sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash
이 명령어를 치고 $ nvm ls 를 입력하면

이렇게 사용 가능한 버전 목록이 나온다.
우린 최신 버전중에서 안전한 버전을 써야 하니까
버전을 새로 깔아준다.

$ nvm install 16
16버전 설치
$ nvm use v16.12.0
16.12.0 버전 사용

그리고나서 $ node --version 으로 버전 확인해보면
정상적으로 16.12.0 버전이라고 나오면 잘 된거다

이렇게 까지 하고나서
$ yarn install 하고 $ yarn build 해준다.

터미널의 class_build 의 위치에서
이 방법에대한 설명은 알아보기 -> 가이드 -> 버킷에 데이터 업로드에
자세히 나와있다.

$ gsutil cp ./out/* gs://codecamp-deploy-byungjin

이 명령어를 입력해주면

이렇게 나오는데 승인 버튼 눌러주면 됨
그리고나서 다시 폴더에 들어가보면 out폴더 안에 있는 것들이
들어와 있을거임

tcp , udp , http

tcp: 데이터를 잘 받아왔는지 체크
체크를 하니까 속도가 느림
하지만 안정성 좋음

udp: 데이터를 잘 받았는지 체크 안함
체크를 안하니까 속도가 빠름
근데 안정성 떨어짐

중요한 데이터들은 tcp , 중요하지 않은 데이터는 udp

지금까지 써왔던거는 http

보통 DB의 데이터베이스는 tcp로 주고받음

LB to storage , backend , frontend 세팅

http 하면 포트80이 자동 생략됨
https 하면 포트443이 자동 생략됨

프론트엔드 세팅

GCP 햄버거 버튼 -> 네트워크 서비스 -> 부하 분산

프론트 엔드 구성 -> 이름 정해주고 ->

이름 정해주고

완료버튼 누름

backend 세팅

GCP 햄버거 버튼 -> 네트워크 서비스 -> 부하 분산

백엔드 구성 -> 이름 정해주고 ->

이름 세팅 해주고 만들기 버튼 누름

CDN이란? 콘텐츠 딜러버리 네트워크

https://gcping.com/ 가장빠른 리전을 검색하는곳

호스트 및 경로 규칙

이렇게 하고

왼쪽에 최종적으로 만들기 버튼 누름

프론트엔드 서버 들어가서 확인해보기

햄버거버튼 => 네트워크 서비스 => 부하 분산

프론트엔드 주소로 들어가면

프론트 서버로 들어가지고 우리가 만든 파일로 접속하면

잘들어가진다