2018년 4월 18일 수요일

[AWS] 프론트엔드 개발자가 혼자 웹어플리케이션 만들기. #1. 시리즈 포스팅 소개

[AWS] 프론트엔드 개발자가 혼자 웹어플리케이션 만들기. #1. 시리즈 포스팅 소개


시리즈 포스팅 순서
#1. 시리즈 포스팅 소개
#2. AWS Amplify와 Cognito를 이용한 회원가입, 로그인 기능 구현
#3. AWS Amplify와 S3를 이용한 이미지 저장
#4. AWS API Gateway, Lambda, DynamoDB를 이용한 REST API 구현
      (Amplify를 이용한 API 호출 방법 포함)
#5. AWS Lambda에 Express.js 기반의 웹어플리케이션 배포하기
      (AWS ACM, API Gateway를 이용한 Custom Domain 적용 방법 포함)
#6. AWS S3에 Static Web Hosting으로 SPA(Single Page Application) 웹어플리케이션 배포하기
      (AWS CloudFront, Route53을 이용한 HTTPS 지원방법 포함)


이번에는 처음으로 포스팅을 한가지 주제에 대한 시리즈로 작성해보려고 합니다.
우선, 주제는 'AWS Serverless(서버리스)를 이용해서, 프론트엔드 개발자가 혼자 웹어플리케이션 만들기'입니다.

이번 포스팅에서는 본 시리즈에서 예시로 사용할 간단한 웹어플리케이션에 대한 소개를 하고, 해당 웹어플리케이션과 관련해서 제가 위와 같은 주제를 정리하게 된 이유를 소개하려합니다. 마지막으로는, 시리즈의 차례를 소개하겠습니다.


> 예시로 사용할 웹어플리케이션: NameSite

  이번 시리즈에서 예시로 사용할 웹어플리케이션의 이름은 NameSite입니다.
  보통 자신의 이름, 회사, 이메일, 연락처 등을 간단히 전달하기 위해 우리는 명함(NameCard)를 사용합니다.
  저는 명함(NameCard)와 같은 용도로 사용할 수 있는 템플릿이 정해진 개인 웹사이트를 만들 수 있는 웹어플리케이션을 만들어보려합니다. 그리고 그 웹어플리케이션의 이름을 NameCard에서 따와서 NameSite라고 지었습니다.

(그림) NameSite 간략 디자인

  NameSite에 대한 기능을 설명하자면, NameSite의 관리자페이지에서 로그인 한 사용자가 정해진 템플릿에 커버 이미지, 프로필 이미지, 해시태그, 기타 정보를 작성하고 저장합니다.
  저장 후에 개인 NameSite(ex. my-namesite.walkinpcm.com/{개인도메인})에 접속하면 명함처럼 저장된 정보가 나타나게됩니다.

  이와 같은 웹어플리케이션을 만들기 위해서는 크게 아래와 같은 기능들이 필요합니다.

  • 사용자 관리(로그인)
  • 이미지 저장
  • 정보 저장
  • 웹어플리케이션을 구동할 서버

  이런 기능들을 구현하려면 프론트엔드 개발 이외에, 백엔드에서 REST API를 제공하는 Web Server, Database, Storage 등을 구축해야할 것입니다.

> 프론트엔드 개발자의 한계

  NameSite를 만들기 위해서 프론트엔드 개발자와 백엔드 개발자가 모두 있었다면 각자의 역할을 수행하면서 NameSite를 만들어내면 될 것입니다. 하지만 문제가 있습니다. 제가 프론트엔드 개발자라서 프론트엔드는 직접 만들어내면 되지만, 백엔드 개발자가 없고 제가 백엔드를 구현할 능력도 없습니다.
  이렇게 한계에 부딪쳐서 만들고 싶은 웹어플리케이션을 못 만들게 될까요?

> 구원자, AWS Serverless

  이러한 고민을 하는 개발자가 비단 저 뿐만은 아닌듯 합니다. 그래서인지 언제나 개발자들을 최우선으로 생각하고 개발자들을 위한 좋은 서비스를 AWS에서는 Serverless 서비스들을 제공하고있습니다.

  Serverless에 대해서 AWS에서는 아래와 같이 정의하고 있습니다.

"서버리스 컴퓨팅을 사용하면 서버를 고려하지 않고 애플리케이션과 서비스를 구축하고 실행할 수 있습니다. 서버리스 애플리케이션에서는 사용자가 서버를 프로비저닝, 확장 및 관리할 필요가 없습니다. 거의 모든 유형의 애플리케이션 또는 백엔드 서비스를 서버리스로 구축할 수 있으며, 애플리케이션을 고가용성으로 실행하고 확장하는 데 필요한 모든 것이 자동으로 처리됩니다."

  강조해 놓은 부분들이 참 매력적인 말들입니다. 그리고 그 말들이 AWS Serverless의 장점들입니다. 기존의 IDC에서 서버 장비를 대여하는 방식이나, EC2와 같은 가상서버에서 서비스를 구현한다면, 구성요소 하나하나를 직접 구축해야하며, 고가용성을 달성하기 위한 시스템 아키텍처 구성 등의 작업도 해야할 것입니다.
  하지만, AWS Serverless를 이용한다면 AWS Console 화면에서 정말 간단한 절차로 고가용성의 백엔드 서비스를 만드는게 가능합니다. 이후의 포스팅에서는 NameSite의 핵심 기능들 만드는 방법을 소개하며, 이때 사용되는 AWS 서비스들을 함께 소개하겠습니다.

> 앞으로의 차례

본 포스팅에서 소개한 예시 웹어플리케이션인 NameSite를 만들기 위해 필수적인 백엔드 시스템을 만들기 위한 자세한 방법들을 아래와 같은 순서로 포스팅을 작성해보도록 하겠습니다.

  1. AWS Amplify와 Cognito를 이용한 회원가입, 로그인 기능 구현
  2. AWS Amplify와 S3를 이용한 이미지 저장
  3. AWS API Gateway, Lambda, DynamoDB를 이용한 REST API 구현
    (Amplify를 이용한 API 호출 방법 포함)
  4. AWS Lambda에 Express.js 기반의 웹어플리케이션 배포하기
    (AWS ACM, API Gateway를 이용한 Custom Domain 적용 방법 포함)
  5. AWS S3에 Static Web Hosting으로 SPA(Single Page Application) 웹어플리케이션 배포하기
    (AWS CloudFront, Route53을 이용한 HTTPS 지원방법 포함)



앞으로 작성하는 모든 글에 대해서 혹여 잘못 된 내용이 있거나, 질문이 있으시거나, 기타 의견이 있으시다면 언제든지 댓글 달아주시면 최대한 빨리 피드백 드리도록 하겠습니다.

감사합니다.




댓글 없음:

댓글 쓰기