몽쯔

express서버에서 index.js를 수정할때마다 npm start로 서버를 재실행 후 새로고침해 줘야한다.

이는 개발중에 매우 번거로우므로 nodemon을 설치해서 서버를 자동 재실행 하게 해준다.

$ npm install nodemon --save

node/pakage.json에 start를 nodemon index.js로 변경해준다.

{
  ...
  "scripts":{
    "start" : "nodemon index.js"
  }
}

변경후 npm start로 재실행을 해준다.

하지만 nodemon은 화면을 클릭해서 이동할 때는 잘뜨지만 변경된 주소에서 새로고침을 하면 읽어 드리지 못한다.

이를 수정하려면 node/index.js에서 모든 url에서 화면이 뜨도록 수정을 해줘야한다.

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../react/build/index.html'));
});

그러면 새로고침해도 잘뜬다!

리액트로 개발한 내용을 노드로 서버에 배포를 해보자!

파일구조

크게 node폴더와 react폴더로 나눈다.

그리고 그안에 react 초기 세팅을 해준다. (리액트로만 개발된게 있다면 그대로 복붙!)

순서 :

1. node폴더안에서 npm을 설치 후 express설치 

express란 ? node.js의 API를 효과적으로 사용할 수 있게 해주는 프레임워크

$ npm init -y
$ npm i express --save

2. node폴더 안에 index.js 파일 생성 (웹서버를 구동하기 위한 파일)

웹서버 구동

node/index.js의 기본 틀

// node/index.js
const express = require('express');
const app = express();
const port = 5050;

// 터미널에서 확인되는 내용
app.listen(port, ()=>{
  console.log(`서버 구동 중 ${port}`);
})

// 구동된 웹서버에서 확인되는 내용
app.get('/', (req,res)=>{
  res.send('hello world');
});

node/pakage.json에서 터미널에서 단축키로 입력할 수 있도록 scripts에 객체 추가

{
  ...
  "scripts":{
  ...
    "start": "node index.js"
    ...
  }
  ...
}

터미널에 npm start치면 구동된다.

서버 주소는 index.js에서 설정된 포트번호로 들어가면 된다 (localhost:5050)

리액트 뷰 화면을 node 웹서버에 띄우기

노드는 최종결과물인 build폴더 안에 있는 내용을 읽기 때문에 작업물을 빌드 해 줘야한다.

react폴더 안에서 아래의 구문을 터미널에 쳐주기

$npm run-script build

node/index.js에서 빌드된 작업물을 sendFile을 통해 화면에 출력해준다.

const express = require('express');
const path = require('path');
const app = express();
const port = 5050;

// express에서 build폴더를 static으로 지정
// 이 구문이없으면 build파일을 못읽어와 오류를 뿜어낸다.
app.use(express.static(path.join(__dirname,'../react/build')));

app.listen(port, ()=>{
  console.log(`서버 구동 중 ${port}`);
})

app.get('/', (req,res)=>{
  // 화면에 출력될 경로 입력
  res.sendFile(path.join(__dirname,'../react/build/index.html'));
});

npm start를 끊은 후 재시작후 화면을 새로고침하면 리액트에서 작업한 결과물이 뜬다.