build도 완료했고, 경로도 잘 설정했는데 문제가 발생했다.
SSR 페이지에서 경로 수정이 되지 않아 몇가지의 script 파일, 이미지 파일들을 찾을수가 없어 페이지 렌더시 오류가 발생했다.
SSR 페이지를 들어갔을때 ssr/_next/static/ ~~~ 이렇게 나오는 파일들이 이름이 바뀐것인지 vm에서 해당파일을 찾을수 없어서 나오는 오류인것 같았다.
해당 내용을 찾아보니 next.js 공식문서에서 확인할수 있었다.
https://nextjs.org/docs/api-reference/next.config.js/cdn-support-with-asset-prefix
1. assetPrefix 설정
/ssr로 접속될때 js 파일과 css 파일을 불러오지 못하는 문제가 있었기에 next.config.js 파일에 assetPrefix 설정을 해줬다.
next.config.js
module.exports = { reactStrictMode: true, trailingSlash: true, assetPrefix: "/ssr", };
2. 경로 설정 /ssr 추가
/ssr도 경로에 VM으로 보낼수 있도록 해준다.
Dockerfile 설정
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
SSR build시 public/ssr/_next 디렉토리를 만들어주고 ./public/ssr_next/static 에 폴더 전체를 복사한다.
이렇게 설정하면 SSR 페이지에서 파일을 못찾는 오류를 수정할수 있다.
SSR 배포를 마치며...
수업을 들었을때는 그냥 getServerSideProps 적용만 하면 되네? 라고 간단하게 생각했다가 아주 된통 혼난 느낌이다.
내가 온전히 SSR 배포를 한게 아니고 멘토님이 아주많이 도와주시고 문제해결을 해주셔서 완성된 결과이니 더욱더 공부할 필요성을 느끼게 되었다.
특히 리눅스 명령어를 다루는 부분이라던가... docker를 다루는 부분이라던가... 이런부분은 보완하도록 하자.
