퀵스타터즈
Astro용 백엔드 구축 방법?

20min
소개
이 가이드에서는 astro를 위한 백엔드 구축 방법에 대해 배우게 됩니다. Back4App을 사용하여 Astro 프로젝트를 위한 완전한 백엔드를 만드는 방법을 알아보세요. 
우리는 데이터베이스 관리, 클라우드 기능, 인증, 파일 저장, 실시간 쿼리 등 중요한 Back4App 기능을 통합하는 방법을 다룰 것입니다. 현대 도구를 사용하여 빠른 애플리케이션을 구축하는 실용적인 접근 방식을 보여줍니다.
Back4App의 환경을 활용하면 서버 구성이나 보안 계층을 처음부터 작성하는 것과 같은 많은 수고를 덜 수 있습니다. 
이 설정은 시간과 노력을 절약하면서도 강력한 서버 측 논리를 위한 엔드포인트를 정의할 수 있게 해줍니다. 
또한 astro 프로젝트에 환경 변수를 통합하는 방법을 배우게 되어 자격 증명이나 기타 민감한 데이터를 안전하게 저장하는 것이 더 쉬워집니다.
완료하면 Astro를 위한 확장 가능한 백엔드 구조를 갖추게 되고 REST, GraphQL, 사용자 인증, 실시간 이벤트 등을 통해 데이터를 처리하는 방법을 알게 됩니다. 
강력한 보안 기반을 유지하면서 실제 요구에 맞는 논리를 추가할 준비가 될 것입니다.
전제 조건
Back4App 계정과 새로운 Back4App 프로젝트
Back4app 시작하기.﻿
Astro 프로젝트
Astro 설정하기 - 기본 Astro 개발 환경과 Node.js가 설치되어 있는지 확인하세요.
Node.js (버전 14 이상) 설치
Node.js 설치하기﻿
프론트엔드 및 서버 사이드 개념에 대한 이해
.astro 파일을 생성하거나 편집하는 방법, 환경 변수를 처리하는 방법, fetch 또는 유사한 라이브러리를 사용하여 간단한 POST 요청을 수행하는 방법을 알아야 합니다.
시작하기 전에 이러한 전제 조건이 충족되었는지 확인하세요. Back4App 계정, Astro 환경 및 기본 JavaScript 지식이 있으면 이 튜토리얼을 더 원활하게 따라갈 수 있습니다.
1단계 – Back4App에서 새 프로젝트 만들기 및 연결하기
새 프로젝트 만들기:
Back4App 계정에 로그인합니다.
대시보드에서 새 앱을 클릭하고 이름을 지정합니다 (예: “Astro-Backend-Tutorial”).
Back4App 자격 증명 가져오기:
Back4App 대시보드에서 앱 설정 또는 보안 및 키, 애플리케이션 ID, REST API 키, 및 서버 URL (https://parseapi.back4app.com 기본값으로). 이 환경 변수는 Astro 통합에 사용됩니다.
API를 통해 Astro를 Back4App에 연결하기:
Parse SDK를 직접 사용하지 않기 때문에, Astro 파일에서 fetch 또는 다른 라이브러리를 사용하여 요청을 보낼 것입니다. 보안을 위해 자격 증명을 환경 변수에 저장하세요. 예를 들어, .env 파일에:
2단계 – 데이터베이스 설정
데이터 모델 만들기
수동으로 데이터 모델 만들기:
Back4App 대시보드로 가서 데이터베이스를 클릭하세요.
새 클래스 만들기 (예: “Todo”) 및 title (문자열)과 isCompleted (부울)과 같은 필드 추가.
AI 에이전트를 사용하여 데이터 모델 만들기:
앱 대시보드에서 AI 에이전트를 엽니다.
스키마를 간단한 언어로 설명하세요 (예: “제목과 isCompleted 필드가 있는 새로운 ToDo 앱을 만듭니다.”).
에이전트가 클래스를 생성하고 필드를 만들어 줄 것입니다.
REST API를 사용하여 데이터 읽기 및 쓰기
데이터 모델이 준비되었으니, 포스트 요청과 읽기 요청을 처리하기 위해 Astro 컴포넌트 또는 서버 측 파일 내에 엔드포인트를 정의해 보겠습니다. 예를 들어, 다음과 같은 파일을 생성할 수 있습니다.src/pages/api/todos.astro:
Text
---
import type { APIRoute } from 'astro';

export const post: APIRoute = async ({ request }) => {
  const body = await request.json();

  // "create" a Todo
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/classes/Todo`;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: body.title,
      isCompleted: body.isCompleted
    })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
};

export const get: APIRoute = async () => {
  // "read" all Todos
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/classes/Todo`;

  const response = await fetch(url, {
    method: 'GET',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY
    }
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
};
---

<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content="astro.generator" />
    <title>Todos API</title>
  </head>
  <body>
    <h1>API for Todo</h1>
  </body>
</html>
---
import type { APIRoute } from 'astro';

export const post: APIRoute = async ({ request }) => {
  const body = await request.json();

  // "create" a Todo
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/classes/Todo`;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: body.title,
      isCompleted: body.isCompleted
    })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
};

export const get: APIRoute = async () => {
  // "read" all Todos
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/classes/Todo`;

  const response = await fetch(url, {
    method: 'GET',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY
    }
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
};
---

<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content="astro.generator" />
    <title>Todos API</title>
  </head>
  <body>
    <h1>API for Todo</h1>
  </body>
</html>
﻿
이 예제는 환경 변수를 사용하여 (import.meta.env.*) Back4App 자격 증명을 저장합니다. 우리는 하나의 파일에 두 가지 메서드를 정의합니다: export const post는 할 일을 생성하고, export const get는 모든 할 일을 검색합니다. 이를 레이아웃 컴포넌트 구조와 다른 사이트 페이지에 맞게 조정할 수 있습니다.
GraphQL API를 사용한 데이터 읽기 및 쓰기
유사하게, Astro 페이지에서 GraphQL 요청을 수행할 수 있습니다:
Text
---
export async function post({ request }) {
  const body = await request.json();
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/graphql`;

  const query = `
    mutation {
      createTodo(input: {
        fields: {
          title: "${body.title}"
          isCompleted: ${body.isCompleted}
        }
      }) {
        todo {
          objectId
          title
          isCompleted
        }
      }
    }
  `;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ query })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
}
---
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>Todos GraphQL</title>
  </head>
  <body>
    <h1>GraphQL Endpoint for Todos</h1>
  </body>
</html>
---
export async function post({ request }) {
  const body = await request.json();
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/graphql`;

  const query = `
    mutation {
      createTodo(input: {
        fields: {
          title: "${body.title}"
          isCompleted: ${body.isCompleted}
        }
      }) {
        todo {
          objectId
          title
          isCompleted
        }
      }
    }
  `;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ query })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
}
---
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>Todos GraphQL</title>
  </head>
  <body>
    <h1>GraphQL Endpoint for Todos</h1>
  </body>
</html>
﻿
라이브 쿼리 사용하기 (선택 사항)
라이브 쿼리는 데이터에 대한 실시간 업데이트를 가능하게 합니다. 이를 사용하려면 Back4App 대시보드에서 라이브 쿼리를 활성화하고 WebSocket 연결을 구성해야 합니다. 그러나 정적 Astro 사이트를 구축하는 경우 wss://YOUR_SUBDOMAIN.b4a.io. 라이브 쿼리는 레코드가 생성, 업데이트 또는 삭제될 때마다 연결된 클라이언트에 변경 사항을 푸시할 수 있습니다.
3단계 – ACL 및 CLP로 보안 적용하기
ACLs (액세스 제어 목록) 및 CLPs (클래스 수준 권한)는 데이터 접근을 제어하는 데 기본적입니다. 이를 Database 섹션에서 Back4App 대시보드에서 구성할 수 있습니다. 예를 들어:
인증된 사용자만 읽기/쓰기를 제한합니다.
객체별 보안을 위해 ACL을 사용합니다.
당신의 데이터가 보호되도록 Back4App 보안 가이드라인을 사용하세요. 대시보드에서 이러한 규칙을 설정할 수도 있으며, REST 호출이 열려 있더라도 올바른 자격 증명만이 데이터를 수정하거나 볼 수 있습니다.
4단계 – 클라우드 코드 함수 작성
클라우드 코드의 이유: 주요 비즈니스 로직을 서버 측으로 이동하여 비밀 노출을 피하거나 별도의 서버를 유지할 필요가 없습니다. 클라우드 코드는 트리거(전송 전, 전송 후)를 수신하거나 사용자 정의 엔드포인트를 처리할 수 있습니다.
예시
JS
// main.js (Cloud Code)
Parse.Cloud.define('greetUser', async (request) => {
  const userName = request.params.name || 'Guest';
  return `Hello, ${userName}! Welcome to the Astro project.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
// main.js (Cloud Code)
Parse.Cloud.define('greetUser', async (request) => {
  const userName = request.params.name || 'Guest';
  return `Hello, ${userName}! Welcome to the Astro project.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
﻿
이를 Back4App CLI를 통해 배포하거나 Back4App 대시보드의 Cloud Code 섹션에서 직접 배포할 수 있습니다.
함수 호출
Astro에서 fetch를 사용하여 Cloud Function에 접근하는 엔드포인트를 정의할 수 있습니다:
Text
---
export async function post({ request }) {
  const body = await request.json();

  const url = `${import.meta.env.BACK4APP_SERVER_URL}/functions/greetUser`;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ name: body.name })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
}
---
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>Cloud Code Greet</title>
  </head>
  <body>
    <h1>Greet Function Endpoint</h1>
  </body>
</html>
---
export async function post({ request }) {
  const body = await request.json();

  const url = `${import.meta.env.BACK4APP_SERVER_URL}/functions/greetUser`;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ name: body.name })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
}
---
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>Cloud Code Greet</title>
  </head>
  <body>
    <h1>Greet Function Endpoint</h1>
  </body>
