다음 단계로 이동하기 전에 구성 파일의 다양한 측면을 설명하는 다음 표를 검토합니다. 항목 수준 보안에 대한 관계와 정책과 같은 기능 및 구성 파일에 대한 전체 설명서는 데이터 API 작성기 설명서를 참조하세요.
기능
설명
데이터베이스 연결
개발 시 런타임은 구성 파일의 연결 문자열 값에서 연결 문자열을 읽습니다. 구성 파일에서 직접 연결 문자열을 지정할 수 있지만 연결 문자열을 로컬 환경 변수에 저장하는 것이 가장 좋습니다. @env('DATABASE_CONNECTION_STRING') 표기법을 통해 구성 파일에서 환경 변수 값을 참조할 수 있습니다. 데이터베이스를 연결할 때 수집된 정보로 배포된 사이트의 Static Web Apps에서 연결 문자열 값을 덮어씁니다.
API 엔드포인트
이 구성 파일에 구성된 대로 REST 엔드포인트는 /data-api/rest를 통해 사용할 수 있지만 GraphQL 엔드포인트는 /data-api/graphql을 통해 사용할 수 있습니다. REST 및 GraphQL 경로를 구성할 수 있지만 /data-api 접두사는 구성할 수 없습니다.
API 보안
runtime.host.cors 설정을 사용하면 API에 요청할 수 있는 허용된 원본을 정의할 수 있습니다. 이 경우 구성은 개발 환경을 반영하고 http://localhost:4280 위치를 허용 목록에 추가합니다.
엔터티 모델
REST API의 경로를 통해 노출되는 엔터티를 정의하거나 GraphQL 스키마의 유형으로 엔터티를 정의합니다. 이 경우 Person이라는 이름은 엔드포인트에 노출되는 이름이고 entities.<NAME>.source는 데이터베이스 스키마 및 테이블 매핑입니다. API 엔드포인트 이름이 테이블 이름과 동일할 필요는 없습니다.
엔터티 보안
entity.<NAME>.permissions 배열에 나열된 권한 규칙은 엔터티에 대한 권한 부여 설정을 제어합니다. 역할을 사용하여 경로를 보호하는 것과 동일한 방식으로 역할을 사용하여 엔터티를 보호할 수 있습니다.
참고
구성 파일의 connection-string, host.mode, graphql.allow-introspection 속성은 사이트를 배포할 때 덮어씁니다. 데이터베이스를 Static Web Apps 리소스에 연결할 때 수집된 인증 세부 정보로 연결 문자열을 덮어씁니다. host.mode 속성은 production으로 설정되고, graphql.allow-introspection은 false로 설정됩니다. 이러한 재정의는 개발 및 프로덕션 워크로드에서 구성 파일의 일관성을 제공하는 동시에 데이터베이스 연결을 사용하도록 설정된 Static Web Apps 리소스가 안전하고 프로덕션 준비가 되도록 보장합니다.
이제 데이터베이스에 연결하도록 구성된 정적 웹앱을 사용하여 연결을 확인할 수 있습니다.
홈페이지 업데이트
index.html 파일에서 body 태그 사이의 마크업을 다음 HTML로 바꿉니다.
<h1>Static Web Apps Database Connections</h1>
<blockquote>
Open the console in the browser developer tools to see the API responses.
</blockquote>
<div>
<button id="list" onclick="list()">List</button>
<button id="get" onclick="get()">Get</button>
<button id="update" onclick="update()">Update</button>
<button id="create" onclick="create()">Create</button>
<button id="delete" onclick="del()">Delete</button>
</div>
<script>
// add JavaScript here
</script>
로컬로 애플리케이션 시작
이제 웹 사이트를 실행하고 데이터베이스의 데이터를 직접 조작할 수 있습니다.
데이터베이스 구성을 사용하여 정적 웹앱을 시작합니다.
swa start --data-api-location swa-db-connections
이제 CLI가 시작되었으므로 staticwebapp.database.config.json 파일에 정의된 대로 엔드포인트를 통해 데이터베이스에 액세스할 수 있습니다.
http://localhost:4280/data-api/rest/<ENTITY_NAME> 엔드포인트는 데이터베이스의 데이터를 조작하기 위한 GET, PUT, POST 및 DELETE 요청을 수락합니다.
http://localhost:4280/data-api/graphql 엔드포인트는 GraphQL 쿼리 및 변형을 허용합니다.
데이터 조작
다음 프레임워크에 구애받지 않는 명령은 데이터베이스에서 전체 CRUD 작업을 수행하는 방법을 보여 줍니다.
각 함수의 출력이 브라우저의 콘솔 창에 표시됩니다.
CMD/CTRL + SHIFT + I를 눌러 개발자 도구를 열고 콘솔 탭을 선택합니다.
모든 항목 나열
index.html의 script 태그 사이에 다음 코드를 추가합니다.
async function list() {
const endpoint = '/data-api/rest/Person';
const response = await fetch(endpoint);
const data = await response.json();
console.table(data.value);
}
이 예에서는 다음이 적용됩니다.
fetch API에 대한 기본 요청은 동사 GET을 사용합니다.
응답 페이로드의 데이터는 value 속성에 있습니다.
async function list() {
const query = `
{
people {
items {
Id
Name
}
}
}`;
const endpoint = "/data-api/graphql";
const response = await fetch(endpoint, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ query: query })
});
const result = await response.json();
console.table(result.data.people.items);
}
이 예에서는 다음이 적용됩니다.
GraphQL 쿼리는 데이터베이스에서 Id 및 Name 필드를 선택합니다.
서버에 전달된 요청에는 query 속성에 쿼리 정의가 있는 페이로드가 필요합니다.
응답 페이로드의 데이터는 data.people.items 속성에 있습니다.
페이지를 새로 고치고 목록 단추를 선택합니다.
이제 브라우저의 콘솔 창에 데이터베이스의 레코드가 모두 나열된 테이블이 표시됩니다.
ID
속성
1
맑음
2
Dheeraj
브라우저에 어떻게 표시되는지 보여주는 스크린샷은 다음과 같습니다.
ID로 가져오기
index.html의 script 태그 사이에 다음 코드를 추가합니다.
async function get() {
const id = 1;
const endpoint = `/data-api/rest/Person/Id`;
const response = await fetch(`${endpoint}/${id}`);
const result = await response.json();
console.table(result.value);
}