728x90

Cloudflare Workers Pages와 AWS Lambda로 구축하는 서버리스 수익형 웹서비스: 완벽 가이드

서버리스 아키텍처를 활용한 수익형 웹서비스 구축은 초기 인프라 투자 없이도 확장 가능한 비즈니스 모델을 만들 수 있는 효율적인 접근 방식입니다. 이 글에서는 Cloudflare Workers Pages와 AWS Lambda를 결합하여 프론트엔드와 백엔드를 구축하는 방법과 필요한 파일 구조를 상세히 안내해 드립니다.

프로젝트 개요

이 웹서비스는 두 가지 주요 기술 스택으로 구성됩니다:

프론트엔드: Cloudflare Workers Pages를 사용하여 정적 웹사이트 호스팅 및 서버리스 함수 실행
백엔드: AWS Lambda와 DynamoDB를 사용한 서버리스 API 구현

이러한 구성의 주요 이점은 다음과 같습니다:

구분 이점 설명

비용	사용한 만큼 지불	트래픽이 적을 때 거의 무료로 운영 가능
확장성	자동 확장	수요 증가에 따라 자동으로 리소스 확장
성능	글로벌 배포	Cloudflare의 전 세계 CDN을 통한 빠른 로딩
유지보수	낮은 관리 부담	서버 관리가 필요 없는 인프라

폴더 구조 설계

프로젝트의 효율적인 관리를 위해 다음과 같은 폴더 구조를 권장합니다:

project-root/
├── frontend/                  # Cloudflare Workers Pages 코드
│   ├── public/                # 정적 파일
│   │   ├── index.html        # 메인 HTML 파일
│   │   ├── css/              # 스타일시트
│   │   │   └── style.css     # 메인 CSS 파일
│   │   └── js/               # JavaScript 파일
│   │       ├── app.js        # 메인 애플리케이션 로직
│   │       └── api.js        # API 통신 모듈
│   ├── src/                  # Cloudflare Workers 코드 (선택 사항)
│   │   └── index.js          # Workers 스크립트
│   ├── package.json          # 프론트엔드 의존성 관리
│   └── wrangler.toml         # Cloudflare Wrangler 설정
└── backend/                  # AWS Lambda 코드
    ├── src/                  # 소스 코드
    │   ├── handlers/         # Lambda 핸들러 함수
    │   │   ├── userHandler.js    # 사용자 관리
    │   │   ├── paymentHandler.js # 결제 처리
    │   │   ├── productHandler.js # 서비스 관리
    │   │   └── contactHandler.js # 문의 처리
    │   ├── utils/            # 유틸리티 함수
    │   │   ├── db.js         # 데이터베이스 연결
    │   │   └── auth.js       # 인증 헬퍼
    │   └── models/           # 데이터 모델
    ├── tests/                # 테스트 코드
    ├── package.json          # 백엔드 의존성 관리
    └── serverless.yml        # Serverless Framework 설정

프론트엔드 구성

핵심 파일 설명

index.html
- 역할: 웹사이트의 메인 페이지
- 위치: frontend/public/index.html
- 포함 내용: 서비스 소개, 가격 정책, 문의 양식 등
style.css
- 역할: 웹사이트 스타일링
- 위치: frontend/public/css/style.css
- 특징: 반응형 디자인, 테마 색상 정의
api.js
- 역할: 백엔드 API 통신 로직
- 위치: frontend/public/js/api.js
- 주요 함수: 로그인, 회원가입, 구독 처리, 문의 제출 등
app.js
- 역할: 프론트엔드 애플리케이션 로직
- 위치: frontend/public/js/app.js
- 주요 기능: 이벤트 처리, UI 상호작용, 모달 관리
wrangler.toml
- 역할: Cloudflare Workers 설정
- 위치: frontend/wrangler.toml
- 설정 내용: 환경 변수, 배포 대상, 라우팅 등

Cloudflare Workers 설정

wrangler.toml 파일은 Cloudflare Workers Pages 배포를 위한 필수 설정을 포함합니다:

name = "my-revenue-service"
type = "webpack"
account_id = "your-account-id"
workers_dev = true
route = ""
zone_id = ""
compatibility_date = "2023-01-01"

[site]
bucket = "./public"
entry-point = "workers-site"

[env.production]
workers_dev = false
route = "your-domain.com/*"
zone_id = "your-zone-id"

[env.staging]
workers_dev = true

백엔드 구성

핵심 핸들러 파일

userHandler.js
- 역할: 사용자 관리 기능
- 위치: backend/src/handlers/userHandler.js
- 주요 함수: signup, login, getUser, verifyEmail
paymentHandler.js
- 역할: 구독 및 결제 처리
- 위치: backend/src/handlers/paymentHandler.js
- 주요 함수: subscribe, cancelSubscription, getSubscription, paymentWebhook
productHandler.js
- 역할: 서비스 상품 관리
- 위치: backend/src/handlers/productHandler.js
- 주요 함수: getAllServices, getServiceById, createService, updateService, deleteService
contactHandler.js
- 역할: 문의 처리 및 이메일 발송
- 위치: backend/src/handlers/contactHandler.js
- 주요 함수: submitContact, getAllContacts, getContactById, updateContactStatus

