• 카테고리

    질문 & 답변

  • 세부 분야

    풀스택

  • 해결 여부

    미해결

질문입니다.

20.04.20 10:00 작성 조회수 108

0

안녕하세요 강사님. 제가 직접 모든 코드를 따라쳐보면서 각 코드가 가지는 의미들까지 되짚어보면서 이번주 공부를 하고 있는데요,

의문이 생긴 코드가 있어 질문을 합니다. 


//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로 가라는 뜻으로 받아들이면 되나요?   

좋은 강의, 자료 감사합니다. 즐거운 하루 되세요

course-thumbnail

따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기

답변 1

답변을 작성해보세요.

0

John Ahn님의 프로필

John Ahn

지식공유자

2020.04.22

안녕하세요 ^^ 

1.   먼저  약간 정정하면    nginx 프론트 서버도   EC2에       백엔드 서버와 함께 올라갑니다.

ec2는  가상의 서버이며   그곳에다가   OS를 설치하고    그 OS안에   프론트 서버와  백엔드 서버가 올라갑니다 

2. 리액트 부분을  실제 배포를 해서 사용을 하려면   npm run build 라는 걸 해서  build를 해야 합니다 ^^ 

그렇게 되면    client/build 폴더에  모든 react 소스가   webpack으로 인해 bundle 이 되어서 들어갑니다 !

그래서 모든 static 파일들이 거기에 모여있기에  app.use(express.static("client/build"));

 이런식으로 해주는 것입니다 ^^ 

이 글과 비슷한 Q&A