React - Node 연동

React - Node 연동

React는 그냥 프론트엔드일뿐임 ! 
Node는 Reqeust요청이오면 맞는 페이지를 전달해주면됌 ~

 

React Build

React 프로젝트를 먼저 Build하고, 프로젝트 혹은 Build 된 폴더 전체를 Node 프로젝트에 넣어준다 ~
Build방법은 아래와같음

npm run build

 

server.js

Node > server.js에 노드 화면을 라우팅해주기 위해 static 처리를 해준다 !

 

api Url > Node Static Url > 그외에 React Url 순서로 나는 맞추었다 ~

 

//Server Init 부분
    //미들웨어 셋팅
    this.setMiddleWare()

    //라우팅
    this.setRoute()

    //정적 디렉토리 추가
    this.setStatic()

    this.app.use('/public', express.static('src/public'))
    this.app.use('/uploads', express.static('uploads'))
    this.app.use(express.static(path.join(__dirname, '../react/build')))


//여기서부터 리엑트 경로로 설정해주면,
//아무것도 해당하지 않을때 리엑트 경로로 라우팅됨 !!

    //@ts-ignore
    this.app.get('/', (req, res) => {
      res.sendFile(path.join(__dirname, '../react/build/index.html'))
    })
    this.app.get('/*', (req, res) => {
      res.sendFile(path.join(__dirname, '../react/build/index.html'))
    })​