[Node.js] React를 Node 웹 서버를 통해 출력하기

1. 프로젝트 폴더 생성

2. react, node 폴더 생성

 

node Express 서버 설정 (node 폴더)

 

// package.json 생성
npm init -y
// express설치
npm i express --save

node > index.js

웹서버 구동을 5000번 포트로 응답받도록 설정 (맥은 5500으로 지정)

const express = require('express');
const app = express();
const port = 5000; // localhost:5000으로 출력

app.get('/', (req, res) => {
  res.send('Hello World2'); // 출력되는 내용
})

app.listen(port, () => {
  console.log(`Server app listening on port ${port}`);
})

터미널 창에 입력하면 실행

node index.js

터미널 창에서 npm start로 실행되게 하려면 package.json "scripts"에 추가

"start": "node index.js"

서버 변경점 인지해서 자동 실행시키려면 nodemon 패키지를 다운받고 설정

npm i nodemon
npm install nodemon

package.json 파일 내용 수정

"start": "nodemon index.js"

 

---

React 를 node 웹 서버로 출력하기

express에서 static 파일 제공

상대 경로

express에 내장된 함수를 사용하면 이미지, css, js 파일을 express로 제공할 수 있다

express.static(root, [options])

경로를 지정해주면 express에서 public 폴더 내에 있는 파일에 접근할 수 있게 된다.

app.use(express.static('public'))

절대 경로

node 폴더 외부에 있는 폴더의 경로를 지정하려면 절대 경로로 작성하며 path를 포함해 작성한다.

const path = require('path')
app.use('/static', express.static(path.join(__dirname, '../경로/경로/폴더 이름')))

 

---

 

기존 node 폴더의 index.js에 내용을 추가하면 외부에 있는 react의 폴더의 index.html에 접근해 출력할 수 있게 된다.

const express = require("express");
const app = express();
const port = 5000;

// 경로를 찾기 위해 path 추가
const path = require("path");

// express에서 react build 폴더까지 static 절대 경로로 설정
app.use(express.static(path.join(__dirname, "../react-ex/build")));

// 서버에서 5000포트로 접속하면 static폴더의 index.html을 화면에 내보냄
app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname, "../react-ex/build/index.html"));
});

// 어떤 url에서 새로고침 하더라도 화면에 뜰 수 있게 설정
app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname, "../react-ex/build/index.html"));
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

 

단, 라이브로 새로고침되지는 않고 react 폴더를 build 해야 적용됨.

npm run-script build

 

 

---

공식 홈페이지 참고

Express - Node.js web application framework