</html>
﻿
5단계 – 인증 구성
Back4App은 _User 클래스를 사용하여 사용자 계정을 처리합니다. REST를 사용하면 회원가입, 로그인 또는 로그아웃을 관리할 수 있습니다. 예를 들어, 새 사용자 등록을 할 수 있습니다:
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_KEY" \
  -H "Content-Type: application/json" \
  -d '{"username":"user1","password":"secret123","email":"[email protected]"}' \
  https://parseapi.back4app.com/users
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_KEY" \
  -H "Content-Type: application/json" \
  -d '{"username":"user1","password":"secret123","email":"user1@example.com"}' \
  https://parseapi.back4app.com/users
﻿
이 논리를 Astro에서 fetch를 사용하여 유사한 방식으로 환경 변수를 사용하여 복제할 수 있습니다. 로그인하면 사용자는 이후 요청을 위한 세션 토큰을 받습니다.
소셜 로그인
소셜 제공자(예: Google 또는 Apple)의 경우, 특정 엔드포인트를 사용하거나 OAuth 흐름을 설정하십시오. Apple로 로그인 문서 또는 기타 소셜 로그인 가이드를 참조하여 고급 인증을 통합하십시오. 이는 사용자가 최소한의 마찰로 astro 프로젝트에서 로그인할 수 있도록 하려는 경우 특히 유용합니다.
6단계 – 파일 저장 처리
Back4App에 파일을 저장하려면 REST API를 사용하여 파일을 전송합니다. 예를 들어:
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_KEY" \
  -H "Content-Type: image/png" \
  --data-binary "@path/to/local/image.png" \
  https://parseapi.back4app.com/files/myImage.png
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_KEY" \
  -H "Content-Type: image/png" \
  --data-binary "@path/to/local/image.png" \
  https://parseapi.back4app.com/files/myImage.png
