윈드서핑으로 백엔드를 구축하는 방법?

windsurf ide는 활성 mcp 서버가 있는 외부 도구를 mcp 프로토콜을 통해 통합할 수 있도록 합니다 이를 통해 ide를 떠나지 않고도 프롬프트를 사용하여 작업을 실행하고 해당 소스에서 데이터를 읽을 수 있습니다 이 튜토리얼에서는 windsurf ide를 통해 back4app mcp 서버를 사용하여 약속 스케줄러의 백엔드와 사용자 인터페이스(ui)를 구축하고 back4app 컨테이너에 배포하는 방법을 배웁니다 주요 내용 이 튜토리얼에서 구축한 실시간 개인 경비 추적기를 이 링크 를 사용하여 볼 수 있습니다 windsurf와 back4app mcp 서버를 사용하여 back4app에서 백엔드를 구축하는 방법을 배웁니다 back4app에서 클래스 간의 관계가 어떻게 모델링되는지 탐색합니다 back4app의 내장 클래스를 사용하여 인증 및 역할 기반 권한 부여가 어떻게 구현되는지 탐색합니다 back4app 컨테이너를 사용하여 몇 번의 클릭으로 앱을 배포합니다 전제 조건 이 튜토리얼을 따르려면 다음이 필요합니다 back4app 계정 계정이 없으시면 무료로 가입할 수 있습니다 시스템에 설치된 windsurf ide 백엔드 개발 개념에 대한 기본적인 이해 프로젝트 개요 예약 스케줄러 이 튜토리얼에서는 두 가지 역할을 지원하는 예약 스케줄러를 구축합니다 제공자 는 제공하는 서비스를 등록하고, 클라이언트 는 해당 서비스를 예약합니다 제공자는 각 서비스를 이름, 기간 및 가격으로 정의합니다 클라이언트는 사용 가능한 서비스를 탐색하고, 날짜와 시간을 선택한 후 예약을 확인합니다 예약이 완료되면, 약속은 제공자와 클라이언트 대시보드 모두에 나타나며, 필요에 따라 상태를 업데이트하거나 취소할 수 있습니다 이 프로젝트는 4개의 클래스가 있습니다 user , role , appointment , 그리고 service user와 role 클래스는 back4app의 내장 클래스의 일부이며 인증 및 접근 제어에 사용됩니다 service 클래스는 각 제공의 세부 사항, 이름, 기간 및 가격을 정의하여 제공자가 제공하는 내용을 나열하고 클라이언트가 제공 내용을 탐색할 수 있도록 합니다 appointment 클래스는 클라이언트와 제공자를 특정 시작 시간 및 종료 시간 필드에서 선택한 서비스에 연결하고, 상태(“대기 중”, “확인됨”, “취소됨”)를 추적하며, 객체 수준 acl을 사용하여 예약한 클라이언트와 그 제공자만 각 약속을 읽거나 수정할 수 있도록 합니다 스키마를 시각화하는 데 도움이 되는 엔티티 관계 다이어그램은 다음과 같습니다 이제 무엇을 구축할 것인지 대략적인 아이디어를 얻었으니, 다음 섹션에서는 windsurf와 함께 back4app mcp 서버를 설정하고 이 섹션에 설명된 앱을 생성하는 프롬프트를 작성하기 시작할 것입니다 back4app과 windsurf 연결하기 windsurf를 back4app에 연결하는 방법에 대한 튜토리얼 비디오를 아래에서 시청하세요 back4app mcp 서버를 windsurf에 연결하려면 먼저 back4app 계정 키가 필요합니다 이를 가져오려면 back4app 계정에 로그인하고 사용자 대시보드에서 네비게이션 바의 드롭다운을 클릭한 다음 account keys 를 선택합니다 “account keys” 페이지에서 계정 키에 이름을 지정하고 생성된 키를 복사하여 안전하게 보관하세요 다음으로 windsurf를 열고 cascade 도우미에서 망치 아이콘을 클릭합니다 그러면 구성 버튼이 있는 드롭다운이 열리며, 이를 클릭합니다 구성 버튼을 클릭하면 플러그인 관리 페이지로 이동합니다 “원시 구성 보기” 버튼을 클릭하고 아래의 구성 객체를 파일에 붙여넣으세요 { "mcpservers" { "back4app" { "command" "npx", "args" \[ " y", "@back4app/mcp server back4app\@latest", " account key", "\<account key>" ] } } } \<account key>를 귀하의 계정 키로 교체하고, 파일을 저장한 후 windsurf를 새로 고치세요 이 튜토리얼을 windows 기기에서 따라하고 있다면, 명령 키의 값을 npx cmd로 변경하세요 windsurf로 백엔드 만들기 windsurf로 예약 스케줄러의 백엔드를 만들기 위해서는 먼저 cascade 어시스턴트에게 지정한 이름으로 새 앱을 만들고 필요한 데이터베이스 테이블을 생성하라는 프롬프트를 제공해야 합니다 아래의 프롬프트를 사용하여 예약 스케줄러를 위한 작업을 수행할 수 있습니다 create a new backend named “appointment scheduler” by defining two new classes and a server side hook first, add a service class with fields for name (string), durationminutes (number) and price (number) then add an appointment class that includes pointers named client and provider (both to the built in user class), a pointer named service to the service class, starttime and endtime (date), and a status field constrained to “pending,” “confirmed,” or “canceled ” finally, write a beforesave cloud code trigger on appointment that queries for any existing appointment with the same provider whose time window overlaps the incoming starttime/endtime and rejects the save if it finds a conflict 위의 프롬프트는 windsurf에게 두 개의 새로운 데이터 모델인 service와 appointment를 생성하여 “예약 스케줄러” 백엔드를 스캐폴딩하도록 지시합니다 적절한 관계와 필드를 가지고 있습니다 또한 appointment에 대한 서버 측 beforesave 후크를 구현하여 같은 provider에 대한 겹치는 예약을 방지합니다 windsurf는 작업을 수행하려고 시도하는 동안 모든 요청을 기록하며, 실행이 완료되면 작업의 요약을 제공합니다 이제 앱과 데이터베이스 클래스가 생성되었으므로, 다음으로 백엔드에 대한 인증을 구현할 수 있습니다 백엔드에서 인증 및 권한 부여 구현하기 이 앱에서는 사용자가 안전하게 로그인하고 자신이 할 수 있는 일만 수행할 수 있도록 해야 합니다 예를 들어, 제공자로 가입한 사용자만 서비스 목록을 작성할 수 있으며, 서비스를 목록에 올린 제공자만 서비스를 업데이트할 수 있어야 합니다 아래의 프롬프트를 사용하여 약속 스케줄러에 대해 이를 달성할 수 있습니다 update the “appointment scheduler” backend to enable user authentication and role based access control configure the built in user class to require email/password sign‐up and login ensure the built in role model includes “provider” and “client” roles, and assign each user to one of these roles on registration or via a cloud function then set class level permissions so that only authenticated users may read and write appointment objects, but only providers can create, update, or delete service entries finally, on each appointment object, apply an acl in a beforesave hook that grants read/write permission only to the booking client and the designated provider, and verify in the hook that request user has the appropriate role before allowing the operation 위의 프롬프트는 windsurf에게 이메일/비밀번호 가입 및 로그인을 활성화하고, “제공자” 및 “클라이언트” 역할을 정의 및 할당하며, 인증된 사용자만 약속을 처리하고 제공자만 서비스를 관리하도록 클래스 수준 권한을 시행하고, 예약 클라이언트와 제공자에게만 접근을 부여하는 객체 acl 및 약속에 대한 beforesave 훅을 적용하라고 지시합니다 이제 인증 및 역할 기반 권한 부여가 설정되었으므로, 앱이 작동하는 데 필요한 crud 엔드포인트를 구현할 수 있습니다 서비스 및 예약에 대한 crud 기능 구현 귀하의 앱은 인증된 사용자가 서비스를 생성(제공자)하고 이미 생성된 서비스(클라이언트)에 예약을 할 수 있도록 해야 합니다 사용자는 서비스와 예약을 편집, 삭제 및 조회할 수 있어야 합니다 아래의 프롬프트를 사용하여 예약 스케줄러를 구현할 수 있습니다 add cloud code functions to our “appointment scheduler” backend that expose the necessary crud endpoints for the service class, implement createservice, listservices, updateservice, and deleteservice functions that check request user’s role and allow only providers to run them for the appointment class, implement createappointment, listappointments, updateappointmentstatus, and deleteappointment functions that ensure the caller is authenticated and only operates on records where they are the client or the provider in each function, use request user to enforce authentication, verify the user’s role (client or provider), apply the appropriate acl checks, and return the created, fetched, updated, or deleted record in the response 이 프롬프트는 windsurf에게 서비스 및 예약 클래스에 대한 클라우드 코드 엔드포인트를 생성하도록 지시하며, 인증 및 역할 기반 검사를 시행하여 제공자만 서비스를 관리하고 예약 클라이언트 또는 지정된 제공자만 자신의 예약을 관리할 수 있도록 합니다 프론트엔드 생성 귀하는 back4app에서 백엔드를 생성한 windsurf의 컨텍스트를 활용하여 귀하의 앱에 맞는 스키마와 요구 사항을 가진 프론트엔드를 생성하도록 요청할 수 있습니다 아래의 프롬프트를 사용하여 예약 스케줄러를 구현할 수 있습니다 generate a minimal frontend that matches the schema and implements all the functionality of the appointment scheduler on my back4app account and connect the frontend to the backend using the javascript parse sdk use vite and react 위의 프롬프트 또는 유사한 프롬프트를 사용하여 windsurf는 귀하의 백엔드 스키마에 맞는 프론트엔드를 생성하고 이를 귀하의 백엔드에 연결합니다 프로젝트 파일은 다음 경로에 저장됩니다 /\<user>/cascadeprojects/\<app name> cd 앱으로 이동하여 readme에 제공된 지침을 사용하여 실행하고 원하는 조정을 하십시오 이제 귀하의 프로젝트는 완료되었습니다 다음 섹션에서는 back4app 컨테이너에 배포할 것입니다 back4app 컨테이너에 앱 배포하기 back4app 컨테이너를 사용하면 dockerfile과 github 리포지토리를 통해 앱을 쉽게 배포할 수 있습니다 back4app 컨테이너에 앱을 배포하려면 먼저 리포지토리에 dockerfile을 포함해야 합니다 아래 프롬프트를 사용하여 claude에게 생성하도록 요청할 수 있습니다 generate a docker file for the ui of my appointment scheduler 또는 아래에 제공된 dockerfile을 사용할 수 있습니다 from node 18 alpine as builder workdir /app \# install pnpm run npm install g pnpm \# copy only package files first for better caching copy package json pnpm lock yaml / \# install dependencies (including dev for build) run pnpm install frozen lockfile strict peer dependencies=false \# copy the rest of the app copy \# build the next js app with standalone output run pnpm build \# production image from node 18 alpine as runner workdir /app \# copy standalone output and required files copy from=builder /app/ next/standalone / copy from=builder /app/ next/static / next/static copy from=builder /app/public /public \# optionally copy env or other config files \# copy env local env local expose 3000 \# limit node js memory usage for low resource environments env node options=" max old space size=192" cmd \["node", "server js"] dockerfile을 추가하고 github에 푸시한 후, back4app 앱 대시보드로 이동하여 대시보드 드롭다운을 클릭하고 웹 배포 플랫폼 옵션을 선택합니다 배포 페이지에서 “웹 앱 배포” 버튼을 클릭하고 배포할 리포지토리에 back4app 접근을 허용합니다 배포할 앱을 선택하고 배포 세부정보를 입력한 후 배포 버튼을 클릭합니다 버튼을 클릭하면 배포 프로세스가 시작되며, 완료되면 앱에 대한 라이브 url을 받게 됩니다 이 튜토리얼에서 만든 개인 경비 추적기를 이 링크 를 사용하여 볼 수 있습니다 결론 이 기사에서는 back4app mcp 서버와 windsurf를 사용하여 약속 스케줄러를 구축한 다음, back4app containers로 배포했습니다 이것은 아이디어 구상에서 출시까지 최소한의 오버헤드로 이동할 수 있게 해주는 back4app의 전체 도구 모음을 보여줍니다 다음 단계로는 캘린더 동기화, 자동 이메일 알림 또는 예약 트렌드에 대한 분석과 같은 기능으로 프로젝트를 확장할 수 있습니다 이 모든 향상된 기능은 동일한 back4app 워크플로우에 자연스럽게 통합됩니다 windsurf로 새로운 클래스나 클라우드 기능을 설계하고 정의합니다 beforesave 훅으로 보안을 강화합니다 그리고 back4app containers를 통해 업데이트를 배포합니다 이 접근 방식은 사용자에게 방해를 주지 않고 앱에 새로운 기능을 추가할 수 있게 해줍니다