[AWS] Elastic Beanstalk를 통해 React를 이동하는 응용 프로그램

배경.

최근 클라우드 포메이션이 고릴라 인프라 환경을 코딩했지만, 굳이 직접 만들지 않아도 간단한 앱을 일라스틱 빈스토크로 만들 수 있다고 생각해 실제로 접했다.
그래서 제가 만드는 환경에 어떤 앱을 넣어야 할지 망설일 때, 요즘 리액트가 유행한다는 소문이 자주 돌기 때문에 리액트 앱을 디자인해 봤어요.
이 목표는 아래와 같다.

Elastic Beanstalk/React라는 단어는 늘 들어본 것 같지만 잘 모르겠어요.아직 만져본 적이 없어서 만져보고 싶어요.

골대

로컬 시스템에서 React의 개발 환경을 만듭니다.

Elastic Beanstalk를 통해 위에서 제작한 React의 응용을 해제 처리하여 서버에서 동작하는지 확인한다.

개발 환경

Windows 10(명령 프롬프트 사용)

AWS CLI 가져오기

Python 3.9.1

이른바 Elastic Beanstalk

AWS는 "기본적으로 구성된 인프라 환경의 구축과 설계를 위한 자동화 서비스"를 제공합니다.
https://www.slideshare.net/AmazonWebServicesJapan/aws-black-belt-online-seminar-2017-aws-elastic-beanstalk
공식 문서에 의하면 다음과 같은 기록이 있다.
Elastic Beanstalk을 사용하면 앱 실행을 위한 인프라에 대한 지식을 얻지 않더라도 AWS 클라우드에서 간단하게 앱을 디버깅하고 관리할 수 있다.
https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/Welcome.html
특별한 인프라 환경의식이 없어도 앱 코드를 준비하면 이를 서버에서 간단하게 이동할 수 있다는 것이다.
대응하는 언어는 다음과 같다(2021/4 현재)

Go

Java

.NET

Node.js

PHP

Python

Ruby

보완이지만 옵스웍스, 클라우드포메이션과 자주 나오는데 뭐가 달라요?이런 의문이 종종 있기 때문에 아래에서 정리했습니다.
이름:
개요
디테일
Elastic Beanstalk
어플리케이션 관리
코드를 올리기만 하면 인프라 시설 환경의 구축/디버깅/감시 설정이 자동화된다.우리는 조작을 걱정하지 않고 웹 응용 프로그램 개발에 전념한다.
CloudFormation
스택 관리
기본 서비스에서 AWS의 거의 모든 서비스에 대해 자원 관리/제공이 가능하다.중점은 인프라 시설 환경을 건설하고 관리하는 것이다.
OpsWorks
스택 관리
Chef 식단을 이용하여 소프트웨어의 설정, 소프트웨어 패키지의 설치, 데이터베이스 설정, 서버의 축소, 코드의 디버깅 등 조작이 자동화되었다.고급 사용자 정의 및 운영 제어에 집중합니다.OpsWorks 스택의 지원 범위는 EC2, Elastic IP, Amazon CloudWatch 메트릭 등의 AWS 리소스를 적용하는 것으로 제한됩니다.

이른바 React

아래에 이해하기 쉬운 기술이 있기 때문에 직접 인용한다.
· SPA(Single-Page Application)를 구현하는 JavaScript 프레임워크 중 하나.
Angular, Vue.자주 js와 비교된다.
· 페이스북 회사에서 개발하여 페이스북 사이트에서도 사용한다.
2020년 4월의 최신 버전은 16.13.1이다.
· MIT 라이선스를 통해 공개되며 상업용으로 사용할 수 있습니다.
・JavaScript에서 HTML/XML을 직접 기술하는 JSX 기술을 사용합니다.
・JavaScript는 ES6의 구문인 import 및 aro 함수를 사용합니다.
· JSX와 ES6 문법을 베벨의 컨베이어 테이프를 통해 ES5의 자바스크립트로 변환한다.
· 크롬, Firefox 등의 동작을 통해.IE 8의 일부 기능, IE9의 제한, IE 10의 전체 기능 지원
http://www.tohoho-web.com/ex/react.html
이번에 React 프로그램을 시작하면 샘플의 페이지만 보이기 때문에 자세한 설명은 하지 않습니다.

실제 구축

React 가져오기

다음을 참조하였습니다.
https://qiita.com/renesisu727/items/4b34df1a3cfe8d534303

