아마존 EC2 인스턴스의 Ubuntu 20.04 LTS에 ReactJS 어플리케이션 배포

React, React라고도 합니다.js 또는 ReactJS는 UI 구성 요소를 기반으로 사용자 인터페이스를 구축하는 데 사용되는 무료 소스 전면 자바스크립트 라이브러리입니다.메타(전 페이스북)와 개인 개발자와 회사로 구성된 커뮤니티가 유지보수한다.
페이스북, BBC, 넷플릭스, Salesforce, Asana, Dropbox 등 ReactJS를 광범위하게 사용하는 인기 사이트들Stackoverlow React에서 제공됨a 2021 survey.js(40.14%)는 jQuery(34.43%)를 제치고 가장 자주 사용하는 웹 프레임워크가 되었다.Support link
ReactJS에서 응용 프로그램을 개발하는 것은 쉬운 일일 수도 있지만, Ubuntu 20.04 서버에 ReactJS 응용 프로그램을 처음 배치하는 것이라면 쉽지 않을 것이다.

아마존 AWS에서 호스팅
관리형 ReactJS 응용 프로그램은 AWS EC2로 유행하는 옵션입니다.본고에서 우리는awsEC2의 실례로 위탁 관리하는 Ubuntu 20.04.3 LTS(GNU/Linux 5.11.0-1022-aws x86 64)에 gnix가 있는react 응용 프로그램을 배치하는 방법을 볼 수 있다.
참고: 이 문서에서는 AWS 클라우드 시스템과 ReactJS에 대해 기본적으로 알고 있다고 가정합니다.이 문서는 또한 사용자가 서버 EC2 실례를 가리키고 작업 중인 도메인을 구매했다고 가정합니다.
참고 도메인이 서버의 IP를 제대로 가리키는지 확인하려면 https://dnschecker.org/#A/domainxyz.com에서 확인(도메인 이름 바꾸기)
도메인을 아직 등록하지 않았다면, 계산하고 싶거나, 다른 더 싼 선택을 보고 싶을 수도 있습니다.
official AWS instruction
EC2 인스턴스에 ngnix 설치 및 구성

최신 Ubuntu LTS AMI

를 사용하여 EC2 인스턴스 시작

ssh를 통해 첫 번째 터미널에서 컨트롤러로 연결:

ssh <username>@<server-ip> -i <key-name>
설치nginxsudo apt update sudo apt install nginx -y설치하면 브라우저의 주소 표시줄에서 도메인에 액세스할 때 기본 nginx 페이지를 표시합니다.


노드스
Nodejs는 기본적인ReacJS 프로그램을 실행할 필요가 없지만, React 프로그램에서 유행하는 JSX 문법을 사용하는 것이 중요하다.
Nodejs는 ReactJS에서 사용하는 자바스크립트 생태계에 대한 접근을 제공함으로써 개발자의 생활을 더욱 수월하게 한다.
노드를 사용하려면 Nodejs가 필요합니다.js 기반의 구축 도구, 예를 들어browserify나 웹팩은nity 패키지를 구축하는 데 사용됩니다.

