자습서: Azure Static Web Apps에 PostgreSQL 데이터베이스 연결 추가(프리뷰)

이 자습서에서는 Azure Database for PostgreSQL Single Server 또는 Flexible Server 데이터베이스를 정적 웹앱에 연결하는 방법을 알아봅니다. 구성이 완료되면 백엔드 코드를 작성하지 않고도 기본 제공 /data-api 엔드포인트로 REST 또는 GraphQL 요청을 보내 데이터를 조작할 수 있습니다.

단순화를 위해 이 자습서에서는 로컬 개발 목적으로 Azure 데이터베이스를 사용하는 방법을 보여 주지만, 로컬 개발 요구에 따라 로컬 데이터베이스 서버를 사용할 수도 있습니다.

참고

이 자습서에서는 Azure Database for PostgreSQL Flexible Server 또는 Single Server 사용 방법을 보여 줍니다. 다른 데이터베이스를 사용하려면 Azure Cosmos DB, Azure SQL, 또는 MySQL 자습서를 참조하세요.

이 자습서에서는 다음에 대해 알아봅니다.

• Azure Database for PostgreSQL Flexible Server 또는 Single Server 데이터베이스를 정적 웹앱에 연결
• 데이터의 만들기, 읽기, 업데이트 및 삭제

사전 준비 사항

이 자습서를 완료하려면 기존 Azure Database for PostgreSQL Flexible Server 또는 Single Server와 정적 웹앱이 필요합니다. 또한 Visual Studio Code를 설치해야 합니다.

리소스	설명
Azure Database for PostgreSQL Flexible Server 또는 Azure Database for PostgreSQL Single Server Database	아직 없는 경우 Azure Database for PostgreSQL Flexible Server 데이터베이스 만들기 가이드 또는 Azure Database for PostgreSQL Single Server 데이터베이스 만들기 가이드의 단계를 따르세요. Static Web Apps의 데이터베이스 연결에 연결 문자열 인증을 사용할 계획이라면 Azure Database for PostgreSQL Server를 만들 때 PostgreSQL 인증을 사용하도록 설정하세요. 나중에 관리형 ID를 사용하려면 이 값을 변경할 수 있습니다.
기존 정적 웹앱	아직 없는 경우 시작 가이드의 단계를 따라 프레임워크 없음 정적 웹앱을 만드세요.
PostgreSQL 확장이 있는 Visual Studio Code	Visual Studio Code가 아직 설치되어 있지 않은 경우 가이드에 따라 PostgreSQL 확장과 함께 Visual Studio Code를 설치합니다. 또는 PgAdmin과 같은 다른 도구를 사용해 PostgreSQL 데이터베이스를 쿼리할 수도 있습니다.

Azure Static Web Apps 데이터베이스 연결 기능과 함께 동작하도록 데이터베이스를 구성하는 것부터 시작하세요.

데이터베이스 연결 구성

데이터베이스 연결이 작동하려면 Azure Static Web Apps에서 데이터베이스로 네트워크 액세스가 가능해야 합니다. 또한 로컬 개발에 Azure 데이터베이스를 사용하려면 자신의 IP 주소에서 오는 요청을 허용하도록 데이터베이스를 구성해야 합니다.

1. Azure Portal에서 Azure Database for PostgreSQL Server로 이동하세요.

2. Azure Database for PostgreSQL Flexible Server를 사용 중이라면 설정 섹션에서 네트워킹을 선택하세요. Azure Database for PostgreSQL Single Server를 사용 중이라면 설정 섹션에서 연결 보안을 선택하세요.

3. 방화벽 규칙 섹션에서 현재 클라이언트 IP 주소 추가 버튼을 선택하세요. 이 단계를 수행하면 로컬 개발에 이 데이터베이스를 사용할 수 있습니다.

4. 방화벽 규칙 섹션에서 Azure 내의 모든 Azure 서비스에서 이 서버로 공용 액세스 허용 확인란을 선택하세요. Azure Database for PostgreSQL Single Server를 사용 중이라면 이 토글의 이름은 Azure 서비스에 대한 액세스 허용입니다. 이 단계는 배포된 Static Web Apps 리소스가 데이터베이스에 액세스할 수 있도록 보장합니다.

