inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

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

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

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

448

mincoln419

작성한 질문수 6

0

안녕하세요.. 

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

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

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

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

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

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

hydrate오류.jpg

next.config.js_파일.png

hydrate getserversideprops redux react nodejs express Next.js

답변 1

0

제로초(조현영)

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

0

mincoln419

네 페이지 로딩시에 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*'
        },

      ]
},

 

0

mincoln419

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

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 서버 설정을 위와 같은 방식 말고 처리할 수있는 방법은 없을까요?...

 

 

 

넥스트 버젼 질문

0

90

2

로그인시 401 Unauthorized 오류가 뜹니다

0

104

1

무한 스크롤 중 스크롤 튐 현상

0

192

1

특정 페이지 접근을 막고 싶을 때

0

116

2

createGlobalStyle의 위치와 영향범위

0

102

2

인라인 스타일 리렌더링 관련

0

98

2

vsc 에서 npm init 설치시 오류

0

157

2

nextjs 15버전 사용 가능할까요?

0

166

1

화면 새로고침 문의

0

129

1

RTK에서 draft, state 차이가 있나요?

0

160

2

Next 14 사용해도 될까요?

0

455

1

next, node 버전 / 폴더 구조 질문 드립니다.

0

359

1

url 오류 질문있습니다

0

214

1

ssh xxxxx로 우분투에 들어가려니까 port 22: Connection timed out

0

391

1

sudo certbot --nginx 에러

0

1293

2

Minified React error 콘솔에러 (hydrate)

0

477

1

카카오 공유했을 때 이전에 작성했던 글이 나오는 버그

0

255

1

프론트서버 배포 후 EADDRINUSE에러 발생

0

337

1

npm run build 에러

0

525

1

front 서버 npm run build 중에 발생한 에러들

0

399

1

서버 실행하고 브라우저로 들어갔을때 404에러

0

350

2

css 서버사이드 랜더링이 적용되지 않아서 문의 드립니다.

0

290

1

팔로워 3명씩 불러오고 데이터 합쳐주는걸로 바꾸고 서버요청을 무한으로하고있습니다.

0

249

2

해시태그 검색에서 throttle에 관해 질문있습니다.

0

206

1