TIL 35

SSR을 통한 배포

FE server 구동을 위한 컴퓨터 한대를 빌리고 해당 컴퓨터에서 구동(yarn dev)을 24시간 유지.

1. GCP -> computer engine -> VM 인스턴스 생성
2. 생성 후 해당 VM에서 yarn 구동을 위해 nodejs 부터 설치 (설치 시 참고 https://jjuon.tistory.com/3)
3. nodejs설치 후
   3-1. node -v
   3-2 npm -v
   버전 확인을 통해 설치를 확인해주고
   3-3 npm install yarn
   을 통해 최종 yarn 설치

구동하고자 하는 폴더에 들어가서 yarn install 명령어로 필요한 파일을 받아주고 실행하면 되지만
yarn dev는 개발 단계에서 구동을 위해 사용하는 명령어이기 때문에 배포시에는 사용하지 않ㅇ늠

• 최적화된 코드가 아니기 때문

따라서 최적화된 코드를 사용해 배포하기 위해
yarn build:ssr 명령어와 yarn start를 통해 우분투에서 실행

그러나 이렇게만 하면 접속이 불가능한데 방화벽에서 차단하기 떄문
방화벽에 대한 설정이 필요하고 이는 VPC network 탭에서 설-정이 가능
방화벽 규칙을 설정해주면 일종의 출입증을 발급하는 것과 같음
지정한 포트넘버에 대한 출입증을 발급해서 통과가 가능하도록

방화벽 규칙 생성 후 GCE(Google Compute Engine)에서 배포하려는 VM에 적용시켜야함
네트워크 태그에 달아주고 (네트워크 태그에 진입 IP작성시 서브넷마스크까지 달아줘야 구동)

위의 과정을 통해 실행이 됐어도 완벽한 SSR이라고 하기는 어렵다.
실제 BE에서 데이터를 뽑아오는 것은 아니기 때문

이런 문제를 해결하기위해 BE에 데이터를 요청하기 위한 함수

• getServerSideProps()


//해당 함수가 페이지 내부에 있다면 가장 우선 실행되며 default function은 그 다음으로 실행된다.
export const getServerSideProps = async (context) => {
  // pages 폴더의 파일에서만 요청이 가능하며 함수의 이름은 바꿀 수 없음
  // SSR을 위한 데이터를 요청할 부분
  // query등으로 BE에 요청
  const result = await request(
    "https://abcdefghi.co.kr/graphql", // 데이터를 요청할 BE서버 주소
    FETCH_BOARD, // 사용할 쿼리
    { boardId: context.query.id } // boardId를 context로 받아오며 context는 이 함수에서 제공
  );

  return {
    //이곳의 data가 위 default function 함수에 props로 전달된다.
    props: {
      boardData: {
        title: result.fetchBoard.title,
        contents: result.fetchBoard.contents,
        images: result.fetchBoard.images,
        // 혹은 ...result로 한번에 넘겨주는 것도 가능
      },
    },
  };
};