각각의 페이지마다 SSR 적용을하는 페이지가 있고, SSG로 적용되는 페이지들이 있다.
그렇기 때문에 SSR build, SSG build를 나누어서 해주어야 한다.
build를 위한 사전설정
먼저 build 명령어를 나누기 위해 package.json 파일을 수정해준다.
SSG build는 build:ssg
SSR build는 build:ssr
이렇게 설정해준다.
SSG는 build한 후 버킷에 업로드 해주고, SSR은 VM에서 docker를 이용해 build하게 될것이다.
SSG 버킷 업로드
build:ssg를 입력하면 build가 진행되고 out 폴더 안에 파일들이 생성된다.
이제 이파일들을 버킷에 업로드 해준다.
모든 파일들이 버킷에 업로드 된다면 SSG 빌드는 마무리된다.
docker 설정
SSG build가 마무리 되었기 때문에 SSR build를 시작해야 한다.
SSR은 VM에서 docker를 이용해서 build를 해야하기 때문에 docker file을 설정해야한다.
docker.ignore, Dockerfile, docker-compose.yaml 3가지 파일을 설정해준다.
docker.ignore
node_modules/
docker-compose.yaml
version: "3.3" services: freeboard_frontend: build: context: . dockerfile: ./Dockerfile ports: - 3000:3000
Dockerfile
FROM node:16 WORKDIR /freeboard_frontend/ COPY ./package.json /freeboard_frontend/ RUN yarn install COPY . /freeboard_frontend/ RUN yarn build:ssr RUN mkdir -p ./public/ssr/_next RUN cp -R ./.next/static ./public/ssr/_next/static CMD yarn start
docker 파일들을 설정해 저장한후 VM에서 git pull해서 해당 파일들을 모두 내려 받는다.
VM SSR build
vm에서 내 파일들을 pull 받아서 저장시켰다면 아래 순서대로 명령어를 입력한다.
1. docker-compose build
2. docker-compose up -d
docker-compose build로 이미지를 구운후 docker-compose up -d 명령어로 실행한다는 것이며 -d는 백그라운드에서 돌아가도록(vm을 종료해도 계속 돌아가도록) 설정한다.
docker ps
docker ps로 정상적으로 돌아가는지 확인한다.
경로 설정
이제 SSG , SSR 모두 build가 끝났으니 경로를 설정해 SSG 페이지는 버킷으로, SSR 페이지는 VM으로 보내주는 작업을 해야한다.
상세페이지 2곳에 SSR 적용을 했다.
/* 뒤로 오는 주소는 모두 동일하게 적용된다. 상품 상세페이지는 /products/, 자유게시판은 /boards/ 이렇게 주소를 달고 오기에 이렇게 설정한다.
빌드도 완료했고, 경로설정도 완료했으니 서버사이드 렌더링이 완료되었을까?....
