AWS Amplify에 웹 애플리케이션 배포

시작 안내서

모듈 1: 새 Amplify 프로젝트 생성

이 모듈에서는 신규 웹 애플리케이션을 생성하고 Amplify를 구성합니다.

소개

이 모듈에서 사용자는 사용자 인터페이스 구축을 위한 JavaScript 라이브러리인 React를 사용하여 새로운 웹 애플리케이션을 생성하고, 첫 프로젝트에 대해 AWS Amplify를 구성하는 방법에 대해 배웁니다.

배우게 될 내용

  • 새 웹 애플리케이션 생성
  • 프로젝트에 Amplify 설정

 소요 시간

5분

 모듈 선행 조건

  • 관리자 수준의 액세스 권한이 있는 AWS 계정**
  • 권장 브라우저: 최신 버전의 Chrome 또는 Firefox

[**]생성된 지 24시간이 지나지 않은 계정은 이 자습서를 완료하는 데 필요한 서비스에 액세스할 권한이 아직 없을 수 있습니다.

구현

환경 확인

terminal/console 창에서 node -v 및 npm -v를 실행하여 최소 Node.js 버전 12.x 및 npm 버전 6.x 이상에서 실행 중인지 확인합니다. 그렇지 않다면 nodejs 및 npm 웹사이트에 방문하여 자세한 정보를 확인하십시오.

node -v

# Your output may differ based on the version installed.
12.1.1

npm -v

# Your output may differ based on the version installed.
6.14.6

Amplify CLI(명령줄 인터페이스)는 앱을 위한 AWS 클라우드 서비스를 생성하는 통합 도구 체인입니다. Amplify CLI를 설치해 보겠습니다.

npm install -g @aws-amplify/cli

참고: Amplify CLI를 전역으로 설치하고 있기에 시스템 정책에 따라 sudo를 통해 위의 명령을 실행해야 할 수 있습니다.

설치가 완료되면 다음 명령을 실행하여 Amplify를 구성합니다.

amplify configure

Amplify Configure는 브라우저를 열고 AWS 콘솔에 로그인하도록 요청할 것입니다.

로그인을 하면 Amplify CLI는 IAM 사용자를 생성할 것을 요청할 것입니다.

Specify the AWS Region
? region:  # Your preferred region
Specify the username of the new IAM user:
? user name:  # User name for Amplify IAM user
Complete the user creation using the AWS console

계정에 대한 AdministratorAccess를 보유한 사용자를 생성하여 AppSync, Cognito 등의 AWS 리소스를 프로비저닝합니다.

gsg-build-amplify-4

사용자를 생성하면 Amplify CLI는 Amplify CLI를 새로 생성한 IAM 사용자와 연결하기 위해 accessKeyId 및 secretAccessKey를 제공할 것을 요청할 것입니다.

Enter the access key of the newly created user:
? accessKeyId:  # YOUR_ACCESS_KEY_ID
? secretAccessKey:  # YOUR_SECRET_ACCESS_KEY
This would update/create the AWS Profile in your local machine
? Profile Name:  # (default)

Successfully set up the new user.

React 앱 생성

새 React 애플리케이션을 생성하려면 구성할 필요 없이 시작할 수 있는 도구 체인인 create-react-app을 사용합니다.

amplify-app이라는 애플리케이션을 생성한 후 amplify init으로 초기화합니다.

# note npx is installed with npm
npx create-react-app amplify-app
cd amplify-app
amplify init

amplify init을 실행하면, 앱에 대한 정보를 요청합니다. 아래에 제공된 값을 사용합니다.

? Enter a name for the project amplifyapp

? Enter a name for the environment dev

? Choose your default editor: None

? Choose the type of app that you're building javascript

Please tell us about your project
? What javascript framework are you using react

? Source Directory Path:  src

? Distribution Directory Path: build

? Build Command:  npm run-script build

? Start Command: npm run-script start

Using default provider  awscloudformation

? Select the authentication method you want to use: AWS profile

? Please choose the profile you want to use amplify

사용자가 마지막 프롬프트에 답변하면 필요한 필수 인프라를 생성하며 출력은 다음과 같은 형태입니다.

⠼ Initializing project in the cloud...

