리액트 라즈베리파이에서 배포하기

앱 빌드 React

 

리엑트 프로젝트 터미널에 아래 커맨드를 입해서 빌드하면 프로젝트 폴더 하위에 build 라는 이름의 폴더가 생긴다.

이 폴더를 웹서버의 도큐먼트 루트로 설정하면 된다.

npm run build

 

빌드를 했다면 해당 폴더 파일을 라즈베리파이로 옮겨야한다.

옮기는 방법은 여러가지가 있지만 그중 SCP   Secure Copy Protocol 를 사용해보자.

명령프롬프트로 해당 폴더가 있는 경로로 이동후 아래 커맨드를 입력.

# scp -r 파일경로 사용자명@호스트주소:/다운로드할경로
scp -r build pi@123.123.123.123:/home/pi/react-app

이후 계정 패스워드를 입력하면 파일이 전송된다.

 

서버 설정 Express 

# 설치
npm install express

serve.js 파일을 생성하고 라즈베리파이 내에 원하는 경로를 만들어 넣어줌

app.use(express.static('/home/pi/react-app/build')); 이부분에 리엑트 빌드 폴더 경로를 적어주면 됨

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

// JSON 형태의 요청 바디를 파싱할 수 있도록 설정
app.use(express.json());

// 빌드된 React 앱을 제공
app.use(express.static('/home/pi/react-app/build'));

// 클라이언트의 문자열 정보를 받아 로그로 출력하는 라우트 설정
app.post('/api/log-string', (req, res) => {
    const { logString } = req.body;
    console.log(`Client Data: ${logString}`);  // 로그 출력
    res.sendStatus(200);
});

// 모든 경로를 index.html로 리디렉션 (React 라우팅을 위해)
app.get('*', (req, res) => {
    const ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
    const currentTime = new Date().toISOString();
    console.log(`ClientInfo: ${ip}, Access Time: ${currentTime}`); // 콘솔 로그로 IP 주소 출력
    res.sendFile(path.resolve('/home/pi/react-app/build', 'index.html'));
});

app.listen(port, () => {
    const currentTime = new Date().toISOString();
    console.log(`${currentTime} , Server is running on port ${port}`);
});

서버 관리하기 PM2 

데몬으로 실행하기 위해 pm2 를 사용

pm2 는 Node.js 의 프로세스 매니저이다.

 

sudo npm install -g pm2
pm2 startup
pm2 save

 

# 서버 실행
pm2 start /home/pi/react-app-server/serve.js

 

기타 자주사용 pm2 명령어

pm2 monit
pm2 list
pm2 log 'servername' 

pm2 kill 
pm2 restart

 

https://pm2.keymetrics.io/docs/usage/quick-start/

PM2 - Quick Start

 

 

끝 포트포워딩 제대로 했는지 확인하자