(삽질금지 시리즈) Docker 환경에서 NextJS SSR 사용시 주의할점

Next.js13에서 docker nginx환경에서 getServerSideProps(ssr) api 호출 에러 404 not found

 

개발 환경 구조는 다음과 같다.
docker-compose
  nginx 
  client
  backend

Next.js13에서 docker nginx환경에서 getServerSideProps(ssr) api 호출 에러 404 not foundnginx에서 localhost:3000일때 client를 localhost:3000/api를 호출 하면 baceknd를 호출 하게 proxy 설정을 해주었다.

export const getServerSideProps = (async context => {
	const queryClient = new QueryClient();
	const { scheduleId } = context.params as { scheduleId: string };
    
    await queryClient.prefetchQuery<ScheduleItemResponse>(
   ...
        )
}) satisfies GetServerSideProps;

page.tsx에서 ssr를 위한 getServerSideProps에서 api를 호출 하는데 계속 404 not found가 나오는 것이다.

 

[Error]

social-frontend-1  | AxiosError: Request failed with status code 404
social-frontend-1  |     at settle (file:///app/node_modules/axios/lib/core/settle.js:19:12)
social-frontend-1  |     at Unzip.handleStreamEnd (file:///app/node_modules/axios/lib/adapters/http.js:570:11)
social-frontend-1  |     at Unzip.emit (node:events:529:35)
social-frontend-1  |     at endReadableNT (node:internal/streams/readable:1400:12)
social-frontend-1  |     at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
social-frontend-1  |   code: 'ERR_BAD_REQUEST',
social-frontend-1  |   config: {
social-frontend-1  |     transitional: {
social-frontend-1  |       silentJSONParsing: true,
social-frontend-1  |       forcedJSONParsing: true,
social-frontend-1  |       clarifyTimeoutError: false
social-frontend-1  |     },
social-frontend-1  |     adapter: [ 'xhr', 'http' ],
social-frontend-1  |     transformRequest: [ [Function: transformRequest] ],
social-frontend-1  |     transformResponse: [ [Function: transformResponse] ],
social-frontend-1  |     timeout: 0,
social-frontend-1  |     xsrfCookieName: 'XSRF-TOKEN',

 

- 대충 이런식으로 에러가 나오는데, 하루종일 몇시간동안 cros 에러인지 axios 설정 문제인지 backend api가 문제인지, ssr에서 무엇인가 잘못 호출 했는지 별짓을 다 했다.

 

 

 

-REFERENCE

https://seito-horiguchi.medium.com/be-careful-when-implementing-next-js-ssr-in-a-docker-environment-715a6d4969e3

Be careful when implementing Next.js SSR in a Docker environment.

https://stackoverflow.com/questions/71885441/next-js-getserversideprops-is-not-working-using-docker

Next.js getServerSideProps is not working using docker