CentOS 8에서 Nginx 프록시로 ReactJS를 설치하는 방법
이 페이지에서
- 전제 조건
- 시작하기\n
- NPM 및 Node.js 설치
- Reactjs 설치
- Reactjs용 시스템 서비스 파일 만들기
- Nginx를 React 앱의 역방향 프록시로 구성\n
- 방화벽 구성\n
- 액세스 Reactjs 애플리케이션\n
- 결론
React는 Facebook에서 개발한 무료 오픈 소스 JavaScript 라이브러리입니다. 웹 프런트 엔드 및 UI 구성 요소를 만드는 데 사용됩니다. 웹 애플리케이션 또는 모바일 앱 개발에 자주 사용됩니다. 이를 통해 개발자는 서로 독립적인 재사용 가능한 구성 요소를 만들 수 있습니다. Axios, JQuery AJAX 또는 브라우저 내장 window.fetch를 포함한 다른 라이브러리와 함께 사용할 수 있습니다.
이 게시물에서는 CentOS 8에 React JS를 설치하는 방법을 보여줍니다.
전제 조건
- CentOS 8을 실행하는 서버.\n
- 서버 IP를 가리키는 유효한 도메인 이름입니다.\n
- 루트 암호는 서버에서 구성됩니다.\n
시작하기
시작하기 전에 시스템 패키지를 최신 버전으로 업데이트해야 합니다. 다음 명령을 실행하여 업데이트할 수 있습니다.
dnf update -y
모든 패키지가 최신 상태이면 다음 명령을 사용하여 다른 필수 종속성을 설치합니다.
dnf install gcc-c++ make curl -y
필요한 종속성 설치를 완료하면 다음 단계를 진행할 수 있습니다.
NPM 및 Node.js 설치
다음으로 시스템에 Node.js 및 NPM을 설치해야 합니다. 패키지 관리자라고도 하는 NPM은 Javascript 패키지와 상호 작용하는 데 사용되는 명령줄 도구입니다. 기본적으로 최신 버전의 NPM 및 Node.js는 CentOS 기본 리포지토리에 포함되어 있지 않습니다. 따라서 노드 소스 리포지토리를 시스템에 추가해야 합니다. 다음 명령으로 추가할 수 있습니다.
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:(("node",pid=2209,fd=18))
완료되면 다음 단계로 진행할 수 있습니다.
React 앱의 역방향 프록시로 Nginx 구성
다음으로 포트 80에서 React 앱에 액세스하려면 Nginx를 리버스 프록시로 구성해야 합니다. 먼저 다음 명령을 사용하여 Nginx 패키지를 설치합니다.
dnf install nginx -y
Nginx가 설치되면 다음 명령을 사용하여 새 Nginx 가상 호스트 구성 파일을 만듭니다.
nano /etc/nginx/conf.d/react.conf
다음 줄을 추가합니다.
server {
listen 80;
server_name react.example.com;
location / {
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $http_host;
proxy_pass http://localhost:3000;
}
}
완료되면 파일을 저장하고 닫은 다음 다음 명령을 사용하여 구문 오류가 있는지 Nginx를 확인합니다.
nginx -t
다음과 같은 결과가 표시되어야 합니다.
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful
마지막으로 Nginx 서비스를 시작하고 다음 명령을 실행하여 시스템 재부팅 시 시작되도록 활성화합니다.
systemctl start nginx
systemctl enable nginx
다음 명령을 실행하여 Nginx의 상태를 확인할 수도 있습니다.
systemctl status nginx
다음 출력에서 React 서비스의 상태를 가져와야 합니다.
? nginx.service - The nginx HTTP and reverse proxy server
Loaded: loaded (/usr/lib/systemd/system/nginx.service; disabled; vendor preset: disabled)
Active: active (running) since Tue 2021-03-23 02:57:48 EDT; 4s ago
Process: 4079 ExecStart=/usr/sbin/nginx (code=exited, status=0/SUCCESS)
Process: 4078 ExecStartPre=/usr/sbin/nginx -t (code=exited, status=0/SUCCESS)
Process: 4076 ExecStartPre=/usr/bin/rm -f /run/nginx.pid (code=exited, status=0/SUCCESS)
Main PID: 4081 (nginx)
Tasks: 2 (limit: 12524)
Memory: 4.0M
CGroup: /system.slice/nginx.service
??4081 nginx: master process /usr/sbin/nginx
??4082 nginx: worker process
Mar 23 02:57:48 centos8 systemd[1]: Starting The nginx HTTP and reverse proxy server...
Mar 23 02:57:48 centos8 nginx[4078]: nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
Mar 23 02:57:48 centos8 nginx[4078]: nginx: configuration file /etc/nginx/nginx.conf test is successful
Mar 23 02:57:48 centos8 systemd[1]: nginx.service: Failed to parse PID from file /run/nginx.pid: Invalid argument
Mar 23 02:57:48 centos8 systemd[1]: Started The nginx HTTP and reverse proxy server.
완료되면 다음 단계로 진행할 수 있습니다.
방화벽 구성
다음으로 방화벽을 통해 포트 80 및 443을 허용해야 합니다. 다음 명령을 실행하여 허용할 수 있습니다.
firewall-cmd --permanent --add-port=80/tcp
firewall-cmd --permanent --add-port=443/tcp
그런 다음 방화벽을 다시 로드하여 구성 변경 사항을 적용합니다.
firewall-cmd --reload
완료되면 다음 단계로 진행할 수 있습니다.
Reactjs 애플리케이션에 액세스
이제 웹 브라우저를 열고 URL http://react.example.com을 사용하여 Reactjs 애플리케이션에 액세스합니다. 다음 화면에 Reactjs 페이지가 표시되어야 합니다.
결론
축하합니다! CentOS 8에 Reactjs를 성공적으로 설치했습니다. 또한 Nginx를 Reactjs 앱의 리버스 프록시로 구성했습니다. 이제 Reactjs 애플리케이션 개발을 시작할 수 있습니다.