Express 에서 ReactJS 소스 코드 구동

Express 에서 ReactJS 소스 코드 구동

ReactJS 프로젝트에서 다음의 명령어로 build를 하면 build 라는 디렉토리가 생성됩니다.

$> npm run build
... building

build 디렉토리를 express 의 ROOT 디렉토리로 복사를 합니다.

이후 아래와 같은 설정을 하여 ReactJS의 결과를 표출 하도록 지원 합니다.

const express = require('express');
const path = require('path');

const app = express();

// Serve the static files from the React app
app.use(express.static(path.join(__dirname, 'client/build')));

// An api endpoint that returns a short list of items
app.get('/api/getList', (req,res) => {
    var list = ["item1", "item2", "item3"];
    res.json(list);
    console.log('Sent list of items');
});

// Handles any requests that don't match the ones above
app.get('*', (req,res) =>{
    res.sendFile(path.join(__dirname+'/client/build/index.html'));
});

const port = process.env.PORT || 5000;
app.listen(port);

console.log('App is listening on port ' + port);

참고 자료를 보면 더 정리된 내용이 있습니다.

참고자료

• Deploying a React app with React-Router and an Express Backend