TIL

[TIL/AWS] 2024/10/21

서버리스 컴퓨팅은 개발자가 서버 관리나 인프라에 대한 걱정 없이 애플리케이션의 코드를 작성하고 실행할 수 있도록 해주는 클라우드 컴퓨팅 모델을 의미하는 용어다. Serverless는 실제로 서버가 없는 것이 아니라, 개발자가 직접 서버를 관리할 필요가 없음을 의미한다.

2024년 10월 21일5min read

1. 서버리스 컴퓨팅이란? ✍️

캘리포니아 대학교 버클리의 한 연구진이 작성한 2019년 논문 'Cloud Programming Simplified: A Berkeley View on Serverless Computing'에서는 서버리스의 정의를 다음과 같이 확장한 바 있다.

서비스형 함수(FaaS)로 대변되는 클라우드 기능들은 서버리스 컴퓨팅의 핵심이지만 클라우드 플랫폼은 서비스형 백엔드(BaaS)와 같은 특정 애플리케이션 요구 사항을 충족하는 전문 서버리스 프레임워크도 제공한다. 간단히 말해서 '서버리스 컴퓨팅 = FaaS + BaaS'다.

1.1 FaaS(Function as a Service) 🚀

FaaS는 이벤트를 기반으로 작동하는 서버리스 컴퓨팅의 한 형태라고 볼 수 있다. 사용자가 특정 이벤트(HTTP 요청, 파일 업로드 등)에 반응하여 함수를 실행할 수 있도록 한다. FaaS는 다음과 같은 특징을 갖는다.

비용 효율성```: 사용자가 실제로 함수가 실행된 시간에 대해서만 비용을 지불하므로, 필요할 때에만 리소스를 사용한다.

신속한 개발```: 인프라를 관리할 필요가 없기에, 더 빠르게 애플리케이션을 개발하고 배포할 수 있다.

1.2 BaaS(Backend as a Service) 🚀

BaaS는 서버 측의 여러 기능을 클라우드 서비스로 제공하는 모델이다. 데이터베이스, 사용자 인증, 푸시 알림 등 다양한 백엔드 서비스를 API 형태로 제공하여, 개발자는 이러한 서비스를 쉽게 통합할 수 있다. BaaS의 주요 특징은 다음과 같다.

신속한 개발```: 복잡한 서버 측 로직을 구현하지 않고도 다양한 기능을 빠르게 구축할 수 있다.

확장성```: 클라우드 서비스 제공업체가 모든 인프라를 관리하기에, 서비스 확장이 용이하다.

2. AWS Amplify란? ✍️

AWS Amplify는 서버리스 애플리케이션 개발을 지원하는 통합 개발 플랫폼으로, 웹 및 모바일 애플리케이션의 백엔드와 프론트엔드를 쉽게 구축할 수 있도록 도와준다. AWS Amplify 프레임워크는 'CLI, 클라이언트 라이브러리, 툴체인, 웹 호스팅 플랫폼' 네 가지 주요 구성 요소로 이루어져 있다.

2.1 Amplify CLI 🚀

Amplify CLI는 개발자가 AWS 서비스에 쉽게 접근하고 구성할 수 있도록 도와주는 명령줄 도구다. 이를 통해 사용자는 다음과 같은 작업을 수행할 수 있다.

백엔드 리소스 생성```: Cognito(사용자 인증), DynamoDB(데이터베이스), S3(스토리지) 등 다양한 AWS 리소스를 간편하게 생성하고 설정할 수 있다.

배포 및 호스팅```: 애플리케이션의 백엔드를 AWS에 배포하고, 관련된 서비스와 연결할 수 있다.


요컨대, CLI를 통해 AWS의 복잡한 설정을 간단한 명령어로 수행할 수 있어 개발 효율성을 높일 수 있다.

### 2.2 Amplify 클라이언트 라이브러리 🚀

Amplify 클라이언트 라이브러리는 React, Angular, Vue.js, iOS, Android와 같은 다양한 프론트엔드 프레임워크에서 AWS 서비스를 쉽게 사용할 수 있도록 해주는 JavaScript 라이브러리다. 이 라이브러리를 사용하면 다음과 같은 기능을 구현할 수 있다.