서버리스 설정

serverless.yml 파일은 AWS Lambda 함수와 관련 리소스 배포를 위한 설정을 포함합니다:

service: revenue-service-backend

provider:
  name: aws
  runtime: nodejs18.x
  stage: ${opt:stage, 'dev'}
  region: ${opt:region, 'ap-northeast-2'}
  
  # 환경 변수 설정
  environment:
    USERS_TABLE: ${self:service}-${self:provider.stage}-users
    SERVICES_TABLE: ${self:service}-${self:provider.stage}-services
    SUBSCRIPTIONS_TABLE: ${self:service}-${self:provider.stage}-subscriptions
    PAYMENTS_TABLE: ${self:service}-${self:provider.stage}-payments
    CONTACTS_TABLE: ${self:service}-${self:provider.stage}-contacts
    JWT_SECRET: ${env:JWT_SECRET, 'your-secret-key-for-local-dev'}
    ADMIN_EMAIL: ${env:ADMIN_EMAIL, 'admin@example.com'}
  
  # IAM 권한 설정
  iamRoleStatements:
    - Effect: Allow
      Action:
        - dynamodb:Query
        - dynamodb:Scan
        - dynamodb:GetItem
        - dynamodb:PutItem
        - dynamodb:UpdateItem
        - dynamodb:DeleteItem
      Resource:
        - !GetAtt UsersTable.Arn
        - !GetAtt ServicesTable.Arn
        - !GetAtt SubscriptionsTable.Arn
        - !GetAtt PaymentsTable.Arn
        - !GetAtt ContactsTable.Arn
    - Effect: Allow
      Action:
        - ses:SendEmail
        - ses:SendRawEmail
      Resource: "*"

functions:
  # 함수 정의 (일부 생략)
  signup:
    handler: src/handlers/userHandler.signup
    events:
      - http:
          path: /auth/signup
          method: post
          cors: true

배포 및 연동 방법

프론트엔드 배포 단계

코드 준비
cd frontend npm install

API URL 설정

frontend/public/js/api.js 파일에서 API 엔드포인트 URL 업데이트

const API_URL = 'https://your-api-gateway-url.execute-api.ap-northeast-2.amazonaws.com/dev';

Cloudflare Pages 배포
- GitHub 저장소 연결 방식
  1. Cloudflare Dashboard → Workers & Pages → Create application → Pages
  2. GitHub 저장소 연결 및 배포 설정 구성
- CLI 배포 방식
```
npm run publish# 또는wrangler publish
```

백엔드 배포 단계

코드 준비
cd backend npm install
환경 변수 설정
export JWT_SECRET=your-secure-secret-key export ADMIN_EMAIL=your-admin-email@example.com
Serverless Framework로 배포
npm run deploy # 또는 serverless deploy
API Gateway URL 확인
- 배포 후 출력되는 엔드포인트 URL을 메모하여 프론트엔드 설정에 사용

파일 간 연동 관계

프론트엔드 파일 연결되는 백엔드 파일 기능

api.js의 getServiceDetails()	productHandler.js의 getServiceById	서비스 정보 조회
api.js의 subscribe()	paymentHandler.js의 subscribe	구독 신청 처리
api.js의 login()	userHandler.js의 login	사용자 로그인 처리
api.js의 submitContact()	contactHandler.js의 submitContact	문의 제출 처리

운영 및 유지보수 전략

모니터링 설정

AWS CloudWatch
- Lambda 함수 실행 지표 모니터링
- 오류 로그 및 성능 병목 추적
- 비용 사용량 추적
Cloudflare Analytics
- 페이지 방문자 통계
- 캐시 성능 분석
- 보안 이벤트 모니터링

확장 계획

서비스 성장에 따른 확장 단계:

초기 단계
- AWS 및 Cloudflare 무료 티어 활용
- 기본 기능 중심 운영
성장 단계
- DynamoDB 용량 최적화
- 고급 기능 추가 (대시보드, 분석 기능)
확장 단계
- 다국어 지원
- 추가 결제 옵션 통합
- 타사 서비스 연동 (CRM, 마케팅 도구)

결론

Cloudflare Workers Pages와 AWS Lambda를 결합한 서버리스 아키텍처는 수익형 웹서비스 구축을 위한 강력하고 비용 효율적인 방법입니다. 적절한 폴더 구조와 파일 설계를 통해 유지보수와 확장이 용이한 시스템을 구현할 수 있습니다.

이 구조를 활용하면 초기 인프라 투자 없이도 확장 가능한 비즈니스 모델을 시작할 수 있으며, 사용자가 증가함에 따라 자연스럽게 확장할 수 있는 이점이 있습니다.

728x90

저작자표시 비영리 변경금지

dma-ai

AI Insights & Innovations