CREATE_IN_PROGRESS DeploymentBucket              AWS::S3::Bucket            Fri Sep 17 2021 08:48:24 GMT+0200 (South Africa Standard Time) Resource creation Initiated
CREATE_IN_PROGRESS AuthRole                      AWS::IAM::Role             Fri Sep 17 2021 08:48:23 GMT+0200 (South Africa Standard Time) Resource creation Initiated
CREATE_IN_PROGRESS UnauthRole                    AWS::IAM::Role             Fri Sep 17 2021 08:48:23 GMT+0200 (South Africa Standard Time) Resource creation Initiated
CREATE_IN_PROGRESS DeploymentBucket              AWS::S3::Bucket            Fri Sep 17 2021 08:48:23 GMT+0200 (South Africa Standard Time)                            
CREATE_IN_PROGRESS AuthRole                      AWS::IAM::Role             Fri Sep 17 2021 08:48:23 GMT+0200 (South Africa Standard Time)                            
CREATE_IN_PROGRESS UnauthRole                    AWS::IAM::Role             Fri Sep 17 2021 08:48:22 GMT+0200 (South Africa Standard Time)                            
CREATE_IN_PROGRESS amplify-amplifyapp-dev-144814 AWS::CloudFormation::Stack Fri Sep 17 2021 08:48:19 GMT+0200 (South Africa Standard Time) User Initiated             
⠼ Initializing project in the cloud...

CREATE_COMPLETE AuthRole   AWS::IAM::Role Fri Sep 17 2021 08:48:38 GMT+0200 (South Africa Standard Time) 
CREATE_COMPLETE UnauthRole AWS::IAM::Role Fri Sep 17 2021 08:48:38 GMT+0200 (South Africa Standard Time) 
⠸ Initializing project in the cloud...

CREATE_COMPLETE DeploymentBucket AWS::S3::Bucket Fri Sep 17 2021 08:48:45 GMT+0200 (South Africa Standard Time) 
⠴ Initializing project in the cloud...

CREATE_COMPLETE amplify-amplifyapp-dev-144814 AWS::CloudFormation::Stack Fri Sep 17 2021 08:48:47 GMT+0200 (South Africa Standard Time) 
✔ Successfully created initial AWS cloud resources for deployments.
✔ Initialized provider successfully.
Initialized your environment successfully.

Your project has been successfully initialized and connected to the cloud!

Some next steps:
"amplify status" will show you what you've added already and if it's locally configured or deployed
"amplify add <category>" will allow you to add features like user login or a backend API
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify console" to open the Amplify Console and view your project status
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

Pro tip:
Try "amplify add api" to create a backend API and then "amplify publish" to deploy everything

방금 생성한 것이 무엇인가요?

amplify init을 실행하여 신규 프로젝트를 초기화할 때 Amplify는 다음을 수행합니다.

  • 애플리케이션에 필요한 클라우드 리소스를 프로비저닝하는 데 사용할 AWS 프로필을 포함하여 프로젝트를 분석하고 위의 프로젝트 설정을 확인합니다.
  • amplify라는 폴더를 프로젝트 디렉터리 내부에 생성합니다. 이 폴더는 애플리케이션의 백엔드 구성을 포함합니다.
  • src/aws-exports.js라는 파일을 프로젝트 디렉터리 내부에 생성합니다. 이 파일은 애플리케이션에 더 많은 기능을 추가하면서 Amplify에서 프로비저닝하는 서비스에 대한 구성을 포함합니다.
  • Amplify 프로젝트를 보고 관리할 수 있는 AWS Amplify 콘솔 내 애플리케이션에 대한 클라우드 프로젝트를 생성합니다.
gsg-build-amplify-1

결론

이 모듈에서는 React 프론트앤드 애플리케이션을 생성하고 이를 Amplify로 초기화하여 AWS 계정에 배포할 준비를 하는 방법을 배웠습니다. 다음 모듈에서는 GraphQL을 사용하여 API를 프론트엔드 애플리케이션에 추가하는 방법을 배울 것입니다.

다음 모듈: API 연결

내용이 마음에 드셨는지요.

피드백을 제공해 주셔서 감사합니다.
이 페이지가 도움이 되어 기쁩니다. 지속적인 개선에 도움이 되는 추가 세부 정보를 공유해 주시겠습니까?
닫기
피드백을 제공해 주셔서 감사합니다.
이 페이지가 도움이 되지 못해 죄송합니다. 지속적인 개선에 도움이 되는 추가 세부 정보를 공유해 주시겠습니까?
닫기