5. 저장을 선택합니다.

로컬 개발을 위한 데이터베이스 연결 문자열 가져오기

로컬 개발에 Azure 데이터베이스를 사용하려면 데이터베이스의 연결 문자열을 가져와야 합니다. 개발 목적으로 로컬 데이터베이스를 사용할 계획이라면 이 단계는 건너뛸 수 있습니다.

1. Azure Portal에서 Azure Database for PostgreSQL Server로 이동하세요.

2. 설정 섹션에서 연결 문자열을 선택하세요.

3. ADO.NET 상자에서 연결 문자열을 복사한 다음 텍스트 편집기에 따로 저장해 두세요.

4. 연결 문자열의 {your_password} 자리표시자를 비밀번호로 바꾸세요.

5. {your_database} 자리표시자를 데이터베이스 이름 MyTestPersonDatabase(으)로 바꾸세요. MyTestPersonDatabase은(는) 다음 단계에서 만듭니다.

6. 로컬 개발에 이 연결 문자열을 사용하려면 연결 문자열 끝에 Trust Server Certificate=True;을(를) 추가하세요.

샘플 데이터 만들기

자습서와 동일하게 만들기 위해 샘플 테이블을 만들고 샘플 데이터로 시드하세요. 이 자습서에서는 Visual Studio Code를 사용하지만 PgAdmin 또는 다른 도구를 사용할 수 있습니다.

1. Visual Studio Code에서 Azure Database for PostgreSQL 서버에 대한 연결을 설정합니다.

2. 서버를 마우스 오른쪽 버튼으로 클릭하고 새 쿼리를 선택하세요. 다음 쿼리를 실행하여 MyTestPersonDatabase(이)라는 이름의 데이터베이스를 만드세요.

   CREATE DATABASE "MyTestPersonDatabase";
   

3. 서버를 마우스 오른쪽 버튼으로 클릭하고 새로 고침을 선택하세요.

4. MyTestPersonDatabase을(를) 마우스 오른쪽 버튼으로 클릭하고 새 쿼리를 선택하세요. 다음 쿼리를 실행하여 MyTestPersonTable(이)라는 이름의 새 테이블을 만드세요.

   CREATE TABLE "MyTestPersonTable" (
       "Id" SERIAL PRIMARY KEY,
       "Name" VARCHAR(25) NULL
   );
   

5. 다음 쿼리를 실행하여 MyTestPersonTable 테이블에 데이터를 추가하세요.

   INSERT INTO "MyTestPersonTable" ("Name")
   VALUES ('Sunny');
   
   INSERT INTO "MyTestPersonTable" ("Name")
   VALUES ('Dheeraj');
   

정적 웹앱 구성

이 자습서의 나머지 부분은 로컬에서 데이터베이스 연결을 활용할 수 있도록 정적 웹앱의 소스 코드를 편집하는 데 중점을 둡니다.

중요

다음 단계는 시작 가이드에서 만든 정적 웹앱으로 작업하고 있다고 가정합니다. 다른 프로젝트를 사용 중이라면 다음 git 명령이 브랜치 이름과 일치하도록 조정하세요.

1. main 분기로 전환합니다.

   Bash

   git checkout main
   

   PowerShell

   git checkout main
   

2. git pull을(를) 사용해 로컬 버전을 GitHub에 있는 내용과 동기화하세요.

   Bash

   git pull origin main
   

   PowerShell

   git pull origin main
   

데이터베이스 구성 파일 만들기

다음으로 정적 웹앱에서 데이터베이스와 인터페이스하는 데 사용하는 구성 파일을 만드세요.

1. 터미널을 열고 연결 문자열을 저장할 새 변수를 만드세요. 구체적인 구문은 사용 중인 셸 유형에 따라 다를 수 있습니다.

   Bash

   export DATABASE_CONNECTION_STRING='<YOUR_CONNECTION_STRING>'
   

   PowerShell

   $env:DATABASE_CONNECTION_STRING='<YOUR_CONNECTION_STRING>'
   

   <YOUR_CONNECTION_STRING>을(를) 텍스트 편집기에 따로 저장해 둔 연결 문자열 값으로 바꾸세요.

