클라우드를 사용하여 백엔드를 구축하는 방법?

전통적인 백엔드 개발은 종종 광범위한 코딩, 인프라 관리 및 상당한 개발 리소스를 요구합니다 그러나 현대의 백엔드 서비스 플랫폼을 활용하면 이 프로세스를 극적으로 간소화할 수 있습니다 back4app은 워크플로우를 가속화하기 위해 설계된 포괄적인 도구 세트를 제공하여 이 프로세스를 간소화합니다 이 도구 중 하나는 back4app의 모델 컨텍스트 프로토콜(mcp) 서버 , 이는 claude와 같은 llm을 사용하여 자연어만으로 전체 백엔드를 구축할 수 있게 해줍니다 이 튜토리얼에서는 back4app mcp 서버를 통해 claude를 사용하여 개인 경비 추적기의 백엔드와 사용자 인터페이스(ui)를 구축하고 back4app 컨테이너에 배포하는 방법을 배웁니다 주요 내용 이 튜토리얼에서 구축한 실시간 개인 경비 추적기를 이 링크 를 사용하여 확인할 수 있습니다 claude 프롬프트와 mcp 서버를 사용하여 몇 분 안에 back4app에서 백엔드를 스캐폴딩하는 방법을 알아보세요 cloud code 훅이 작동하는 모습을 확인하여 소유자 전용 쓰기를 보장하고 추가 인프라 없이 월간 요약을 정확하게 유지하는 방법을 알아보세요 claude가 생성한 javascript sdk를 통해 parse api에 연결되는 반응형 프론트엔드를 구축하는 방법을 배우세요 back4app containers를 사용하여 원클릭 배포를 탐색하고 github 리포를 운영 오버헤드 없이 프로덕션으로 푸시하세요 전제 조건 이 튜토리얼을 따르려면 다음이 필요합니다 back4app 계정 계정이 없으시면 무료로 가입할 수 있습니다 시스템에 claude 데스크탑이 설치되어 있어야 합니다 백엔드 개발 개념에 대한 기본적인 이해 프로젝트 개요 개인 경비 추적기 claude가 실시간으로 쿼리하고 업데이트할 수 있는 경비 추적 백엔드를 구축할 것입니다 귀하의 지출 추적기는 카테고리별로 지출을 기록할 수 있으며, 지출 습관에 대한 월별 및 연별 요약을 제공합니다 프로젝트에는 4개의 데이터 모델이 있습니다 사용자 이 테이블은 각 개인의 계정 자격 증명과 전체 월별 지출 한도를 저장합니다 필드는 이메일, 비밀번호, 월별 예산 및 타임스탬프를 포함합니다 지출 이 테이블은 각 구매를 저장합니다 날짜, 금액, 카테고리 포인터 및 설명 카테고리 이 테이블은 지출을 그룹화하기 위한 사용자 정의 레이블을 저장합니다 필드는 id, user id, 이름 및 타임스탬프를 포함합니다 월별 요약 이 테이블은 대시보드 및 예산 확인을 위한 사전 집계된 총계를 캐시합니다 필드는 user id , month , total spent , 및 timestamps 지출을 기록할 때마다 beforesave 클라우드 코드 트리거가 해당 월의 월별 요약을 찾거나 생성하고 총계를 증가시키며 월별 예산에서 금액을 차감합니다 스키마를 시각화하는 데 도움이 되는 엔터티 관계 다이어그램입니다 이제 무엇을 구축할 것인지 대략적인 아이디어가 생겼으므로, 다음 섹션에서는 claude desktop을 사용하여 back4app mcp 서버를 설정하고 이 섹션에 설명된 앱을 생성할 프롬프트를 작성하기 시작합니다 back4app과 claude desktop 연결하기 back4app mcp 서버를 claude desktop에 연결하려면 먼저 back4app 계정 키가 필요합니다 이를 검색하려면 back4app 계정에 로그인하고 사용자 대시보드에서 내비게이션 바의 드롭다운을 클릭한 다음 계정 키 를 선택합니다 “계정 키” account keys 페이지에서 계정 키에 이름을 지정하고, 생성된 키를 복사하여 안전하게 보관하세요 다음으로, claude 데스크탑 구성 파일을 수정하여 back4app mcp 서버를 포함해야 합니다 기본적으로 claude 데스크탑 구성 파일은 시스템에 존재하지 않습니다 시스템의 claude 데스크탑 설정으로 이동하여 개발자 옵션을 선택하고 구성 편집 버튼을 클릭하여 구성 파일을 생성하거나, 이 가이드를 따르세요 이렇게 하면 (이미 없는 경우) 다음 위치에 구성 파일이 생성됩니다 macos /library/application support/claude/claude desktop config json windows %appdata%\\\claude\\\claude desktop config json …그리고 파일 시스템에 파일이 표시됩니다 원하는 텍스트 편집기로 구성 파일을 열고 아래 구성을 추가하세요 { "mcpservers" { "back4app" { "command" "npx", "args" \[ " y", "@back4app/mcp server back4app\@latest", " account key", "\<account key>" ] } } } \<account key>를 계정 키로 바꾸고, 파일을 저장한 후 claude 데스크탑을 재시작하세요 windows 기기에서 이 튜토리얼을 따르고 있다면, 명령 키의 값을 npx cmd로 변경하세요 이러한 구성이 완료되면, back4app mcp 서버와 claude 데스크탑을 사용하여 back4app 백엔드를 구축할 준비가 완료됩니다 클로드 데스크탑으로 백엔드 만들기 앞서 설명한 프로젝트의 백엔드를 만들기 위해서는 back4app에서 새 앱을 생성하고 해당 앱에서 적절한 데이터베이스 테이블을 생성해야 합니다 클로드 데스크탑과 프롬프트를 사용하여 이를 달성할 수 있습니다 프롬프트는 클로드에게 “개인 경비 추적기”라는 새 애플리케이션을 생성하고, 필요한 필드, 포인터 관계, 기본값 및 접근 제어가 있는 네 개의 mongodb 클래스( user, category, expense, monthlysummary)를 정의하며, 경비가 변경될 때마다 월간 요약을 업데이트하고, 무단 쓰기를 차단하며, 사용자의 중복 카테고리 이름을 방지하는 클라우드 코드 훅을 포함하도록 지시해야 합니다 이를 달성하는 예시 프롬프트는 아래에 제공됩니다 create a new back4app app named “personal expense tracker” class \\\\ user email string, required, unique passwordhash string, required monthlybudget number, required, default 0 (smallest currency unit) add a unique index on email class category user pointer<\\\\ user>, required (owner) name string, required acl public read, owner write add a compound unique index on {user, name} class expense user pointer<\\\\ user>, required category pointer\<category>, optional amount number, required currency string (length 3), required, default “usd” spentat date, required note string, optional isdeleted boolean, required, default false acl public read, owner write add indexes on {user, spentat} and {user, isdeleted} class monthlysummary user pointer<\\\\ user>, required month date, required (store the first day of the month) totalspent number, required acl public read, owner write add a unique index on {user, month} cloud code 1\ aftersave on expense if isdeleted is false, upsert the matching monthlysummary row (month = first day of spentat) and increment totalspent by amount if an expense is soft deleted (isdeleted toggled to true), decrement totalspent accordingly 2\ beforesave on expense reject writes when the authenticated user is not equal to user 3\ beforesave on category enforce the per user unique {user, name} combination create all classes, fields, indexes, clps, and cloud code hooks exactly as specified 프롬프트를 전송하면 클로드가 앱 생성과 같은 특정 작업을 수행할 수 있는 권한을 요청하는 일련의 팝업을 받게 됩니다 팝업은 새 앱 생성이나 클래스 추가와 같은 각 잠재적으로 되돌릴 수 없는 작업을 검토하고 승인할 수 있는 기회를 제공합니다 이를 통해 명시적인 동의 없이 아무것도 배포되거나 청구되거나 노출되지 않도록 보장합니다 이들은 우발적인 변경에 대한 안전 장치 역할을 하여 back4app 리소스를 제어할 수 있도록 보장합니다 다음으로, claude에게 일련의 프롬프트를 제공하여 앱에서 사용자 인증을 구현합니다 여기에는 토큰 기반의 가입 및 로그인 클라우드 기능을 추가하고, user 클래스에 대한 공개 액세스를 제거하며, 카테고리, 비용 및 월간 요약에 대해 공개 읽기는 유지하고 소유자 전용 쓰기를 유지하며, 요청이 인증되지 않은 경우 모든 쓰기를 거부하는 beforesave 가드를 생성하는 지시가 포함됩니다 각 기능에 대한 예시 프롬프트 목록은 아래에 나와 있습니다 가입하기 update the back4app application “personal expense tracker” to include a cloud code function called signupuser inputs email, password, monthlybudget (optional, default 0) if a user with the same email already exists, throw an error otherwise create the user record with those values and return the session token 이 프롬프트는 가입 클라우드 코드를 생성합니다 로그인 update the back4app application “personal expense tracker” to include a cloud code function called loginuser inputs email, password call parse user login with those credentials and return the session token on success 이 프롬프트는 클라우드 코드에 대한 해당 로그인을 생성합니다 클래스 수준 권한 update class level permissions for the personal expense tracker \ keep public read but owner only write on category, expense, and monthlysummary 이 프롬프트는 카테고리, 비용 및 월간 요약의 소유자만 수정할 수 있도록 보장합니다 이 프롬프트를 실행하면 모든 백엔드 논리가 완료됩니다 다음 섹션에서는 백엔드에 대한 프론트엔드를 생성합니다 프론트엔드 생성 claude가 당신의 back4app 백엔드를 생성했기 때문에, 스키마와 응답이 어떻게 생겼는지 기억합니다 그 맥락을 활용하여, 생성된 앱의 스키마에 맞는 ui를 생성해 달라고 요청할 수 있습니다 아래에 예시 프롬프트가 제공됩니다 generate a minimal frontend that matches the schema and implements all the functionality of the personal expense tracker on my back4app account and connect the frontend to the backend using the javascript parse sdk 전체 ui를 얻을 수 있어야 합니다 제공된 코드를 vs code와 같은 ide에 복사하고 코드를 github에 푸시하세요 다음 섹션에서는 back4app 컨테이너에 프론트엔드를 배포할 것입니다 back4app 컨테이너에 앱 배포 back4app 컨테이너를 사용하면 dockerfile과 github 리포지토리를 통해 앱을 쉽게 배포할 수 있습니다 back4app 컨테이너에 앱을 배포하려면 먼저 리포지토리에 dockerfile을 포함해야 합니다 아래 프롬프트를 사용하여 claude에게 생성하도록 요청할 수 있습니다 generate a docker file for the ui of my personal expense tracker 또는 아래에 제공된 dockerfile을 사용할 수 있습니다 \# start from the official lightweight nginx alpine image from nginx\ alpine \# remove default content run rm rf /usr/share/nginx/html/ \# copy your static site (html, css, assets) into the container copy /src /usr/share/nginx/html/ \# expose port 80 expose 80 \# start nginx in the foreground cmd \["nginx", " g", "daemon off;"] dockerfile을 추가하고 github에 푸시한 후, back4app 앱 대시보드로 이동하여 대시보드 드롭다운을 클릭하고 웹 배포 플랫폼 옵션을 선택합니다 배포 페이지에서 “웹 앱 배포” 버튼을 클릭하고 배포할 리포지토리에 back4app 접근을 허용합니다 배포할 앱을 선택하고 배포 세부정보를 입력한 후 배포 버튼을 클릭합니다 버튼을 클릭하면 배포 프로세스가 시작되며, 완료되면 앱에 대한 라이브 url을 받게 됩니다 이 튜토리얼에서 만든 라이브 개인 경비 추적기를 이 링크 를 사용하여 볼 수 있습니다 결론 이 기사에서는 back4app mcp 서버와 claude를 사용하여 경비를 추적하는 앱을 만들고, back4app 컨테이너를 사용하여 배포했습니다 이는 아이디어 구상부터 출시까지 최소한의 오버헤드로 앱을 구축할 수 있는 back4app의 전체 도구 모음을 보여줍니다 다음 단계로는 반복 경비 템플릿, csv 가져오기 또는 예산 초과에 대한 푸시 알림과 같은 기능으로 프로젝트를 확장할 수 있습니다 이 모든 향상은 동일한 back4app 워크플로우에 자연스럽게 통합됩니다 claude로 새로운 클래스나 클라우드 기능을 정의하고, beforesave 훅으로 보안을 설정하며, back4app 컨테이너를 통해 업데이트를 배포합니다 이 접근 방식은 사용자에게 방해를 주거나 호스팅 제공업체를 변경하지 않고 앱을 개선할 수 있게 해줍니다