기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다. # Green Boost를 통한 풀스택 클라우드 네이티브 웹 애플리케이션 개발 살펴보기 *Ben Stickley, Amiin Samatar, Amazon Web Services* ## 요약 개발자의 진화하는 요구에 부응하기 위해 Amazon Web Services(AWS)는 클라우드 네이티브 웹 애플리케이션 개발의 효율적인 접근 방식에 대한 중요한 요구를 인식하고 있습니다. AWS는 AWS 클라우드에 웹 앱을 배포할 때 발생하는 일반적인 장애물을 극복할 수 있도록 지원하는 데 중점을 두고 있습니다. 이 패턴은 TypeScript, AWS Cloud Development Kit(AWS CDK), React, Node.js 등 최신 기술의 기능을 활용하여 개발 프로세스를 간소화하고 가속화하는 것을 목표로 합니다. Green Boost(GB) 툴킷을 기반으로 하는 이 패턴은 AWS의 광범위한 기능을 완전히 사용하는 웹 애플리케이션 구성에 필요한 실용적인 가이드를 제공합니다. 이는 포괄적인 로드맵 역할을 하며 Amazon Aurora PostgreSQL 호환 에디션과 통합된 기본 CRUD(생성, 읽기, 업데이트, 삭제) 웹 애플리케이션을 배포하는 프로세스를 안내합니다. 이는 Green Boost 명령줄 인터페이스(CLI)를 사용하고 로컬 개발 환경을 구축함으로써 이루어집니다. 애플리케이션이 성공적으로 배포되면 이 패턴이 인프라 설계, 백엔드 및 프런트엔드 개발, 시각화를 위한 cdk-dia와 같은 필수 도구를 포함하여 웹 앱의 주요 구성 요소를 심층적으로 분석하여 효율적인 프로젝트 관리를 촉진합니다. ## 사전 조건 및 제한 사항 **사전 조건 ** + [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) 설치 + [Visual Studio Code(VS Code)](https://code.visualstudio.com/download) 설치 + [AWS Command Line Interface(AWS CLI)](https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html) 설치 + [AWS CDK 툴킷](https://docs.aws.amazon.com/cdk/v2/guide/cli.html) 설치 + [Node.js 18](https://nodejs.org/en/download) 설치 또는 [pnpm이 설치된 Node.js 18](https://pnpm.io/cli/env) 활성화 + [pnpm](https://pnpm.io/installation) 설치(Node.js 설치의 일부가 아닌 경우) + TypeScript, AWS CDK, Node.js, React에 대한 기본 지식 + [활성 상태의 AWS 계정](https://docs.aws.amazon.com/accounts/latest/reference/manage-acct-creating.html) + [부트스트랩한 AWS 계정](https://docs.aws.amazon.com/cdk/v2/guide/bootstrapping.html)(`us-east-1`에서 AWS CDK를 사용) Amazon CloudFront Lambda@Edge 함수를 지원하려면 `us-east-1` AWS 리전****이 필요합니다. + [AWS 보안 인증 정보](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-envvars.html)(터미널 환경에 올바르게 구성된 `AWS_ACCESS_KEY_ID` 포함) + Windows 사용자의 경우 관리자 모드의 터미널(pnpm이 노드 모듈을 처리하는 방식을 수용하기 위함) **제품 버전** + JavaScript용 AWS SDK 버전 3 + AWS CDK 버전 2 + AWS CLI 버전 2.2 + Node.js 버전 18 + React 버전 18 ## 아키텍처 **대상 기술 스택 ** + Amazon Aurora PostgreSQL 호환 에디션 + Amazon CloudFront + Amazon CloudWatch() + Amazon Elastic Compute Cloud(Amazon EC2) + AWS Lambda + AWS Secrets Manager + Amazon Simple Notification Service(SNS) + Amazon Simple Storage Service(Amazon S3) + AWS WAF **대상 아키텍처** 다음 다이어그램은 사용자 요청이 Amazon CloudFront, AWS WAF, AWS Lambda를 거쳐 S3 버킷, Aurora 데이터베이스, EC2 인스턴스와 상호 작용하여 궁극적으로 개발자에게 도달한다는 것을 보여줍니다. 반면 관리자는 알림 및 모니터링 목적으로 Amazon SNS와 Amazon CloudWatch를 사용합니다. ![Green Boost CLI를 사용하여 Amazon Aurora PostgreSQL과 통합된 CRUD 웹 앱을 배포하는 프로세스.](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/images/pattern-img/bacafc47-07c0-494b-8bbf-24bdc9b54f6a/images/129691e9-7fd3-4208-ab8c-05b9f40a5c4c.png) 배포 후 애플리케이션을 더 자세히 살펴보려면 다음 예와 같이 [cdk-dia](https://github.com/pistazie/cdk-dia)를 사용하여 다이어그램을 만들 수 있습니다. ![첫 번째 다이어그램은 사용자 중심 보기를, cdk-dia 다이어그램은 기술 인프라 보기를 각각 보여줍니다.](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/images/pattern-img/bacafc47-07c0-494b-8bbf-24bdc9b54f6a/images/5e4c3321-47bd-44e7-bf14-f470eed984c1.png) 이 다이어그램은 웹 애플리케이션 아키텍처를 두 가지 각도에서 보여줍니다. cdk-dia 다이어그램은 Amazon Aurora PostgreSQL 호환 및 AWS Lambda와 같은 특정 AWS 서비스를 강조하여 AWS CDK 인프라에 대한 상세한 기술적 관점을 제공합니다. 반면, 다른 다이어그램은 더 넓은 관점에서 데이터의 논리적 흐름과 사용자 상호 작용을 강조합니다. 주요 차이점은 세부 수준에 있습니다. cdk-dia는 기술적 복잡성을 상세히 다루는 반면 첫 번째 다이어그램은 사용자 중심적인 보기를 제공합니다. cdk-dia 다이어그램 생성은 *AWS CDK를 사용하여 앱 인프라 이해하기* 에픽에서 다룹니다. ## 도구 **서비스** + [Amazon Aurora PostgreSQL 호환 에디션](https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/Aurora.AuroraPostgreSQL.html)은 PostgreSQL 배포를 설정, 운영 및 확장할 수 있는 완전 관리형의 ACID 준수 관계형 데이터베이스 엔진입니다. + [AWS Cloud Development Kit(AWS CDK)](https://docs.aws.amazon.com/cdk/latest/guide/home.html)는 AWS 클라우드 인프라를 코드로 정의하고 프로비저닝하는 데 도움이 되는 소프트웨어 개발 프레임워크입니다. + [AWS Command Line Interface(AWS CLI)](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-welcome.html)는 명령줄 쉘에서 명령을 사용하여 AWS 서비스와 상호 작용할 수 있는 오픈 소스 도구입니다. + [Amazon CloudFront](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html)는 전 세계 데이터 센터 네트워크를 통해 웹 콘텐츠를 전송함으로써 웹 콘텐츠 배포 속도를 높여 지연 시간을 줄이고 성능을 개선합니다. + [Amazon CloudWatch](https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/WhatIsCloudWatch.html)는 AWS 리소스의 지표와 AWS에서 실시간으로 실행되는 애플리케이션을 모니터링합니다. + [Amazon Elastic Compute Cloud(Amazon EC2)](https://docs.aws.amazon.com/ec2/)는 AWS 클라우드에서 확장 가능한 컴퓨팅 용량을 제공합니다. 필요한 만큼 가상 서버를 시작하고 빠르게 스케일 업하거나 스케일 다운할 수 있습니다. + [AWS Lambda](https://docs.aws.amazon.com/lambda/latest/dg/welcome.html)는 서버를 프로비저닝하거나 관리할 필요 없이 코드를 실행하는 데 도움이 되는 컴퓨팅 서비스입니다. 필요할 때만 코드를 실행하며 자동으로 확장이 가능하므로 사용한 컴퓨팅 시간만큼만 비용을 지불합니다. + [AWS Secrets Manager](https://docs.aws.amazon.com/secretsmanager/latest/userguide/intro.html)를 사용하면 코드에 하드코딩된 보안 인증 정보(암호 등)를Secrets Manager에 대한 API 직접 호출로 바꾸어 프로그래밍 방식으로 보안 암호를 검색할 수 있습니다. + [AWS Systems Manager](https://docs.aws.amazon.com/systems-manager/latest/userguide/what-is-systems-manager.html)는 AWS 클라우드에서 실행되는 애플리케이션과 인프라를 관리하는 데 도움이 됩니다. 애플리케이션 및 리소스 관리를 간소화하고, 운영 문제의 감지 및 해결 시간을 단축하며, AWS 리소스를 규모에 따라 안전하게 관리하는 데 도움이 됩니다. 이 패턴은 AWS Systems Manager Session Manager를 사용합니다. + [Amazon Simple Storage Service(S3)](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html)는 원하는 양의 데이터를 저장, 보호 및 검색할 수 있게 해주는 클라우드 기반 객체 스토리지 서비스입니다. [Amazon Simple Notification Service(SNS)](https://docs.aws.amazon.com/sns/latest/dg/welcome.html)를 사용하면 웹 서버 및 이메일 주소를 포함하여 게시자와 클라이언트 간의 메시지 교환을 조정하고 관리할 수 있습니다. + [AWS WAF](https://docs.aws.amazon.com/waf/latest/developerguide/what-is-aws-waf.html)는 보호되는 웹 애플리케이션 리소스로 전달되는 HTTP 및 HTTPS 요청을 모니터링할 수 있게 해주는 웹 애플리케이션 방화벽입니다. **기타 도구** + [Git](https://git-scm.com/docs)은 오픈 소스 분산 버전 제어 시스템입니다. + [Green Boost](https://awslabs.github.io/green-boost/overview/intro)는 AWS에서 웹 앱을 구축하기 위한 툴킷입니다. + [Next.js](https://nextjs.org/docs)는 특성 추가 및 최적화를 위한 React 프레임워크입니다. + [Node.js](https://nodejs.org/en/docs/)는 확장 가능한 네트워크 애플리케이션 구축을 위해 설계된 이벤트 기반 JavaScript 런타임 환경입니다. + [pgAdmin](https://www.pgadmin.org/)은 PostgreSQL을 위한 오픈 소스 관리 도구입니다. 데이터베이스 객체를 생성, 유지 관리 및 사용하는 데 도움이 되는 그래픽 인터페이스를 제공합니다. + [pnpm](https://pnpm.io/motivation)은 Node.js 프로젝트 종속성을 위한 패키지 관리자입니다. ## 모범 사례 다음 권장 사항에 대한 자세한 내용은 [에픽](#explore-full-stack-cloud-native-web-application-development-with-green-boost-epics) 섹션을 참조하세요. + Amazon CloudWatch 대시보드 및 경보를 사용하여 인프라를 모니터링합니다. + cdk-nag를 사용하여 정적 코드형 인프라(IaC) 분석을 실행하고 AWS 모범 사례를 적용합니다. + Systems Manager Session Manager를 사용하여 SSH(보안 쉘) 터널링을 통해 DB 포트 전달을 설정합니다. 이렇게 하면 공개적으로 노출된 IP 주소를 사용하는 것보다 더 안전합니다. + `pnpm audit`를 실행하여 취약성을 관리합니다. + [ESLint](https://eslint.org/)를 사용하여 정적 TypeScript 코드 분석을 수행하고 [Prettier](https://prettier.io/)를 사용하여 코드 형식을 표준화하는 모범 사례를 적용하세요. ## 에픽 ### Aurora PostgreSQL-Compatible을 사용하여 CRUD 웹 앱 배포 | 작업 | 설명 | 필요한 기술 | | --- | --- | --- | | Green Boost CLI를 설치합니다. | 다음 명령을 실행하여 Green Boost CLI를 설치합니다.
pnpm add -g gboost
| 앱 개발자 | | GB 앱을 생성합니다. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 앱 개발자 | | 종속 항목을 설치하고 앱을 배포합니다. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)배포가 완료될 때까지 기다리세요(약 20분). 기다리는 동안 CloudFormation 콘솔에서 AWS CloudFormation 스택을 모니터링합니다. 코드에 정의된 구성이 배포된 리소스에 어떻게 매핑되는지 확인합니다. CloudFormation 콘솔에서 [CDK 구성 트리 뷰](https://docs.aws.amazon.com/cdk/v2/guide/constructs.html)를 검토합니다. | 앱 개발자 | | 앱에 액세스합니다. | GB 앱을 로컬에 배포한 후 CloudFront URL을 사용하여 액세스할 수 있습니다. URL은 터미널 출력에 인쇄되지만 찾기가 다소 어려울 수 있습니다. 더 빠르게 찾으려면 다음 단계를 따르세요.[See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)
또는 Amazon CloudFront 콘솔에 액세스하여 CloudFront URL을 찾을 수도 있습니다.[See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)
배포와 관련된 **도메인 이름**을 복사합니다. `your-unique-id.cloudfront.net`와(과) 유사합니다. | 앱 개발자 | ### Amazon CloudWatch를 사용하여 모니터링 | 작업 | 설명 | 필요한 기술 | | --- | --- | --- | | CloudWatch 대시보드를 확인합니다. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 앱 개발자 | | 알림을 활성화합니다. | CloudWatch 대시보드를 사용하면 웹 앱을 능동적으로 모니터링할 수 있습니다. 알림을 활성화하여 웹 앱을 수동적으로 모니터링할 수 있습니다.[See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 앱 개발자 | ### AWS CDK를 사용하여 앱 인프라 이해 | 작업 | 설명 | 필요한 기술 | | --- | --- | --- | | 아키텍처 다이어그램을 생성합니다. | [cdk-dia](https://github.com/pistazie/cdk-dia)를 사용하여 웹 앱의 아키텍처 다이어그램을 생성합니다. 아키텍처를 시각화하면 팀원 간의 이해와 의사소통을 개선하는 데 도움이 됩니다. 시스템의 구성 요소와 그 관계에 대한 명확한 개요를 확인할 수 있습니다.[See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 앱 개발자 | | cdk-nag를 사용하여 모범 사례를 적용합니다. | [cdk-nag](https://docs.aws.amazon.com/prescriptive-guidance/latest/patterns/check-aws-cdk-applications-or-cloudformation-templates-for-best-practices-by-using-cdk-nag-rule-packs.html)를 사용하면 모범 사례를 적용하고 보안 취약성 및 잘못된 구성의 위험을 줄임으로써 인프라의 보안과 규정 준수를 유지할 수 있습니다.[See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 앱 개발자 | ### 데이터베이스 구성 및 스키마 평가 | 작업 | 설명 | 필요한 기술 | | --- | --- | --- | | 환경 변수를 가져옵니다. | 다음 단계를 사용하여 필요한 환경 변수를 얻을 수 있습니다.[See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 앱 개발자 | | 포트 전달을 설정합니다. | 다음 단계에 따라 포트 전달을 설정하세요.[See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 앱 개발자 | | Systems Manager Session Manager의 제한 시간을 조정합니다. | (선택 사항) 기본 20분 세션 제한 시간이 너무 짧으면 Systems Manager 콘솔에서 **세션 관리자**, **기본 설정**, **편집**, **유휴 세션 제한 시간**을 선택하여 최대 60분까지 늘릴 수 있습니다. | 앱 개발자 | | 데이터베이스를 시각화합니다. | pgAdmin은 PostgreSQL 데이터베이스를 관리하기 위한 사용자 친화적인 오픈 소스 도구입니다. 데이터베이스 작업을 단순화하여 데이터베이스를 효율적으로 생성, 관리, 최적화할 수 있습니다. 이 섹션에서는 [pgAdmin을 설치](https://www.pgadmin.org/download/)하고 PostgreSQL 데이터베이스 관리에 pgAdmin 특성을 사용하는 방법을 안내합니다.[See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 앱 개발자 | ### Node.js로 디버깅 | 작업 | 설명 | 필요한 기술 | | --- | --- | --- | | 항목 생성 사용 사례를 디버깅합니다. | 다음 절차에 따라 항목 생성 사용 사례를 디버깅합니다.[See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)[See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 앱 개발자 | ### 프런트엔드 개발 | 작업 | 설명 | 필요한 기술 | | --- | --- | --- | | 개발 서버를 설정합니다. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 앱 개발자 | ### Green Boost를 사용한 툴링 | 작업 | 설명 | 필요한 기술 | | --- | --- | --- | | monorepo 및 pnpm 패키지 관리자를 설정합니다. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 앱 개발자 | | pnpm 스크립트를 실행합니다. | 리포지토리의 루트에서 다음 명령을 실행합니다.[See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)
모든 워크스페이스에서 이 명령이 어떻게 실행되는지 확인해 보세요. 명령은 각 워크스페이스의 `package.json#scripts` 필드에 정의되어 있습니다. | 앱 개발자 | | 정적 코드 분석에 ESLint를 사용합니다. | 다음을 수행하여 ESLint의 정적 코드 분석 기능을 테스트합니다.[See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 앱 개발자 | | 종속성과 취약성을 관리합니다. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 앱 개발자 | | Husky를 사용하여 후크를 사전 커밋합니다. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)이러한 도구는 잘못된 코드가 애플리케이션에 유입되는 것을 방지하는 데 도움이 되는 메커니즘입니다. | 앱 개발자 | ### 인프라 해체 | 작업 | 설명 | 필요한 기술 | | --- | --- | --- | | 계정에서 배포를 제거합니다. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 앱 개발자 | ## 문제 해결 | 문제 | Solution | | --- | --- | | 포트 전달을 설정할 수 없음 | AWS 보안 인증 정보가 적절하게 구성되어 있고 필요한 권한이 있는지 확인합니다.
Bastion Host ID(`DB_BASTION_ID`) 및 데이터베이스 엔드포인트(`DB_ENDPOINT`) 환경 변수가 올바르게 설정되었는지 다시 확인합니다.
여전히 문제가 발생하는 경우 AWS 설명서에서 [SSH 연결 및 세션 관리자 문제 해결](https://docs.aws.amazon.com/systems-manager/latest/userguide/session-manager-getting-started-enable-ssh-connections.html)을 참조하세요. | | 웹사이트가 `localhost:3000`에서 로드되지 않음 | 터미널 출력에 전송 주소를 포함하여 포트 전달이 성공했다고 표시되는지 확인합니다.
로컬 시스템에서 포트 3000을 사용하여 충돌하는 프로세스가 없는지 확인합니다.
Green Boost 애플리케이션이 제대로 구성되고 예상 포트(3000)에서 실행되고 있는지 확인합니다.
웹 브라우저에서 로컬 연결을 차단할 수 있는 보안 확장 또는 설정이 있는지 확인합니다. | | 로컬 배포 중 오류 메시지(`pnpm deploy:local`) | 오류 메시지를 주의 깊게 검토하여 문제의 원인을 파악합니다.
필요한 환경 변수와 구성 파일이 올바르게 설정되었는지 확인합니다. | ## 관련 리소스 + [AWS CDK 설명서](https://docs.aws.amazon.com/cdk/latest/guide/home.html) + [Green Boost 설명서](https://awslabs.github.io/green-boost/learn/m1-deploy-gb-app) + [Next.js 설명서](https://nextjs.org/docs) + [Node.js 설명서](https://nodejs.org/en/docs/) + [React 설명서](https://reactjs.org/docs/getting-started.html) + [TypeScript 설명서](https://www.typescriptlang.org/docs/)