React + 노드 도입 방법JS Express 애플리케이션을 AWS에 적용하시겠습니까?
React + Webpack / Babel + Node / Express 어플리케이션이 있는데 AWS에 전개하고 싶습니다.
React와 Node/Express를 별도로 도입해야 합니까?아니면 동시에 도입할 수 있을까요?
1. 2개의 다른 프로젝트가 있는 경우
예를 들어 React 단일 페이지 앱과 Node/Express API입니다.
a. 둘 다 개별적으로 전개할 수 있습니다.
또 다른 옵션은 Elastic Beanstalk 또는 EC2에 두 부품을 동시에 배치하는 것입니다.그러나 S3 및 CloudFront에서 호스팅하는 것의 이점, 즉 사용자 제공 시간을 단축하고 비용을 절감하는 이점을 놓치게 됩니다.또, Web 애플리케이션의 클라이언트측과 서버측을 개별적으로 갱신해 전개하는 것이, 보다 편리하고 예기치 않은 에러가 발생할 가능성이 낮다고 생각합니다.
개별 도입의 또 다른 이점:프런트 엔드 및 백엔드에 대해 서로 다른 팀이 있는 조직의 경우, 각 팀은 다른 팀에 의존하지 않고 자신의 측에서 애플리케이션을 도입할 수 있습니다.
b. S3가 아닌 S3 + CloudFront가 필요한 이유는 무엇입니까?
- CDN을 사용하는 모든 이점
- 클릭 한 번으로 사용자 자신의 도메인 이름 및 무료 SSL 인증서 제공
4xx이 에러를 하고 있는 됩니다)HTML5 History- router) ('라우터')- 캐싱 시스템
http2그리고http to https
c. CORS는 어떻게 취급합니까?
다른 서브도메인을 사용할 수 있습니다.
api.domain.comAPINode/Express API의app.domain.comappReact의 경우
app.get('/api', cors({ origin: 'https://app.domain.com' }), ...)
2. 하나의 프로젝트가 있는 경우
예를 들어 일부 React 뷰를 포함하는 노드 앱입니다.
앱 전체를 Elastic Beanstalk 또는 EC2에 배포해야 합니다.
주의: 2개의 서브프로젝트(React 앱용 폴더와 Node API용 폴더)를 포함한 단일 프로젝트가 있고, 두 서브프로젝트가 분리되어도 여전히 동작하는 경우 서브프로젝트를 개별적으로 전개할 수 있습니다(응답의 첫 부분 참조).
3. 둘 다
React 파트를 전개하기 전에 Webpack 빌드를 실행합니다.수동으로(AWS에 배포하기 전) 또는 자동으로(CI/CD 시스템에서) 수행할 수 있습니다.앱을 CRA(create-react-app)로 부트스트랩한 경우 실행하기만 하면 됩니다.yarn build ★★★★★★★★★★★★★★★★★」npm run build프로젝트의 루트에서 "빌드" 폴더의 내용을 S3 버킷에 업로드합니다.
4. 도구
- 공식 AWS S3 CLI - 고급을 사용하여 S3 버킷 및 개체 관리
aws s3명령어를 지정합니다. - 공식 AWS Elastic Beanstalk CLI - 다음을 사용하여 백엔드 관리 및 배포
eb명령어를 지정합니다. - S3-deploy - 파일을 S3에 전개하기 위한 CLI 유틸리티.
5. AWS에 국한되지 않는 경우
기본 개념
번거로움 없이 앱을 배포하려면 다음 세 가지 개념을 익혀야 합니다.마이크로 서비스, 컨테이너 및 프로세스 관리자.자세한 내용은 설명하겠습니다.또, 다음의 링크를 참조해 주세요.
마이크로 서비스
마이크로 서비스는 앱을 더 작은 서비스로 분할할 수 있는 아키텍처입니다.여기에는 여러 가지 이점이 있습니다.1 - 서비스는 쉽게 테스트할 수 있습니다.2 - 서비스는 대체 가능합니다.3 - 서비스는 개별적으로 확장할 수 있습니다.
컨테이너화
거의 모든 유용한 앱은 최소 수십 개의 종속성을 가지고 있습니다.타겟 머신에 의존관계를 인스톨 할 수 있지만, 거의 문제가 되지 않습니다.Docker와 같은 프로그램을 사용하면 앱용 컨테이너를 만들고 해당 컨테이너를 클라우드에 배포할 수 있습니다.(클라우드 프로바이더에 관계없이) 상세...
프로세스 매니저
프로세스 관리자는 앱이 원활하게 실행되고 모든 부품이 정상인지 확인합니다.앱이 크래쉬 했을 경우, 간단하게 재기동할 수 있습니다.
1. 서버리스 NodeJS/React 어플리케이션 도입
주의: 이 방법은 React JS를 사용하여 서버 렌더링을 수행하는 경우에는 작동하지 않습니다.다음 옵션으로 이동합니다.
앱을 빌드하여 정적 S3 웹 사이트에 배포할 수 있습니다.이 옵션은 마이크로 서비스 아키텍처를 사용하여 API를 리액트 앱에서 분리하는 경우에 사용할 수 있습니다.
S3에서 정적 웹 사이트를 만드는 방법은 매우 간단합니다.
- S3에서 웹사이트의 정확한 이름을 사용하여 버킷을 만듭니다.예: blog.stackoverflow.com
- 정적 호스팅 사용
- 루트 53에서 A 레코드를 생성하여 작성한 버킷에 연결합니다.
상세한 것에 대하여는, AWS 의 메뉴얼을 참조해 주세요.
2. EC2로의 NodeJS 애플리케이션 도입
마이크로 서비스마다 다른 EC2 인스턴스를 실행할 수 있습니다(API, React 앱 등).앱이 원활하게 실행되도록 하려면 PM2와 같은 프로세스 관리자를 사용해야 합니다.
연속 제공(도입 자동화)
자동 전개를 작성하려면 Terraform을 Ansible과 조합하여 사용하는 것이 좋습니다.Terraform은 매우 선언적이다.클라우드 인프라스트럭처의 외관을 설명하고 Terraform을 구축합니다.
한편 Ansible은 매우 절차적이고 새로운 서버를 프로비저닝하는 데 매우 적합합니다.
오류 처리 및 보고:초병
이상적으로는 유닛테스트를 실시하여 버그 코드를 실전 가동에 출하하지 않도록 하는 것이 좋습니다.(슈퍼 테스트와 함께 Jest를 사용하고 얕은 렌더링에는 효소를 사용합니다.)하지만 세상은 불완전하고 클라이언트에 발생할 수 있는 버그를 받는 것은 좋은 일입니다.Sentry 입력
반응 코드와 노드 코드를 동시에 조합하여 도입할 수 있습니다.
자세한 것은, 이쪽을 참조해 주세요.eb cli를 사용하여 Elastic Beanstalk에 reactjs 및 노드 유형 스크립트를 배포하는 방법
언급URL : https://stackoverflow.com/questions/41250087/how-to-deploy-a-react-nodejs-express-application-to-aws
'programing' 카테고리의 다른 글
| WooCommerce 주문에 대한 지불 방법을 ID별로 확인하는 방법은 무엇입니까? (0) | 2023.03.29 |
|---|---|
| Angular CLI에 의해 생성되는 "spec.ts" 파일은 어떤 용도로 사용됩니까? (0) | 2023.03.29 |
| 셸 스크립트로 JSON을 예쁘게 인쇄하려면 어떻게 해야 하나요? (0) | 2023.03.19 |
| jQuery - ajax POST의 폼 값을 가져옵니다. (0) | 2023.03.19 |
| WordPress 페이지의 html 코드를 편집하는 방법 (0) | 2023.03.19 |