nodist 설치

nodist는 Node입니다.js의 nodist와 윈도 OS에 있는 노드입니다.js 버전 관리 도구입니다.
다운로드하여 설치했습니다.
https://github.com/nullivex/nodist/releases
이와 동시에 Node는js를 관리하는 패키지의 npm도 설치되었습니다.

http-server 설치

로컬 호스트에서 React 애플리케이션을 이동할 수 있는 패키지를 추가합니다.

npm install -g http-server

carete-react-app 설치

create-react-app를 설치하는 것은 React 프로젝트를 만드는 명령입니다.

npm install -g create-react-app

React 프로젝트 제작

상술한 것을 실시하면 경로도 자동으로 통과되기 때문에create-react-app를 직접 사용할 수 있다.
경로로 이동하여 다음을 수행합니다.

Program> create-react-app sample-app

sample-app 디렉터리를 만들고 프로젝트를 만듭니다.

Program> cd sample-app
Program\sample-app> npm start

상기 동작을 실행할 때 브라우저가 자동으로 상승하고 샘플 페이지를 표시합니다.

URL 확인http://localhost:3000/
3000번 포트에서 작동하는지 확인할 수 있습니다.

EB CLI 가져오기

여기서부터 Elastic Beanstalk을 이용해 위에서 제작한 React 앱을 디자인해 보자.
화면에서 실제로 앱을 업로드할 수 있지만, AWS는 Elastic Beanstalk 명령줄 인터페이스(EB CLI)를 제공하기 때문에 여기서 시행한다.
EB CLI 를 가져오는 방법은 다음과 같습니다.
https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/eb-cli3-install-windows.html
Python의 pip 명령으로 설치합니다.

pip install awsebcli --upgrade --user

실제로 디자인해 볼게요.

여기서부터 실제로 EB CLI를 사용하여 위에서 작성한 React 샘플 적용을 디버깅해 봅니다.
다음을 참조하였습니다.
https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/create_deploy_nodejs_express.html

.sample-app 산하에서 extensions 디렉터리를 만듭니다.

NodeCommand를 "npm start"로 설정하는 설정 파일을 추가합니다.

sample-app/.ebextensions/nodecommand.config

option_settings:
  aws:elasticbeanstalk:container:nodejs:
    NodeCommand: "npm start"

이른바 NodeCommand
Node.js 프로그램을 시작하는 명령입니다.
빈 문자열을 지정하면 app입니다.js、server.js, npm start 순서대로 사용합니다.
이하 인용
https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/command-options-specific.html

Elastic Beanstalk의 창고를 만듭니다.

eb init --platform node.js --region ap-northeast-1

React 애플리케이션을 실행하는 환경을 만듭니다.

eb create sample-app

여기, Sample-app는 Elastic Beanstalk에서 만든 응용 프로그램의 이름입니다.또한 --sample를 추가할 때 자신이 만든 코드가 아닌 샘플 응용 프로그램을 생성합니다.
몇 분만 기다리면Successfully launched environment: sample-app, 환경 구축 완료.
AWS의 관리 콘솔에서 서비스 > Elastic Beanstalk > 환경 > Sample-app를 선택하면 이벤트를 확인하고 환경을 생성할 수 있습니다.

또한 동일한 화면에서 작성된 애플리케이션의 URL과 건강검진 상태를 확인할 수 있습니다.

환경 생성이 완료되면 다음 명령을 사용하여 기본 브라우저에서 해당 환경의 URL을 열 수 있습니다.

eb open

로컬 환경에 표시되는 화면과 동일한 화면을 보여줍니다.

간단한 결말!!
그나저나 만들어진 환경에는 다음과 같은 자원이 있다.

EC2 인스턴스

실례 안전팀

로드 밸런서

로드 밸런서 보안 그룹

Auto Scoling 그룹

Amazon S 3배럴

Amazon CloudWatch 경고

AWS CloudFormation 스택

도메인 이름

이렇게 앱을 올리는 것만으로도 인프라 구축부터 감시까지 설정이 추가됐음을 알 수 있다.

총결산

Elastic Beanstalk을 사용하면 서버에서 React 애플리케이션을 이동할 수 있습니다.
일라스틱 빈스토크로 제작된 환경은 EC2 사례가 1대밖에 없기 때문에 일라스틱 빈스토크가 가용성을 높이는 인프라 환경을 구축할 수 있는지 시험해보고 싶다.
그게 다야.
감사합니다.