[React] CentOS7 / React + create-react-app + yarn + Node js 환경 구축

React를 사용해보고싶지만 webpack / babel 등을 설정하느라 시간을 투자하기 싫을때

create-react-app 도구를 사용하면

React 작업환경을 명령어 하나로 설정 할 수 있다.

 

CentOS7 (7.4v) 환경에서 React + create-react-app + yarn + Node js 환경을 구축해보자

 

 

공식사이트를 참고하여 Node js를 설치

https://nodejs.org/en/download/package-manager/#enterprise-linux-and-fedora

 

 

CentOS7 에서 저장소 할당 후 Node js를 설치하면 된다.

 

저장소에 추가

?

1 2	curl -sL https://rpm.nodesource.com/setup_10.x | sudo bash - curl -sL https://rpm.nodesource.com/setup_10.x | bash -

 

Node js 설치

?

1	sudo yum install nodejs

 

Node js 설치시 npm은 자동으로 설치된다

 

버전 확인

?

1 2	node --version npm --version

 

yarn 설치

?

1	sudo npm install yarn -g

버전 확인

?

1	yarn --version

 

create-react-app 설치

?

1	yarn global add create-react-app

 

React 프로젝트 생성 (create-react-app 프로젝트명)

?

1	create-react-app test-project

 

포트 열어주기

CentOS7은 포트를 열어주어야 한다.

나는 Node js 의 기본 포트인 3000번과 http의 기본포트인 80을 같이 열어놓았다.

 

포트허용

?

1 2 3

firewall-cmd --permanent --zone=public --add-port=3000/tcp firewall-cmd --permanent --zone=public --add-port=80/tcp firewall-cmd --reload

 

방화벽 상태도 확인해주자

?

1	systemctl status firewalld

 

public.xml 파일에 직접 입력시

?

1	vi /etc/firewalld/zones/public.xml

 

====

<?xml version="1.0" encoding="utf-8"?>

<zone>

  <short>Public</short>

  <description>For use in public areas. You do not trust the other computers on networks to not harm your computer. Only selected incoming connections are accepted.</description>

  <service name="dhcpv6-client"/>

  <service name="ssh"/>

  <port protocol="tcp" port="80"/>

  <port protocol="tcp" port="3000"/>

</zone>

====

 

방화벽 적용

?

1	systemctl reload firewalld

 

방화벽 시작

?

1	systemctl start firewalld

 

혹시 ip가 막혀있을수 있다면... 허용 IP 추가

--add-source=<source range>/netmask 옵션을 사용하여 IP 추가

 

ex ) 192.168.1. 대역에서 ssh 접근을 허용시

?

1	firewall-cmd --permanent --zone=public --add-source=192.168.1.0/24 --add-port=22/tcp

 

설정 변경후 재시작

?

1	firewall-cmd --reload

 

 

create-react-app 프로젝트 내에서 포트 변경시

package.json파일의 "start"값 앞에 포트를 적어주자

 

 

- Window 

"scripts": { "start": "set PORT=원하는포트 && react-scripts start",

 

- Linux & Mac 

"scripts": { "start": "PORT=원하는포트 react-scripts start",

 

 

나는 80포트에서 실행하고싶어서 80으로 설정해두었다.

 

 

 

이제 생성한 프로젝트 안의  package.json 파일 위치에서 yarn start로 실행하고

 

http://localhost:설정포트 

 

로 접속하면 초기 페이지가 뜬다.

 

포트설정을 별도로 하지 않았다면

http://localhost:3000

 

나처럼 80포트로 설정해두었다면

http://localhost 

로 접속하면 된다.

 

 

 

 

정상적으로 뜬다면 성공

 

출처 : https://juein.tistory.com/36?category=780579