데이터 관리```: GraphQL 및 REST API를 통해 데이터 CRUD 작업을 쉽게 수행할 수 있다.

2.3 Amplify 툴체인 🚀

툴체인은 코드 생성과 서버리스 함수 보일러플레이트 같은 것을 통해 신속한 개발이 가능하도록 한다. 가령, 사용자 인증, 파일 업로드, 데이터 표시 등을 위한 미리 디자인된 UI 컴포넌트를 사용할 수 있다.

2.4 Amplify 웹 호스팅 플랫폼 🚀

호스팅 플랫폼을 통해 Atomic Deployment, CI/CD, 사용자 지정 도메인 등이 포함된 라이브 도메인에 배포할 수 있다.

3. Amplify CLI 적용 ✍️

3.1 Amplify CLI 설치와 설정 🚀

1. CLI를 다음 명령어를 통해 global하게 설치한다. 🌿

npm install -g @aws-amplify/cli```


2. 사용자 자격 증명(access key, secret access key)를 통해 CLI를 설정하기 위해 configure 명령어를 실행한다. 🌿

명령어를 실행하면 다음 단계를 진행한다. 2-1. Specify the AWS region -> ap-northeast-2(아시아 태평양, 서울) 2-2. Specify username -> (본인이 기억할 수 있는 값으로 지정)

3. access key, secret access key를 CLI에 입력하면 성공적으로 설정이 완료되고 서비스 생성이 가능해진다. 🌿

+) 중간 과정에서 CLI가 브라우저를 통해 Dashboard와 Docs를 자동으로 열어준다. 해당 자료를 보고 진행하면 전혀 어려움이 없다.

+) 본인의 경우 이미 회원 가입이 되어 있었기에, sign in using root user email 버튼을 클릭해서 전 과정을 진행했고, 다중 인증 설정(MFA)은 우선 Skip 했다.

3.2 첫 번째 Amplify 프로젝트 🚀

1. 자신에게 해당하는 경로에서 새로운 리액트 프로젝트를 생성한다. 이후 생성된 리액트 프로젝트 디렉터리로 이동한다. 🌿

code

npx create-react-app amplify-app
cd amplify-app

2. 클라이언트에서 사용한 Amplify를 설치한다. 🌿

npm install aws-amplify @aws-amplify/ui-react```


3. Amplify 프로젝트를 생성하기 위해 init 명령어를 실행한다. 🌿

4. 제시되는 CLI 단계를 마치면 src 디렉터리에는 aws-exports 파일이, root 디렉터리에는 amplify 디렉터리가 생성된다. 🌿 4-1. ``aws-exports``: 사용자의 자격 증명을 가지고 CLI에서 생성한 리소스 카테고리의 key-value의 쌍이다. 4-2. ``amplify directory``: Amplify 프로젝트의 모든 코드와 설정 파일이 있고, 하위 디렉터리로 backend 디렉터리와 #current-cloud-backend 디렉터리가 있다.

3.3 첫 번째 서비스 생성과 배포 🚀

1. Amplify의 add 명령어를 통해 새 서비스를 추가한다. 🌿

amplify add auth```


2. Do you want to configure advanced settings? 🌿

3. push 명령어를 통해 인증 서비스를 배포한다. 🌿

amplify push```


4. 프론트엔드에서 테스트 진행 🌿

다음 코드를 index.js에 추가한다.

import { Amplify } from "aws-amplify"; import config from "./aws-exports"; Amplify.configure(config);

code

다음 코드를 src/App.js에 추가한다. 버전 이슈로 Amplify Dev Center의 UI Library 파트를 참고했다.

import { Amplify } from "aws-amplify"; import { withAuthenticator } from "@aws-amplify/ui-react"; import "@aws-amplify/ui-react/styles.css"; import awsExports from "./aws-exports";

Amplify.configure(awsExports);

function App({ signOut, user }) { return ( <>

Hello {user.username}

); }

export default withAuthenticator(App);

code


5. npm start 🌿

![](https://velog.velcdn.com/images/minkwan/post/27ae9acf-209b-4805-a7d1-88e8e2b31b7e/image.png)

![](https://velog.velcdn.com/images/minkwan/post/849297be-ea3f-4f58-b8c0-185fbdfcbba7/image.png)



### 3.4 리소스 삭제 🚀

1. 개별 기능 제거(remove) 🌿

2. 전체 Amplify 프로젝트 제거(delete) 🌿