기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

# CodeBuild Lambda Node.js를 사용하여 단일 페이지 React 앱 생성
<a name="sample-lambda-react-nodejs"></a>

[React 앱 생성](https://create-react-app.dev/)은 단일 페이지 React 애플리케이션을 생성하는 방법입니다. 다음 Node.js 샘플은 Node.js를 사용하여 React 앱 생성에서 소스 아티팩트를 빌드하고 빌드 아티팩트를 반환합니다.

## 소스 리포지토리 및 아티팩트 버킷 설정
<a name="sample-lambda-react-nodejs.set-up-repo"></a>

Yarn 및 React 앱 생성을 사용하여 프로젝트의 소스 리포지토리를 생성합니다.

**소스 리포지토리 및 아티팩트 버킷을 설정하려면**

1. 로컬 시스템에서 `yarn create react-app <app-name>`을 실행하여 간단한 React 앱을 생성합니다.

1. React 앱 프로젝트 폴더를 지원되는 소스 리포지토리에 업로드합니다. 지원되는 소스 유형 목록은 [ProjectSource](https://docs.aws.amazon.com/codebuild/latest/APIReference/API_ProjectSource.html)를 참조하세요.

## CodeBuild Lambda Node.js 프로젝트 생성
<a name="sample-lambda-react-nodejs.create-project"></a>

 AWS CodeBuild Lambda Node.js 프로젝트를 생성합니다.

**CodeBuild Lambda Node.js 프로젝트를 생성하려면**

1. [https://console.aws.amazon.com/codesuite/codebuild/home](https://console.aws.amazon.com/codesuite/codebuild/home)://에서 AWS CodeBuild 콘솔을 엽니다.

1.  CodeBuild 정보 페이지가 나타나면 **빌드 프로젝트 생성**을 선택합니다. 그렇지 않을 경우, 탐색 창에서 **빌드**를 확장한 후 **빌드 프로젝트**를 선택하고 **빌드 프로젝트 생성**을 선택합니다.

1. **프로젝트 이름**에 이 빌드 프로젝트의 이름을 입력합니다. 빌드 프로젝트 이름은 각 AWS 계정에서 고유해야 합니다. 또한 선택에 따라 빌드 프로젝트에 대한 설명을 포함하여 다른 사용자가 이 프로젝트의 용도를 이해하도록 도울 수 있습니다.

1. **소스**에서 AWS SAM 프로젝트가 위치한 소스 리포지토리를 선택합니다.

1. **환경**에서 다음과 같이 합니다.
   + **컴퓨팅**에서 **Lambda**를 선택합니다.
   + **런타임**에서 **Node.js**를 선택합니다.
   + **이미지**에서 **aws/codebuild/amazonlinux-x86\$164-lambda-standard:nodejs20**을 선택합니다.

1. **결과물**에서 다음과 같이 합니다.
   + **유형**에서 **Amazon S3**를 선택합니다.
   + **버킷 이름**에서 이전에 생성한 프로젝트 아티팩트 버킷을 선택합니다.
   + **아티팩트 패키징**에서 **Zip**을 선택합니다.

1. **빌드 프로젝트 생성**을 선택합니다.

## 프로젝트 buildspec 설정
<a name="sample-lambda-react-nodejs.set-up-buildspec"></a>

CodeBuild는 React 앱을 빌드하기 위해 buildspec 파일에서 빌드 명령을 읽고 실행합니다.

**프로젝트 buildspec을 설정하려면**

1. CodeBuild 콘솔에서 빌드 프로젝트를 선택한 다음 **편집** 및 **Buildspec**을 선택합니다.

1. **Buildspec**에서 **빌드 명령 삽입**을 선택한 후 **편집기로 전환**을 선택합니다.

1. 사전 채워진 빌드 명령을 삭제하고 다음 buildspec에 붙여넣습니다.

   ```
   version: 0.2
   phases:
     build:
       commands:
         - yarn
         - yarn add --dev jest-junit @babel/plugin-proposal-private-property-in-object
         - yarn run build
         - yarn run test -- --coverage --watchAll=false --testResultsProcessor="jest-junit" --detectOpenHandles
   artifacts:
     name: "build-output"
     files:
       - "**/*"
   reports:
     test-report:
       files:
         - 'junit.xml'
       file-format: 'JUNITXML'
     coverage-report:
       files:
         - 'coverage/clover.xml'
       file-format: 'CLOVERXML'
   ```

1. **Update buildspec(buildspec 업데이트)**을 선택합니다.

## React 앱 빌드 및 실행
<a name="sample-lambda-react-nodejs.build"></a>

CodeBuild Lambda에서 React 앱을 빌드하고, 빌드 아티팩트를 다운로드하고, React 앱을 로컬에서 실행합니다.

**React 앱을 빌드하고 실행하려면**

1. **빌드 시작**를 선택합니다.

1. 빌드가 완료되면 Amazon S3 프로젝트 아티팩트 버킷으로 이동하여 React 앱 아티팩트를 다운로드합니다.

1. 프로젝트 폴더에서 React 빌드 아티팩트 및 `run npm install -g serve && serve -s build`의 압축을 풉니다.

1. `serve` 명령은 로컬 포트의 정적 사이트를 제공하고 터미널로 출력을 인쇄합니다. 터미널 출력의 `Local:`에서 localhost URL을 방문하여 React 앱을 볼 수 있습니다.

React 기반 서버의 배포를 처리하는 방법에 대한 자세한 내용은 [React 앱 배포 생성](https://create-react-app.dev/docs/deployment/)을 참조하세요.

## 인프라 정리
<a name="sample-lambda-react-nodejs.clean-up"></a>

이 자습서에서 사용한 리소스에 대한 추가 요금을 피하려면 CodeBuild 프로젝트에 대해 생성된 리소스를 삭제합니다.

**인프라를 정리하려면**

1. 프로젝트 아티팩트 Amazon S3 버킷 삭제

1. CloudWatch 콘솔로 이동하여 CodeBuild 프로젝트와 연결된 CloudWatch 로그 그룹을 삭제합니다.

1. CodeBuild 콘솔로 이동하여 **빌드 프로젝트 삭제**를 선택하여 CodeBuild 프로젝트를 삭제합니다.