2. npm을 사용해 Static Web Apps CLI를 설치하거나 업데이트하세요. 상황에 가장 적합한 명령을 선택하세요.

   설치하려면 npm install을(를) 사용하세요.

   npm install -g @azure/static-web-apps-cli
   

   npm install -g @azure/static-web-apps-cli
   

   업데이트하려면 npm update을(를) 사용하세요.

   npm update
   

   npm update
   

3. swa db init 명령을 사용하여 데이터베이스 구성 파일을 생성하세요.

   Bash

   swa db init --database-type postgresql
   

   PowerShell

   swa db init --database-type postgresql
   

   init 명령은 swa-db-connections 폴더에 staticwebapp.database.config.json 파일을 생성합니다.

4. 생성한 staticwebapp.database.config.json 파일에 이 샘플을 붙여넣으세요.

{
  "$schema": "https://github.com/Azure/data-api-builder/releases/latest/download/dab.draft.schema.json",
  "data-source": {
    "database-type": "postgresql",
    "options": {
      "set-session-context": false 
    },
    "connection-string": "@env('DATABASE_CONNECTION_STRING')"
  },
  "runtime": {
    "rest": {
      "enabled": true,
      "path": "/rest"
    },
    "graphql": {
      "allow-introspection": true,
      "enabled": true,
      "path": "/graphql"
    },
    "host": {
      "mode": "production",
      "cors": {
        "origins": ["http://localhost:4280"],
        "allow-credentials": false
      },
      "authentication": {
        "provider": "StaticWebApps"
      }
    }
  },
  "entities": {
    "Person": {
      "source": "MyTestPersonTable",
      "permissions": [
        {
          "actions": ["*"],
          "role": "anonymous"
        }
      ]
    }
  }
}

다음 단계로 넘어가기 전에 구성 파일의 다양한 측면을 설명하는 다음 표를 검토하세요. 구성 파일 및 항목 수준 보안을 위한 관계 및 정책과 같은 기능에 대한 전체 설명서는 Data API Builder 문서를 참조하세요.

기능	설명
데이터베이스 연결	개발 시 런타임은 구성 파일의 연결 문자열 값에서 연결 문자열을 읽습니다. 연결 문자열을 구성 파일에 직접 지정할 수도 있지만, 모범 사례는 연결 문자열을 로컬 환경 변수에 저장하는 것입니다. @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>

로컬에서 애플리케이션 시작

이제 웹 사이트를 실행하고 데이터베이스의 데이터를 직접 조작할 수 있습니다.

1. 데이터베이스 구성으로 정적 웹앱을 시작하세요.

   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);
}

이 예제에서:

• 엔드포인트의 뒤에는 /person/Id이(가) 붙습니다.
• ID 값은 엔드포인트 위치의 끝에 추가됩니다.
• 응답 페이로드의 데이터는 value 속성에서 확인할 수 있습니다.

async function get() {

  const id = 1;

  const gql = `
    query getById($id: Int!) {
      person_by_pk(Id: $id) {
        Id
        Name
      }
    }`;

  const query = {
    query: gql,
    variables: {
      id: id,
    },
  };

  const endpoint = "/data-api/graphql";
  const response = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(query),
  });
  const result = await response.json();
  console.table(result.data.person_by_pk);
}

이 예제에서:

• GraphQL 쿼리는 데이터베이스에서 Id 및 Name 필드를 선택합니다.
• 서버로 전달되는 요청에는 query 속성이 쿼리 정의를 포함하는 페이로드가 필요합니다.
• 응답 페이로드의 데이터는 data.person_by_pk 속성에서 확인할 수 있습니다.

페이지를 새로 고침하고 가져오기 버튼을 선택하세요.

브라우저의 콘솔 창에 이제 데이터베이스에서 요청한 단일 레코드를 나열하는 표가 표시됩니다.

ID	이름
1	맑음

업데이트

index.html의 script 태그 사이에 다음 코드를 추가하세요.

Static Web Apps는 PUT 및 PATCH 동사를 모두 지원합니다. PUT 요청은 전체 레코드를 업데이트하고 PATCH은(는) 부분 업데이트를 수행합니다.

