[REACT] 18_Nodejs 서버와 React 연동

노드JS 프로젝트 구성 전 확인

1. node / npm 버전 확인

2. 프로젝트 폴더 생성 및 npm 초기화

C:\dev\nodejs\workspaces\node_react_shop

 

이동 후 npm 초기화

npm init

 

노드 익스프레스 설치

npm install express

 

server.js 파일 생성 후 기본 작성

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

const http = require('http').createServer(app);
http.listen(8080, function () {
  console.log('listening on 8080')
});

---

nodejs 프로젝트 구성

 

node_modules/

react-project/build

(*) 빌드된 리액트 프로젝트

server.js

 

public/

- main.html

(*) 이 부분 추가 : public/ 생성 및 하위 파일로 main.html 작성

 

---

server.js

// 현재 디렉토리 경로의 public/ 내부의 static 파일들을 사용           
app.use(
  express.static(
    path.join(
      __dirname,
      'public'     // __dirname : 현재 디렉토리 경로, public/ 이라는 폴더        
    )
  )
);

// 클라이언트로부터 / 요청을 받으면 public/main.html 리턴
app.get('/', function (req, res) {
  res.sendFile(
    path.join(__dirname, 'public/main.html')
  )
});

 

---

 

nodejs 프로젝트 구성

node_modules/

react-project/build

(*) react-project 라는 리액트 프로젝트 폴더

server.js

 

리액트 프로젝트/ 폴더에 들어가서 npm run build 로 리액트 빌드를 진행한다.

빌드된 리액트 파일들을 노드js에서 보내주면 된다.

 

 

---

server.js

// 현재 디렉토리 경로의 react-project/ 내부의 static 파일들을 사용
app.use(
  '/',
  express.static(
    path.join(
      __dirname, 'react-project/build'     // __dirname : 현재 디렉토리 경로, react-project/build 이라는 폴더
    )
  )
);

app.get('/', function (req, res) {
  res.sendFile(
    path.join(__dirname, 'react-project/build/index.html')
  );
});

 

(*) 만약 브라우저 라우팅 기능이 있는 리액트 프로젝트라면, 아래와 같이 * 로 아무거나 입력하면 index.html 를 보내주게끔 처리하면 된다.

 

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

요청과 응답 사이에 실행하는 코드를 미들웨어라고 한다.

 

(*) 만약 보여줄 페이지가 여러개일 경우 다음처럼 스태틱 데이터들을 사용한다.

app.use(										
	'/',									
	express.static(									
		path.join(								
			__dirname, 'public'     // __dirname : 현재 디렉토리 경로, public/ 이라는 폴더							
		)								
										
	)									
)
// URL /react 로 접속 시 리액트 페이지 리턴												
app.use(												
	'/react',											
	express.static(											
		path.join(										
			__dirname, 'react-project/build'     // __dirname : 현재 디렉토리 경로, react-project/build 이라는 폴더									
		)										
												
	)											
)

 

(*) 단, 서브 URL인 /react 로 접속 시 리액트 페이지를 리턴해주려면, 

리액트 프로젝트 package.json에 

homepage: "/react"

이런 식으로 기입을 해준 후 빌드(npm run build)를 해야 한다. 

 

(*) 매번 build 하여 테스트하는 것보다 개발 시에는 proxy 로 검색하여 해결

 

---

server.js

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

const http = require('http').createServer(app);
http.listen(8080, function () {
  console.log('listening on 8080')
}); 

// 현재 디렉토리 경로의 react-project/ 내부의 static 파일들을 사용
app.use(
  '/',
  express.static(
    path.join(
      __dirname, 'react-project/build'     // __dirname : 현재 디렉토리 경로, react-project/build 이라는 폴더
    )
  )
);

app.get('/', function (req, res) {
  res.sendFile(
    path.join(__dirname, 'react-project/build/index.html')
  );
});