How to Build a Backend for Gatsby?

소개 이 튜토리얼에서는 gatsby를 위한 백엔드를 구축하는 방법 을 배웁니다 우리는 데이터베이스 관리, 클라우드 코드 기능과 같은 back4app의 기능을 통합하는 방법을 보여줄 것입니다 rest api 및 graphql 쿼리 기능, 사용자 인증 및 실시간 쿼리(라이브 쿼리)를 통해 안전하고 확장 가능하며 강력한 백엔드를 생성하는 방법을 보여줄 것입니다 이 백엔드는 당신의 gatsby 사이트 에서 접근할 수 있습니다 back4app의 빠른 설정과 직관적인 환경이 백엔드 작업을 처리하는 데 필요한 시간과 노력을 크게 줄일 수 있는 방법도 볼 수 있습니다 끝으로, 데이터 저장 및 검색, 인증 처리, 클라우드 기능 통합 등을 수행하는 gatsby를 위한 백엔드를 구축하는 방법 을 정확히 알게 될 것입니다 이것은 전통적인 서버 유지 관리에 대한 걱정 없이 사용자 정의 논리를 쉽게 통합하고, 서드파티 api를 추가하거나 데이터 모델을 확장할 수 있도록 설정해 줍니다 당신이 구축할 것과 그것이 가치 있는 이유 완전한 백엔드 통합 당신은 동적 데이터 요구에 적합한 parse sdk를 통합하여 gatsby 사이트를 위한 확장 가능한 백엔드 구조를 만들 것입니다 시간 절약 back4app은 백엔드 생성 속도를 높이는 ai 에이전트, 실시간 쿼리 및 클라우드 작업과 같은 도구를 제공합니다 확장 가능한 기술 완료 후, 당신은 빌드 시간에 페이지 생성 과 같은 더 고급 gatsby 기능을 위해 이러한 개념을 조정할 수 있게 될 것입니다 전제 조건 back4app 계정 및 새로운 back4app 프로젝트 back4app 시작하기 https //www back4app com/docs/get started/new parse app 계정이 없으신 경우, 무료로 생성할 수 있습니다 위의 가이드를 따라 프로젝트를 준비하세요 기본 gatsby 개발 환경 이것은 gatsby cli https //www gatsbyjs com/docs/tutorial/part 0/#install gatsby cli 를 설치하고 다음을 실행하여 설정할 수 있습니다 node js (버전 14 이상) 설치 node js 설치하기 https //nodejs org/en/download/ javascript 및 gatsby 개념에 대한 이해 gatsby 공식 문서 https //www gatsbyjs com/docs/ gatsby가 처음이라면 문서나 초보자 튜토리얼을 읽어보세요 이 요구 사항이 설정되어 있는지 확인하세요 이는 새 파일을 생성할 때 구성 또는 gatsby 환경에서 graphql 쿼리를 실행할 때 원활한 경험을 보장합니다 1단계 – back4app 프로젝트 설정 새 프로젝트 만들기 back4app에서 gatsby의 백엔드를 구축하는 첫 번째 단계는 새로운 프로젝트를 만드는 것입니다 아직 하지 않았다면 back4app 계정에 로그인하세요 대시보드에서 “새 앱” 버튼을 클릭하세요 앱에 이름을 지정하세요 (예 “gatsby backend tutorial”) 프로젝트를 생성하면 back4app 대시보드에 나타납니다 이 프로젝트를 백엔드의 핵심으로 사용할 것입니다 parse sdk 연결하기 back4app은 parse 플랫폼을 사용하여 데이터를 관리하고, 실시간 기능을 제공하며, 사용자 인증 등을 처리합니다 gatsby의 경우 여전히 npm install parse 를 실행한 후 소스 파일에 통합할 수 있습니다 parse 키 가져오기 back4app 대시보드에서 application id 와 javascript key , 일반적으로 “앱 설정” 또는 “보안 및 키” 아래에 있습니다 또한 parse server url 을 찾을 수 있습니다 (종종 https //parseapi back4app com )입니다 gatsby 사이트에 parse sdk 설치하기 npm install parse gatsby 프로젝트의 루트 디렉토리 또는 src/ 내에 parseconfig js 를 생성하세요 src/parseconfig js // src/parseconfig js import parse from 'parse'; // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; gatsby 파일에서 parseconfig js 를 가져올 때마다 (예 gatsby node js , gatsby browser js , 또는 페이지/컴포넌트), 백엔드에 쿼리를 수행할 준비가 된 사전 구성된 인스턴스를 갖게 됩니다 2단계 – 데이터베이스 설정 데이터 모델 생성하기 back4app에서는 데이터가 “클래스” (테이블과 유사)로 관리되며, 데이터 필드가 있습니다 시연을 위해 “todo” 클래스를 생성해 보겠습니다 parse를 사용하여 gatsby에서 데이터를 저장하고 검색하는 몇 가지 방법을 보여드리겠습니다 “데이터베이스” 섹션으로 이동하십시오 당신의 back4app 대시보드에서 새 클래스를 생성하십시오 (예 “todo”) 및 제목(string)과 완료 여부(boolean)와 같은 열을 추가하십시오 또는 parse가 코드에서 처음 저장될 때 자동으로 열을 생성하도록 할 수 있습니다 ai 에이전트를 사용한 데이터 모델 생성 back4app은 데이터 구조를 정의하는 데 도움을 주기 위해 ai 에이전트를 제공합니다 ai 에이전트를 열기 앱 대시보드 또는 메뉴에서 데이터 모델 설명하기 (예 “제목과 완료 상태가 있는 새로운 todo 앱 스키마를 생성해 주세요 ”) ai 에이전트가 스키마를 생성하도록 하십시오 sdk를 사용한 데이터 읽기 및 쓰기 gatsby의 샘플 코드 조각은 다음과 같을 수 있습니다 (예 react 기반 페이지 또는 gatsby browser js ) import parse from ' /parseconfig'; async function createtodoitem(title, iscompleted) { const todo = parse object extend('todo'); const todo = new todo(); todo set('title', title); todo set('iscompleted', iscompleted); try { const savedtodo = await todo save(); console log('todo saved successfully ', savedtodo); return savedtodo; } catch (error) { console error('error saving todo ', error); } } async function fetchtodos() { const todo = parse object extend('todo'); const query = new parse query(todo); try { const results = await query find(); console log('fetched todo items ', results); return results; } catch (error) { console error('error fetching todos ', error); } } rest api를 사용한 데이터 읽기 및 쓰기 대안으로, rest api 를 통해 데이터베이스와 상호작용할 수 있습니다 curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy groceries", "iscompleted" false}' \\ https //parseapi back4app com/classes/todo graphql api를 사용한 데이터 읽기 및 쓰기 back4app은 또한 graphql api , 따라서 다음과 같은 쿼리나 변형을 실행할 수 있습니다 mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } 이것은 gatsby 사이트가 빌드 시간에 graphql 쿼리를 통해 데이터를 가져오기를 원할 때 특히 편리합니다 실시간 쿼리 작업하기 gatsby는 정적 사이트 생성기이지만, parse 실시간 쿼리 를 사용하여 동적 실시간 연결을 설정할 수 있습니다 실시간 쿼리 활성화 를 back4app 대시보드에서 설정하세요 (서버 설정 아래) live query server url 추가 를 parseconfig js parse livequeryserverurl = 'wss\ //your subdomain here b4a io'; 클래스에 구독 하여 실시간 알림을 받으세요 async function subscribetotodos(callback) { const query = new parse query('todo'); const subscription = await query subscribe(); subscription on('create', (newtodo) => { callback('create', newtodo); }); subscription on('update', (updatedtodo) => { callback('update', updatedtodo); }); subscription on('delete', (deletedtodo) => { callback('delete', deletedtodo); }); return subscription; } 이것은 gatsby 프로젝트의 프론트엔드에 실시간 데이터 업데이트를 푸시합니다 3단계 – acl 및 clp로 보안 적용하기 acl과 clp란 무엇인가요? acl(access control lists) 는 개별 객체에 대한 권한을 정의할 수 있게 해주며, clp(class level permissions) 는 back4app 데이터베이스의 전체 클래스에 적용됩니다 클래스 수준 권한 설정하기 이동하십시오 데이터베이스 귀하의 back4app 대시보드에서 클래스를 선택하십시오 (예 할 일 ) 클릭하십시오 클래스 수준 권한 탭 클래스가 공개적으로 읽을 수 있는지, 인증이 필요한지 또는 특정 역할로 제한되는지 구성하십시오 코드에서 acl 사용하기 gatsby 코드에서 각 새 객체에 대한 acl을 정의할 수 있습니다 async function createprivatetodo(title, owneruser) { const todo = parse object extend('todo'); const todo = new todo(); todo set('title', title); const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); todo setacl(acl); try { return await todo save(); } catch (err) { console error('error saving private todo ', err); } } 4단계 – 클라우드 코드 함수 작성하기 클라우드 코드의 이유는 무엇입니까? 클라우드 코드를 사용하면 back4app 백엔드에 사용자 지정 서버 측 논리를 추가할 수 있습니다 이는 비즈니스 규칙, rest api 변환, 트리거 또는 클라이언트 측에서 안전하게 유지하고 싶을 수 있는 데이터 유효성 검사에 유용합니다 예제 클라우드 함수 // main js parse cloud define('calculatetextlength', async (request) => { const { text } = request params; if (!text) { throw new error('no text provided'); } return { length text length }; }); 클라우드 코드 배포 back4app cli를 통해 cli를 설치하고 구성한 후 b4a deploy 를 실행합니다 대시보드를 통해 대시보드에서 cloud code > functions 로 가서 코드를 main js ,에 붙여넣고 배포 를 클릭합니다 함수 호출하기 gatsby/parse sdk에서 import parse from ' /parseconfig'; async function gettextlength(text) { try { const result = await parse cloud run('calculatetextlength', { text }); console log('text length ', result length); } catch (err) { console error('error calling cloud function ', err); } } 5단계 – 인증 구성 파스 사용자 클래스 back4app은 parse user 클래스를 인증에 사용합니다 기본적으로 비밀번호 해싱, 세션 및 안전한 저장을 처리합니다 gatsby에서 회원가입 및 로그인 import parse from ' /parseconfig'; // signup async function signupuser(username, password, email) { const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); console log('user signed up successfully!'); } catch (error) { console error('error signing up user ', error); } } // login async function loginuser(username, password) { try { const user = await parse user login(username, password); console log('user logged in ', user); } catch (error) { console error('error logging in user ', error); } } 로그인 후 parse user current() 를 호출하여 사용자가 로그인했는지 확인할 수 있습니다 소셜 로그인 추가 설정으로 google , facebook , apple , 및 기타 제공업체를 통합할 수 있습니다 자세한 내용은 소셜 로그인 문서 https //www back4app com/docs/platform/sign in with apple 6단계 – 파일 저장 처리 파일 업로드 이미지나 다른 파일을 업로드하려면 parse file 을 사용하세요 예를 들어, gatsby 컴포넌트에서 async function uploadimage(file) { const name = file name; const parsefile = new parse file(name, file); try { const savedfile = await parsefile save(); console log('file saved ', savedfile url()); return savedfile url(); } catch (err) { console error('error uploading file ', err); } } 그런 다음 이 파일을 parse 객체에 첨부하고 저장한 후, 나중에 파일 url을 검색하여 gatsby 사이트에 표시할 수 있습니다 7단계 – 이메일 확인 및 비밀번호 재설정 왜 중요한가 이메일 확인은 사용자의 이메일 주소를 확인하고, 비밀번호 재설정 흐름은 사용자 경험을 향상시킵니다 두 가지 모두 back4app에서 쉽게 구성할 수 있습니다 대시보드에서 앱의 이메일 설정으로 이동합니다 이메일 확인을 활성화하고 비밀번호 재설정 이메일 템플릿을 설정합니다 parse sdk 메서드 사용 (예 parse user requestpasswordreset(email) )로 재설정 이메일을 트리거합니다 8단계 – 클라우드 작업으로 작업 예약하기 클라우드 작업 개요 정기적인 작업을 자동화하기 위해 클라우드 작업 을 사용하여 오래된 데이터 제거 또는 일일 요약 전송과 같은 작업을 수행합니다 예를 들어 // main js parse cloud job('cleanupoldtodos', async (request) => { const todo = parse object extend('todo'); const query = new parse query(todo); const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); try { const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; } catch (err) { throw new error('error during cleanup ' + err message); } }); 그런 다음 앱 설정 > 서버 설정 > 백그라운드 작업 아래에 예약합니다 9단계 – 웹훅 통합 웹훅을 사용하면 back4app 앱이 특정 이벤트가 발생할 때 외부 서비스에 http 요청을 보낼 수 있습니다 예를 들어, 새 레코드가 생성될 때입니다 back4app 대시보드로 가기 > 더보기 > 웹훅 새 웹훅 추가 , 외부 서비스의 엔드포인트 url을 지정합니다 웹훅을 트리거하는 항목 선택 (예 todo 클래스의 aftersave) 적절한 엔드포인트를 추가하여 slack 또는 결제 게이트웨이와 통합할 수도 있습니다 10단계 – back4app 관리 패널 탐색 back4app의 admin app 은 데이터 관리를 위한 모델 중심 인터페이스입니다 비기술 사용자에게 클래스에서 crud 작업을 수행할 수 있는 안전한 접근 권한을 부여할 수 있습니다 admin app 활성화 이동하여 app dashboard > more > admin app 을 클릭하고 “admin app 활성화 ” 그런 다음 admin user 생성 하고 관리 인터페이스를 위한 하위 도메인을 선택합니다 이제 코드를 작성하지 않고도 admin app에 로그인하여 데이터를 보고 수정할 수 있습니다 결론 이 튜토리얼에서는 gatsby의 백엔드를 구축하는 방법 을 배웠습니다 다음을 배웠습니다 안전한 데이터베이스 구성 클래스, 사용자 정의 필드 및 관계를 사용하여 parse sdk 사용 , rest api 및 graphql 쿼리 옵션을 사용하여 데이터 거래 데이터 보안을 위한 acl 및 clp 설정 비즈니스 로직 및 트리거를 확장하기 위한 클라우드 코드 작성 및 배포 회원가입, 로그인, 비밀번호 재설정 및 이메일 확인을 통한 사용자 인증 관리 이미지 및 문서에 대한 파일 저장 처리 클라우드 작업을 통한 자동화된 작업 예약 웹훅을 통한 외부 서비스 통합 데이터 관리를 쉽게 하기 위한 관리자 앱 활용 이 기술을 통해 귀하의 gatsby 사이트는 강력한 동적 기능을 활용하면서도 gatsby의 정적 렌더링의 이점을 누릴 수 있습니다 여기에서 귀하는 데이터 모델 확장 및 고급 비즈니스 로직 추가 더 많은 외부 api 통합 으로 진정한 포괄적 플랫폼을 만드세요 back4app의 공식 문서 확인 보안, 성능 및 분석에 대한 심층적인 내용을 위해 gatsby의 빌드 타임 기능 실험 —예를 들어, “ 동적 데이터로 페이지 생성 ” 또는 back4app 백엔드를 위한 “ gatsby source ” 플러그인 설정 이제 gatsby와 back4app을 사용하여 미래 지향적이고 데이터 기반의 앱을 구축할 수 있는 강력한 기반이 마련되었습니다