CentOS 8에서 Nginx 프록시로 ReactJS 설치하는 방법

React는 Facebook에서 개발한 무료 오픈 소스 JavaScript 라이브러리입니다. 웹 프론트엔드 및 UI 컴포넌트를 만드는 데 사용됩니다. 웹 애플리케이션이나 모바일 앱 개발에 자주 사용됩니다. 개발자가 서로 독립적인 재사용 가능한 컴포넌트를 만들 수 있게 해줍니다. Axios, JQuery AJAX 또는 브라우저 내장 window.fetch와 같은 다른 라이브러리와 함께 사용할 수 있습니다.

이 게시물에서는 CentOS 8에 React JS를 설치하는 방법을 보여드리겠습니다.

전제 조건

CentOS 8이 실행되는 서버.
서버 IP를 가리키는 유효한 도메인 이름.
서버에 구성된 루트 비밀번호.

시작하기

시작하기 전에 시스템 패키지를 최신 버전으로 업데이트해야 합니다. 다음 명령어를 실행하여 업데이트할 수 있습니다:

dnf update -y

모든 패키지가 최신 상태가 되면, 다음 명령어로 필요한 다른 종속성을 설치합니다:

dnf install gcc-c++ make curl -y

필요한 종속성 설치가 완료되면 다음 단계로 진행할 수 있습니다.

NPM 및 Node.js 설치

다음으로, 시스템에 Node.js와 NPM을 설치해야 합니다. NPM은 JavaScript 패키지와 상호작용하는 데 사용되는 명령줄 도구입니다. 기본적으로 CentOS 기본 저장소에는 NPM과 Node.js의 최신 버전이 포함되어 있지 않습니다. 따라서 Node 소스 저장소를 시스템에 추가해야 합니다. 다음 명령어로 추가할 수 있습니다:

curl -sL https://rpm.nodesource.com/setup_14.x | bash -

저장소가 추가되면 다음 명령어로 Node.js와 NPM을 설치합니다:

dnf install nodejs -y

설치가 완료되면 다음 명령어로 Node.js 버전을 확인합니다:

node -v

다음과 같은 출력이 표시되어야 합니다:

v14.16.0

다음 명령어로 NPM 버전도 확인할 수 있습니다:

npm -v

다음과 같은 출력이 표시되어야 합니다:

6.14.11

이 시점에서 NPM과 Node.js가 시스템에 설치되었습니다. 이제 Reactjs를 설치할 수 있습니다.

Reactjs 설치

시작하기 전에 시스템에 create-react-app을 설치해야 합니다. 이는 React 애플리케이션을 생성하는 데 사용되는 명령줄 유틸리티입니다.

다음과 같이 NPM을 사용하여 설치할 수 있습니다:

npm install -g create-react-app

설치가 완료되면 다음 명령어로 create-react-app의 설치된 버전을 확인합니다:

create-react-app --version

다음과 같은 출력이 표시되어야 합니다:

4.0.3

다음으로, 다음 명령어로 첫 번째 Reactjs 앱을 생성합니다:

create-react-app myapp

다음과 같은 출력이 표시되어야 합니다:

Success! Created myapp at /root/myapp
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd myapp
  npm start

다음으로, myapp 디렉토리로 변경하고 다음 명령어로 애플리케이션을 시작합니다:

cd myapp  
npm start

애플리케이션이 성공적으로 시작되면 다음과 같은 출력이 표시되어야 합니다:

Compiled successfully!

You can now view myapp in the browser.

  http://localhost:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

이제 CTRL+C를 눌러 애플리케이션을 중지합니다. 이제 다음 단계로 진행할 수 있습니다.

Reactjs를 위한 Systemd 서비스 파일 생성

다음으로, Reactjs 서비스를 관리하기 위해 systemd 서비스 파일을 생성하는 것이 좋습니다. 다음 명령어로 생성할 수 있습니다:

nano /lib/systemd/system/react.service

다음 줄을 추가합니다:

[Unit]
After=network.target

[Service]
Type=simple
User=root
WorkingDirectory=/root/myapp
ExecStart=/usr/bin/npm start
Restart=on-failure

[Install]
WantedBy=multi-user.target

파일을 저장하고 닫은 후, 다음 명령어로 systemd 데몬을 다시 로드합니다:

systemctl daemon-reload

다음으로, 다음 명령어로 Reactjs 서비스를 시작하고 시스템 재부팅 시 자동으로 시작되도록 설정합니다:

systemctl start react  
systemctl enable react

다음으로, 다음 명령어로 Reactjs 앱의 상태를 확인합니다:

systemctl status react

다음과 같은 출력이 표시되어야 합니다:

? react.service
   Loaded: loaded (/usr/lib/systemd/system/react.service; disabled; vendor preset: disabled)
   Active: active (running) since Tue 2021-03-23 02:52:32 EDT; 6s ago
 Main PID: 2191 (node)
    Tasks: 29 (limit: 12524)
   Memory: 220.3M
   CGroup: /system.slice/react.service
           ??2191 npm
           ??2202 node /root/myapp/node_modules/.bin/react-scripts start
           ??2209 /usr/bin/node /root/myapp/node_modules/react-scripts/scripts/start.js

Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: Project is running at http://0.0.0.0:3000/
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: webpack output is served from
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: Content not from webpack is served from /root/myapp/public
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: 404s will fallback to /
Mar 23 02:52:34 centos8 npm[2191]: Starting the development server...
Mar 23 02:52:37 centos8 npm[2191]: Compiled successfully!
Mar 23 02:52:37 centos8 npm[2191]: You can now view myapp in the browser.
Mar 23 02:52:37 centos8 npm[2191]:   http://localhost:3000
Mar 23 02:52:37 centos8 npm[2191]: Note that the development build is not optimized.
Mar 23 02:52:37 centos8 npm[2191]: To create a production build, use npm run build.

이 시점에서 Reactjs가 시작되고 포트 3000에서 수신 대기 중입니다. 다음 명령어로 확인할 수 있습니다:

ss -antpl | grep 3000

다음과 같은 출력이 표시되어야 합니다:

LISTEN    0         128                0.0.0.0:3000             0.0.0.0:*        users:((

전제 조건

시작하기

NPM 및 Node.js 설치

Reactjs 설치

Reactjs를 위한 Systemd 서비스 파일 생성

새 게시물을 받은 편지함에서 받기