본문 바로가기
Web/React

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

by juein 2019. 3. 13.

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

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

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


Windows 운영체제와 

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




[Windows에서 환경 구축]



1.Node js 설치



NodeJs 공식 사이트(https://nodejs.org/ko/download)에서 Windows Installer를 내려받아 설치한다.


설치가 끝나면 cmd 창에서 버전확인 및 설치여부 확인이 가능하다.






2. yarn 설치


npm은 의존하는 라이브러리 개수가 많으면 속도가 저하된다.


yarn은 npm 문제점을 개선한 패키지 매니저로 npm을 대체하여 사용할 수 있다.





공식사이트(https://yarnpkg.com/en/docs/install#windows-tab) 에서 OS와 (Windows 선택) 버전을 선택 후 내려받아 설치한다.


버전은 특별한 이유가 없다면 Stable로 안정된 버전을 받자.




3. create-react-app 설치



cmd에서 yarn으로 create-react-app을 설치한다.


나는 설치 시 모든 디렉토리에서 사용하기 위해 global(전역)으로 설치하였다.




※ 리액트 버전 16.8 이후로는 Hooks가 도입되었다. ( 참고 : https://reactjs.org/docs/hooks-state.html)


프로젝트 첫 생성 후 App.js를 확인해보면 차이를 알 수 있는데


예전의 코드 (Hooks 미사용)

Class app extends components{
   render (
      return();
   )
}


16.8 이후의 코드 (Hooks 사용)

function App() {
  return ();
}


Hooks를 사용하면 클래스를 사용하지 않아도 되게끔 변경되었다.


나는 옛 방식의 class를 사용하는 방식이 더 편해서 create-react-app 으로 프로젝트 생성 시 


react-scripts 버전을 지정해서 프로젝트를 재생성 하였다 (선택)

create-react-app foo --scripts-version react-scripts@^2


설치 후 최신 버전으로 업데이트 (선택)

npm -S react-scripts@^3




4. 프로젝트 생성 및 실행


cmd에서 create-react-app 프로젝트명 명령어로 프로젝트를 생성한다.




생성한 프로젝트 폴더로 디렉토리 이동 후 yarn start를 하면


NodeJs 기본포트 3000번으로 실행이 된다.


port 변경은 아래 하단에 공통으로 적혀있는걸 참고.





[CentOS7 (7.4v) 에서 환경 구축]



1. NodeJS 설치


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

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



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


저장소에 추가

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


Node js 설치

sudo yum install nodejs


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


버전 확인

node --version
npm --version




2. yarn 설치


yarn 설치

sudo npm install yarn -g

버전 확인

yarn --version




3. create-react-app 설치


create-react-app 설치

yarn global add create-react-app




4. 프로젝트 생성


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

create-react-app test-project




5. 방화벽 포트 열어주기


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


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



포트허용

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


방화벽 상태도 확인해주자

systemctl status firewalld 


public.xml 파일에 직접 입력시

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>

====


방화벽 적용

systemctl reload firewalld


방화벽 시작

systemctl start firewalld


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

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


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

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


설정 변경후 재시작

firewall-cmd --reload





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


생성한 프로젝트 안의 package.json파일 내용 값 중 "start"값 앞에 원하는 포트를 적어주자



- Windows

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


- Linux & Mac 

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



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



- Windows 에선




- 리눅스에선 요렇게 설정




이제 package.json 파일 위치에서 yarn start로 실행하고


http://localhost:설정포트 


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


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

http://localhost:3000


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

http://localhost 

로 접속하면 된다.






정상적으로 뜬다면 성공



댓글0