async function update() {

  const id = 1;
  const data = {
    Name: "Molly"
  };

  const endpoint = '/data-api/rest/Person/Id';
  const response = await fetch(`${endpoint}/${id}`, {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data)
  });
  const result = await response.json();
  console.table(result.value);
}

이 예제에서:

• 엔드포인트의 뒤에는 /person/Id/이(가) 붙습니다.
• ID 값은 엔드포인트 위치의 끝에 추가됩니다.
• 데이터베이스 레코드를 업데이트하는 REST 동사는 PUT입니다.
• 응답 페이로드의 데이터는 value 속성에서 확인할 수 있습니다.

async function update() {

  const id = 1;
  const data = {
    Name: "Molly"
  };

  const gql = `
    mutation update($id: Int!, $item: UpdatePersonInput!) {
      updatePerson(Id: $id, item: $item) {
        Id
        Name
      }
    }`;

  const query = {
    query: gql,
    variables: {
      id: id,
      item: data
    } 
  };

  const endpoint = "/data-api/graphql";
  const res = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(query)
  });

  const result = await res.json();
  console.table(result.data.updatePerson);
}

이 예제에서:

• GraphQL 쿼리는 데이터베이스에서 Id 및 Name 필드를 선택합니다.
• query 개체는 query 속성에 GraphQL 쿼리를 보관합니다.
• GraphQL 함수의 인수 값은 query.variables 속성을 통해 전달됩니다.
• 서버로 전달되는 요청에는 query 속성이 쿼리 정의를 포함하는 페이로드가 필요합니다.
• 응답 페이로드의 데이터는 data.updatePerson 속성에서 확인할 수 있습니다.

페이지를 새로 고침하고 업데이트 버튼을 선택하세요.

브라우저의 콘솔 창에 이제 업데이트된 데이터를 보여 주는 표가 표시됩니다.

ID	이름
1	Molly

만들기

index.html의 script 태그 사이에 다음 코드를 추가하세요.

async function create() {

  const data = {
    Name: "Pedro"
  };

  const endpoint = `/data-api/rest/Person/`;
  const response = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data)
  });
  const result = await response.json();
  console.table(result.value);
}

이 예제에서:

• 엔드포인트의 뒤에는 /person/이(가) 붙습니다.
• 데이터베이스 레코드를 추가하는 REST 동사는 POST입니다.
• 응답 페이로드의 데이터는 value 속성에서 확인할 수 있습니다.

async function create() {

  const data = {
    Name: "Pedro"
  };

  const gql = `
    mutation create($item: CreatePersonInput!) {
      createPerson(item: $item) {
        Id
        Name
      }
    }`;

  const query = {
    query: gql,
    variables: {
      item: data
    } 
  };

  const endpoint = "/data-api/graphql";
  const result = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(query)
  });

  const response = await result.json();
  console.table(response.data.createPerson);
}

이 예제에서:

• GraphQL 쿼리는 데이터베이스에서 Id 및 Name 필드를 선택합니다.
• query 개체는 query 속성에 GraphQL 쿼리를 보관합니다.
• GraphQL 함수의 인수 값은 query.variables 속성을 통해 전달됩니다.
• 서버로 전달되는 요청에는 query 속성이 쿼리 정의를 포함하는 페이로드가 필요합니다.
• 응답 페이로드의 데이터는 data.updatePerson 속성에서 확인할 수 있습니다.

페이지를 새로 고침하고 만들기 버튼을 선택하세요.

브라우저의 콘솔 창에 이제 데이터베이스의 새 레코드를 보여 주는 표가 표시됩니다.

ID	이름
3	Pedro

DELETE

index.html의 script 태그 사이에 다음 코드를 추가하세요.

async function del() {
  const id = 3;
  const endpoint = '/data-api/rest/Person/Id';
  const response = await fetch(`${endpoint}/${id}`, {
    method: "DELETE"
  });
  if(response.ok) {
    console.log(`Record deleted: ${ id }`)
  } else {
    console.log(response);
  }
}

이 예제에서:

• 엔드포인트의 뒤에는 /person/Id/이(가) 붙습니다.
• ID 값은 엔드포인트 위치의 끝에 추가됩니다.
• 데이터베이스 레코드를 제거하는 REST 동사는 DELETE입니다.
• 삭제가 성공하면 응답 페이로드의 ok 속성은 true입니다.

