CodeBuild Lambda Node.js 를 사용하여 단일 페이지 리액트 앱 생성 - AWS CodeBuild
소스 리포지토리 및 아티팩트 버킷을 설정합니다. CodeBuild Lambda Node.js 프로젝트 생성프로젝트 빌드 사양을 설정합니다.React 앱을 빌드하고 실행합니다.인프라를 정리하세요.

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

CodeBuild Lambda Node.js 를 사용하여 단일 페이지 리액트 앱 생성

React 앱 생성은 단일 페이지 React 애플리케이션을 생성하는 방법입니다. 다음 Node.js 샘플은 Node.js 를 사용하여 Create React App에서 소스 아티팩트를 빌드하고 빌드 아티팩트를 반환합니다.

소스 리포지토리 및 아티팩트 버킷을 설정합니다.

yarn을 사용하여 프로젝트의 소스 리포지토리를 만들고 React 앱을 생성하세요.

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

  1. 로컬 컴퓨터에서 를 yarn create react-app <app-name> 실행하여 간단한 React 앱을 생성합니다.

  2. React 앱 프로젝트 폴더를 지원되는 소스 리포지토리에 업로드합니다. 지원되는 소스 유형 목록은 을 참조하십시오 ProjectSource.

CodeBuild Lambda Node.js 프로젝트 생성

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

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

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

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

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

  4. 소스에서 AWS SAM 프로젝트가 위치한 소스 저장소를 선택합니다.

  5. 환경에서 다음과 같이 합니다.

    • 컴퓨팅에서 Lambda를 선택합니다.

    • 런타임의 경우 Node.js 를 선택합니다.

    • 이미지의 경우 AWS/codebuild/amazonlinux-x86_64-람다-스탠다드:nodejs20을 선택합니다.

  6. 결과물에서 다음과 같이 합니다.

    • 유형에서 Amazon S3를 선택합니다.

    • 버킷 이름에서 이전에 생성한 프로젝트 아티팩트 버킷을 선택합니다.

    • 아티팩트 패키징의 경우 Zip을 선택합니다.

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

프로젝트 빌드 사양을 설정합니다.

React 앱을 빌드하려면 buildspec 파일에서 빌드 명령을 CodeBuild 읽고 실행합니다.

프로젝트 빌드 사양을 설정하려면

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

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

  3. 미리 입력된 빌드 명령을 삭제하고 다음 빌드 사양에 붙여넣습니다.

    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'

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

React 앱을 빌드하고 실행합니다.

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

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

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

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

  3. React 빌드 아티팩트의 압축을 풀고 프로젝트 폴더에 저장합니다run npm install -g serve && serve -s build.

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

React 기반 서버의 배포를 처리하는 방법에 대해 자세히 알아보려면 React 앱 배포 만들기를 참조하십시오.

인프라를 정리하세요.

이 자습서에서 사용한 리소스에 대한 추가 요금이 부과되지 않도록 하려면 CodeBuild 프로젝트용으로 만든 리소스를 삭제하세요.

인프라를 정리하려면

  1. 프로젝트 아티팩트 Amazon S3 버킷을 삭제합니다.

  2. CloudWatch 콘솔로 이동하여 CodeBuild 프로젝트와 관련된 CloudWatch 로그 그룹을 삭제합니다.

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