질문입니다.

Question

안녕하세요 강사님. 제가 직접 모든 코드를 따라쳐보면서 각 코드가 가지는 의미들까지 되짚어보면서 이번주 공부를 하고 있는데요, 의문이 생긴 코드가 있어 질문을 합니다.  //use this to show the image you have in node js server to client (react js) //https://stackoverflow.com/questions/48914987/send-image-path-from-node-js-express-server-to-react-client app . use ( '/uploads' ,  express . static ( 'uploads' )); // Serve static assets if in production if  ( process . env . NODE_ENV  ===  "production" ) {    // Set static folder    app . use ( express . static ( "client/build" ));    // index.html for all page routes    app . get ( "*" , ( req ,  res )  =>  {      res . sendFile ( path . resolve ( __dirname ,  "client" ,  "build" ,  "index.html" ));   }); } 바로 이 코드인데요. 서버쪽의 index.js 입니다. 항상 개발단계에서만 작업을 하다보니 Production 단계에서는 이러한 코드처리가 구체적으로 어떤 의미를 가지는 건지가 잘 이해가 안되는 것 같아요.  대답하기 쉬우시라구 번호를 매겨 보았습니다.!!!  1. 일반적으로 코드를 완성하면 프론토 엔드 서버 따로 ( nginx 라던가 ), 벡 엔드 서버 따러 ( amazon ec2 라던가 ) 해서 각자의 역할을 분리하는 것으로 알고 있습니다. 2. 그렇다면 벡엔드쪽 코드인 위 코드에 프론트와 관련된 스태틱 폴더를 지정( app . use ( express . static ( "client/build" )); )하는 이유가 무엇인지요? 프론트 엔드의 스태틱 폴더를 관리하는 책임은 프론트 서버쪽 코드에서만 담당해야 하는 것이 아닐까요? 이 코드의 의미 자체를 모르겠어요 ㅠㅠ 3.  app . get ( "*" , ( req ,  res )  =>   코드의 의미는 SPA 이기때문에 어떤 호출이건간에 벡엔드는 해줄 것이 없고 그냥 프론트 서버의 index.html로 가라는 뜻으로 받아들이면 되나요?    좋은 강의, 자료 감사합니다. 즐거운 하루 되세요

John Ahn · Answer

안녕하세요 ^^  1.   먼저  약간 정정하면    nginx 프론트 서버도   EC2에       백엔드 서버와 함께 올라갑니다. ec2는  가상의 서버이며   그곳에다가   OS를 설치하고    그 OS안에   프론트 서버와  백엔드 서버가 올라갑니다  2. 리액트 부분을  실제 배포를 해서 사용을 하려면   npm run build 라는 걸 해서  build를 해야 합니다 ^^  그렇게 되면    client/build 폴더에  모든 react 소스가   webpack으로 인해 bundle 이 되어서 들어갑니다 ! 그래서 모든 static 파일들이 거기에 모여있기에   app . use ( express . static ( "client/build" ));  이런식으로 해주는 것입니다 ^^