NodeJs 기반에서 React 배포

 

사전 준비

 

Vsc, VSCode(Visual Studio Code) 설치

NodeJs 설치

NodeJs Express 설치

선택사항 Vsc & NodeJs 에서 TypeScript 설치

 

빌드된 React project 결과물 파일들
(도메인 이후의 상대경로 설정이 달라지면 실행 불가)

 

 

예제코드

React빌드 결과물 파일들을 root에 복사해 넣(index.html파일이 root에 있게 된다)는다.

sv1.js파일을 만들어 아래 코드 입력

"use strict";
const express = require('express');
const path = require('path');
const app = express();
const hostname = '127.0.0.1';
const port = 3000;

if (false) {
    //2b20 별도의 react folder사용 '/reactbuild' 방식.
    app.use('/', express.static(path.join(__dirname, '/reactbuild')));
    app.get('/', function (req, resp) {
        resp.sendFile(path.join(__dirname, '/reactbuild/index.html'));
    });
}
else {
    //2b20 webroot에 react에서 만든 html과 static folder등을 넣는 방식.
    app.use('/', express.static(path.join(__dirname, '/')));
}

app.listen(port, hostname, function () {
    console.log(`Server running at http://${hostname}:${port}/`);
});

 

Js파일 실행

js파일을 열고 '실행'->'디버깅 없이 실행'하면 nodejs로 js파일을 실행한다.

또는 아래 명령어로 직접 실행 가능.

node sv1.js