async function del() {

  const id = 3;

  const gql = `
    mutation del($id: Int!) {
      deletePerson(Id: $id) {
        Id
      }
    }`;

  const query = {
    query: gql,
    variables: {
      id: id
    }
  };

  const endpoint = "/data-api/graphql";
  const response = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(query)
  });

  const result = await response.json();
  console.log(`Record deleted: ${ result.data.deletePerson.Id }`);
}

이 예제에서:

• GraphQL 쿼리는 데이터베이스에서 Id 필드를 선택합니다.
• query 개체는 query 속성에 GraphQL 쿼리를 보관합니다.
• GraphQL 함수의 인수 값은 query.variables 속성을 통해 전달됩니다.
• 서버로 전달되는 요청에는 query 속성이 쿼리 정의를 포함하는 페이로드가 필요합니다.
• 응답 페이로드의 데이터는 data.deletePerson 속성에서 확인할 수 있습니다.

페이지를 새로 고침하고 삭제 버튼을 선택하세요.

브라우저의 콘솔 창에 이제 삭제 요청에 대한 응답을 보여 주는 표가 표시됩니다.

삭제된 레코드 : 3

이제 사이트를 로컬에서 작업했으므로 Azure에 배포할 수 있습니다.

사이트 배포

이 사이트를 프로덕션에 배포하려면 구성 파일을 커밋하고 변경 사항을 서버에 푸시하기만 하면 됩니다.

1. 추적할 파일 변경 사항을 추가하세요.

   git add .
   

2. 구성 변경 사항을 커밋하세요.

   git commit -am "Add database configuration"
   

3. 변경 사항을 서버에 푸시하세요.

   git push origin main
   

데이터베이스를 정적 웹앱에 연결

다음 단계를 사용하여 사이트의 Static Web Apps 인스턴스와 데이터베이스 간의 연결을 만드세요.

1. Azure Portal에서 정적 웹앱을 여세요.

2. 설정 섹션에서 데이터베이스 연결을 선택하세요.

3. 프로덕션 섹션에서 기존 데이터베이스 연결 링크를 선택하세요.

4. 기존 데이터베이스 연결 창에서 다음 값을 입력하세요:

   속성	값
   데이터베이스 유형	드롭다운 목록에서 데이터베이스 유형을 선택하세요.
   Subscription	드롭다운 목록에서 Azure 구독을 선택하세요.
   리소스 이름	원하는 데이터베이스가 있는 데이터베이스 서버 이름을 선택하세요.
   데이터베이스 이름	정적 웹앱에 연결할 데이터베이스 이름을 선택하세요.
   인증 유형	연결 문자열을 선택하고 PostgreSQL 사용자 이름과 비밀번호를 입력하세요. PostgreSQL Single Server의 경우 @servername 접미사는 포함하지 마세요.

5. 확인을 선택합니다.

데이터베이스가 Static Web Apps 리소스에 연결되었는지 확인

데이터베이스를 정적 웹앱에 연결하고 사이트 빌드가 완료되면 다음 단계에 따라 데이터베이스 연결을 확인하세요.

1. Azure Portal에서 정적 웹앱을 여세요.

2. 필수 항목 섹션에서 Static Web Apps 리소스의 URL을 선택해 정적 웹앱으로 이동하세요.

3. 모든 항목을 나열하려면 목록 버튼을 선택하세요.

   출력은 이 스크린샷에 표시된 것과 비슷해야 합니다.

   

리소스 정리

이 자습서에서 만든 리소스를 제거하려면 데이터베이스 연결을 해제하고 샘플 데이터를 제거해야 합니다.

1. 데이터베이스 연결 해제: Azure 포털에서 정적 웹앱을 여세요. 설정 섹션 아래에서 데이터베이스 연결을 선택하세요. 연결된 데이터베이스 옆에서 세부 정보 보기를 선택하세요. 데이터베이스 연결 세부 정보 창에서 연결 해제 버튼을 선택하세요.

2. 샘플 데이터 제거: 데이터베이스에서 MyTestPersonTable 이름의 테이블을 삭제하세요.

다음 단계

API 추가