﻿
응답에는 파일 URL이 포함됩니다. 해당 URL을 Photo 클래스 객체와 같은 레코드에 연결하여 데이터베이스에서 파일에 대한 참조를 추적할 수 있습니다. 또한 앱 구성에서 파일 보안 설정을 조정하여 누가 업로드할 수 있는지 제어할 수 있습니다.
7단계 – 이메일 확인 및 비밀번호 재설정
이메일 확인 활성화: Back4App 대시보드의 앱 설정에서 이메일 확인을 활성화하고 확인 이메일 템플릿을 사용자 정의합니다.
비밀번호 재설정 설정: 마찬가지로 비밀번호 재설정 이메일을 구성하고 _User 클래스에 유효한 이메일 주소가 있는지 확인합니다.
흐름: 사용자가 귀하의 astro 프로젝트에서 재설정을 요청하면(API 호출을 통해) Back4App은 비밀번호를 변경할 수 있는 보안 링크가 포함된 이메일을 자동으로 보냅니다.
8단계 – 클라우드 작업으로 작업 예약
반복적인 유지 관리 또는 기타 작업을 예약하려면 클라우드 작업을 사용하십시오:
JS
// main.js
Parse.Cloud.job('cleanupOldTodos', async () => {
  const query = new Parse.Query('Todo');
  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  query.lessThan('createdAt', new Date(now - THIRTY_DAYS));

  const oldTodos = await query.find({ useMasterKey: true });
  await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
  return `Deleted ${oldTodos.length} old Todos.`;
});
// main.js
Parse.Cloud.job('cleanupOldTodos', async () => {
  const query = new Parse.Query('Todo');
  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  query.lessThan('createdAt', new Date(now - THIRTY_DAYS));

  const oldTodos = await query.find({ useMasterKey: true });
  await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
  return `Deleted ${oldTodos.length} old Todos.`;
});
﻿
코드를 배포한 후 서버 설정 > 백그라운드 작업에서 작업을 예약하세요. 이는 데이터 정리, 이메일 전송 또는 특정 간격으로 실행하고 싶은 모든 정기 작업을 자동화합니다.
9단계 – 웹훅 통합
웹훅은 특정 이벤트가 Back4App 앱에서 발생할 때 외부 서비스에 알릴 수 있게 해줍니다. 예를 들어, 새로운 Todo가 생성될 때마다 Slack에 데이터를 보낼 수 있습니다:
더보기 > 웹훅에서 Back4App 대시보드로 이동하세요.
Slack URL을 가리키는 웹훅 추가하세요.
이벤트 선택 (예: 객체 생성 Todo 클래스에서).
이것은 요청/응답 흐름을 통해 외부 시스템을 Astro 기반 애플리케이션의 데이터와 동기화 상태로 유지할 수 있게 해줍니다.
10단계 – Back4App 관리 패널 탐색
 Back4App 관리 앱은 데이터 편집을 위한 사용자 친화적인 관리 패널입니다. 이는 데이터베이스에 직접 접근해야 하는 비기술 팀원에게 특히 유용합니다.