Nodejs 설치
Nodejs를 설치하기 위해서는 curl Nodejs를 서버에 다운로드해야 합니다.EC2 인스턴스curl는 기본적으로 설치됩니다.따라서 curl --version 서버에 결과가 표시되지 않으면 다음 명령을 실행하여 설치합니다.sudo apt-get install curl다음으로 Nodejs 설치curl -sL https://deb.nodesource.com/setup_15.x | sudo -E bash -NodeJs 버전 및 npm 버전 테스트node -v
npm --v
사선 설치(옵션)
개인적으로 실을 이용해서 제 가방을 관리하는 것을 좋아하기 때문입니다.저는 js 응용 프로그램 을 사용할 것입니다. 물론 npm를 사용할 것입니다.
'sudo npm설치사선-g
install Yarn
프로젝트 만들기
create react app를 사용하여react 프로그램을 만듭니다.create react 응용 프로그램이 설치되어 있지 않으면 필요할 때 y 을 누르도록 이 프로그램을 설치해야 합니다.npx create-react-app react-tutorial현재 디렉터리에 들어가서 실을 사용하여 구축하고 실행합니다.yarn install
yarn run build
yarn start `
(또는 상기 명령의 npm를 바꾸어 yarn로 모든 명령을 실행할 수 있습니다.)yarn start를 입력하면react 서버가 실행 중이고 셸의 관련 포트를 볼 수 있습니다.

서버의 공용 IP에서 react 응용 프로그램에 액세스하려고 합니다.예:
참고: 다음과 같이 EC2 인스턴스의 보안 그룹에서 3000 포트를 열어야 합니다.EC2 인스턴스에 http://172.31.3.180:3000를 연결할 수 있습니다.
이제 서버의 공용 IP(3000개 포트 사용)가 다음과 같이 표시되어야 합니다.
add an inbound rule to the security group
ReactApps가 실행 중이지만 문제가 있습니다.문제는 ssh 콘솔을 종료하면 ReactApp이 멈춘다는 것이다.이 문제를 해결하고 ssh 컨트롤러를 닫거나 종료하는 상황에서 프로그램을 실행하기 위해서는 프로그램 정지를 요구하지 않는 한 프로세스 관리자가 필요합니다.
PM2는 지속적인 애플리케이션 관리 및 온라인 유지를 지원하는 데몬 매니저입니다.설치하라고.sudo yarn global add pm2또는sudo npm install pm2@latest -gpm2를 설치한 후 기본 명령을 테스트해야 할 수도 있습니다. 예를 들어
pm2 상황
pm2 목록
pm2 재시작
pm2 정지
pm2 시작
pm2 삭제
프로그램을 실행하려면 프로그램 폴더에서 다음 명령을 실행하십시오. react-tutorialpm2 start yarn --name "React Tutorial" -- start어플리케이션이 시작되면 실행이 시작됩니다pm2 list.

시스템을 재부팅할 때pm2를 시작하려면 다음을 추가합니다.pm2 startup systemd현재, 우리의react 프로그램은 어떻게든 멈추지 않는 한 백엔드에서 계속 실행될 것입니다.
3000 포트에서 응용 프로그램에 접근할 수 있기 때문에, 기본 포트 80이나 Nginx 웹 서버에 표시하기를 희망합니다.이것은 또한 이 서버의 공공 IP 주소를 가리키기 때문에 도메인 이름의 가장 가까운 위치에 표시해야 한다는 것을 의미한다.
이 튜토리얼의 다음 단계에서는 역방향 에이전트로 Nginx를 사용하는 방법과 도메인 또는 공용 IP의 기본 로그인 페이지인 포트 80으로 트래픽을 이동하는 방법을 알아봅니다./etc/nginx/sites-available에 새 사이트 구성 작성cd /etc/nginx/sites-available sudo nano react-tutorial마지막 명령은 편집할 텍스트 파일을 열 것입니다.xxx를 바꿀 때 다음 코드를 붙여넣습니다.xx..IP 주소를 사용하고, 도메인 이름과 빈칸을 추가하고, 두 도메인 이름 중 하나 또는 둘 다 사용하십시오.
서버
듣다
듣다[:]:80;
서버 이름 xxx입니다.xxx.xxx.당신의 도메인 이름.일반 도메인 이름 형식;
log/var/log/nginx/reat 자습서에 액세스합니다.일반 도메인 이름 형식.들어오다로그
오류\u log/var/log/nginx/reat 자습서.일반 도메인 이름 형식.잘못 1로그
사이트/
대리 통행증http://127.0.0.1:3000;
고객 최대 신체 사이즈 50m;
클라이언트 기체 버퍼 크기 16k;
proxy http 버전 1.1;
프록시 설정 헤드 업그레이드 $http\U 업그레이드;
프록시 헤더 연결 "업그레이드";
프록시 설정 헤더 호스트 $Host;
프록시 캐시가 $http\u 업그레이드를 건너갑니다.
}
}Ctl+x -> Y를 사용하여 파일을 저장하고 종료합니다.
다음에, 우리는 새 사이트 설정을 가리키는 기호 링크를 만들어서 이 새 사이트를 활성화해야 한다sudo ln -s /etc/nginx/sites-available/react-tutorial /etc/nginx/sites-enabled/nginx 설정 문법에 오류가 없는지 확인하십시오sudo nginx -tNginx 재시작sudo systemctl restart nginx애플리케이션을 다시 시작하려는 경우도 있습니다.pm2 restart "React Tutorial"만약 모든 것이 순조롭다면, 프로그램이 루트나 아마존 EC2 실례의 공공 IP 주소에서 실행되는 것을 보아야 한다.