• 카테고리

    질문 & 답변

  • 세부 분야

    풀스택

  • 해결 여부

    미해결

서버사이드 랜더링시 초기화 오류.. 서버포트 80?

22.01.09 11:32 작성 조회수 282

0

안녕하세요.. 

서버사이드 랜더링 이후에 데이터가 계서 InitialState로 덮어쓰길래.. 어떤 문제인지 확인해보기위해 로그를 찍어주니  80번 포트를 바라보면서 오류가 나더라구요..

왠지 api 호출시에 포트번호를 자동으로 80으로 설정해주는 거 같은데...  노드버드는 프록시서버가 아니라 CORS 설정을 벡엔드에서 해주는 경우여서 알기가 어렵네요..

혹시 이런경우 서버사이드 랜더링 서버포트를 따로 설정해야하나요? 

(현재 next start로 개발서버 돌리고 있으며, 3000번 포트)

참고로 axios로 api 서버(8080포트서버) 를 next.config.js 에서 

rewrites 로 프록시서버설정을 통해 사용하고 있습니다.

hydrate오류.jpg

next.config.js_파일.png

course-thumbnail

[리뉴얼] React로 NodeBird SNS 만들기

서버사이드렌더링 준비하기

강의실 바로가기

답변 1

답변을 작성해보세요.

0

조현영님의 프로필

조현영

지식공유자

2022.01.09

저 에러는 80번 포트 서버가 안 켜져있을 때 에러가 나는 것인데요. 로컬호스트에 요청보내신 게 있나요?

mincoln419님의 프로필

mincoln419

질문자

2022.01.09

네 페이지 로딩시에 api 서버(8080포트)에서 목록을 가져와서 뿌려주는 장표인데요

useEffect 사용해서 dispatch 했을 경우에는 프록시 서버를 통해서 8080 포트에 제대로 access하는데, 서버사이드랜더링으로 바뀌니깐 80 포트에 접근하려다가 오류가 나더라구요..

saga에서는


function noticeQueryAPI(){
    return  axios.get("/api/notice");
};

function* queryNoticeRequest(){
    try{
        const result = yield call(noticeQueryAPI);//call - 동기, fork - 비동기
        console.log(result);
        yield put({
            type: QUERY_NOTICE_SUCCESS,
            data: result.data._embedded.tupleBackedMapList
        });
    }catch(err){
        console.log(err);
        yield put({
            type: QUERY_NOTICE_FAILURE,
        });
    }
   
};
 
/* watch Action*/
function* watchQueryNotice() {
    yield throttle(2000, QUERY_NOTICE_REQUEST, queryNoticeRequest);
};
....(생략)
....
export default function* noticeSaga() {
    yield all([
        fork(watchQueryNotice),
        fork(watchAddNotice),
        fork(watchUploadImg)
    ]);
};
 

이렇게 호출하고 있고

pages 디렉토리 아래에서 사용하는 notice.js에 getServerSideProps는 강의 내용과 동일합니다..

차이점은 proxy설정을 next.config.js 파일에서 다음과 같이  설정하는 점입니다.

module.exports = {
  // 전역적으로 사용할 env 변수
  env: {
    PUBLIC_URL: process.env.PUBLIC_URL,
    PUBLIC_IMAGE_URL: process.env.PUBLIC_IMAGE_URL,
    DEVLOG_SERVICE_URL: process.env.DEVLOG_SERVICE_URL
  },
  // server, serverless 등 어느 환경을 타겟으로 빌드할지
  target: process.env.BUILD_TARGET,
  // 정적파일을 제공할 경로, 내 경우엔 cloudfront CDN 주소
  assetPrefix: prod ? process.env.PUBLIC_URL : '',
  compress: true,

  async rewrites() {
      return [

        {
          destination: process.env.TOKEN_URL,//8080 포트의 api 서버
          source: process.env.TOKEN_PATH,// '/oauth/token'
        },
        {
          destination: process.env.DESTINATION_URL,//8080 포트의 api 서버
          source: process.env.SOURCE_PATH, // '/api/:path*'
        },

      ]
},

 

mincoln419님의 프로필

mincoln419

질문자

2022.01.09

아.. 찾아보다가 원인은 발견했네요..

serverside 랜더링할때에는 proxy서버를 거쳐서 처리하는게 아니라 axios의 baseURL로 호출하게 되면서.. 80 포트를 호출하게 된거더라구요

axios.defaults.withCredentials = true;
axios.defaults.baseURL="http://localhost:8080";
axios.defaults.timeout=10000

 

_app.js 이렇게 일단 설정은 해놔서 정상 동작하는건 확인했는데..

next.config.js의  proxy 서버 설정을 위와 같은 방식 말고 처리할 수있는 방법은 없을까요?...

 

 

 

이 글과 비슷한 Q&A