관리자 앱을 활성화 하십시오 더보기 > 관리자 앱.
관리자 사용자 생성 하여 안전하게 접근하십시오.
이 패널을 사용하여 CRUD 작업을 신속하게 수행하고, 로그를 확인하거나, 더 고급 설정을 구성하십시오.
결론
Back4App을 사용하여 Astro 프로젝트를 위한 안전하고 효율적인 백엔드를 성공적으로 생성했습니다. 이 튜토리얼을 통해 여러분은:
데이터베이스 스키마를 정의하고 구성했습니다
REST 및 GraphQL API를 사용하여 데이터를 읽고 썼습니다.
ACL, CLP 및 사용자 인증으로 데이터를 보호했습니다.
Cloud Code 및 예약 작업을 통해 로직을 확장했습니다.
이미지 또는 문서에 대한 파일 저장을 처리했습니다.
외부 알림을 위한 Webhook을 통합했습니다.
데이터 관리를 단순화하기 위해 관리자 패널을 탐색했습니다.
이 접근 방식은 신뢰할 수 있고 확장 가능하며 유지 관리가 쉬운 Astro의 백엔드를 구축하는 방법을 강조합니다. 환경 변수를 활용함으로써 자격 증명을 안전하게 유지하면서 코드가 향후 성장에 유연하게 대응할 수 있도록 합니다.
다음 단계
Astro 프로젝트 배포 서버 측 렌더링 또는 Node 기반 환경을 지원하는 호스팅 플랫폼을 사용하여.
고급 기능 추가, 역할 기반 접근 제어 또는 전문 결제 통합과 같은 기능을 Cloud Code 또는 외부 API를 사용하여.
성능 최적화 캐싱 전략을 구현하고 사용자 경험을 개선하기 위해 뷰포트 콘텐츠 설정을 조정하여.
Back4App 문서 검토 로그, 분석 및 더 고급 보안 조치에 대해 배우기 위해.
실시간 기능을 Live Queries로 계속 탐색하고 진정으로 동적이고 협업적인 애플리케이션을 구축하세요.
﻿
업데이트됨 24 Jan 2025
이 페이지가 도움이 되었습니까?
파이썬을 위한 백엔드를 어떻게 구축할까요?
Deno용 백엔드 구축 방법?