자습서: Azure Static Web Apps에서 MySQL 데이터베이스 연결 추가(미리 보기)

이 자습서에서는 Azure Database for MySQL 유연한 서버 데이터베이스를 정적 웹앱에 연결하는 방법을 알아봅니다. 구성된 후에는 백 엔드 코드를 작성하지 않고도 데이터를 조작하기 위해 기본 제공 /data-api 엔드포인트에 REST 또는 GraphQL 요청을 수행할 수 있습니다.

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

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

필수 조건

이 자습서를 완료하려면 기존 Azure Database for MySQL 데이터베이스 및 정적 웹앱이 있어야 합니다. 또한 Azure Data Studio를 설치해야 합니다.

먼저 Azure Static Web Apps 데이터베이스 연결 기능을 사용하도록 데이터베이스를 구성합니다.

데이터베이스 연결 구성

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

1. Azure Portal에서 Azure Database for MySQL Server 유연한 서버로 이동합니다.

2. 설정 섹션에서 네트워킹을 선택합니다.

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

4. 방화벽 규칙 섹션에서 Azure 내의 모든 Azure 서비스에서 이 서버로의 퍼블릭 액세스 허용 확인란을 선택합니다. 이 단계에서는 배포된 Static Web Apps 리소스가 데이터베이스에 액세스할 수 있도록 합니다.

5. 저장을 선택합니다.

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

로컬 개발에 Azure 데이터베이스를 사용하려면 데이터베이스의 연결 문자열을 검색해야 합니다. 개발 목적으로 로컬 데이터베이스를 사용하려는 경우 이 단계를 건너뛸 수 있습니다.

1. Azure Portal에서 Azure Database for MySQL Server 유연한 서버로 이동합니다.

2. 설정 섹션에서 연결을 선택합니다.

3. 앱에서 연결 섹션에서 ADO.NET 연결 문자열을 선택하고 텍스트 편집기에서 따로 설정합니다.

4. 연결 문자열의 {your_password} 자리 표시자를 암호로 바꿉니다.

5. {your_database} 자리 표시자를 데이터베이스 이름 MyTestPersonDatabase로 바꿉니다. 다음 단계에서 MyTestPersonDatabase를 만듭니다.

6. 연결 문자열의 SslMode 및 SslCa 섹션을 삭제합니다. 이러한 섹션에는 추가 단계가 필요하며 프로덕션 용도로 사용됩니다.

샘플 데이터 만들기

샘플 테이블을 만들고 자습서와 일치하도록 샘플 데이터로 시드합니다. 여기에서 Azure Data Studio를 사용할 수 있지만 MySQL Workbench 또는 다른 도구를 사용할 수 있습니다.

1. Azure Data Studio에서 Azure MySQL 유연한 서버에 대한 연결을 만듭니다.

2. 서버를 마우스 오른쪽 단추로 클릭하고 새 데이터베이스를 만듭니다. 데이터베이스 이름으로 MyTestPersonDatabase를 입력하고, utf8mb4로 문자 집합을 선택하고 utf8mb4_0900_ai_ci의 데이터 정렬을 선택합니다.

3. 서버를 마우스 오른쪽 단추로 클릭하고 새로 고침을 선택합니다.

4. MyTestPersonDatabase 데이터베이스를 마우스 오른쪽 단추로 클릭하고 새 쿼리를 선택합니다. 다음 스크립트를 실행하여 MyTestPersonTable이라는 새 테이블을 만듭니다.

   CREATE TABLE MyTestPersonTable (
       Id INT AUTO_INCREMENT NOT NULL,
       Name VARCHAR(25) NULL,
       PRIMARY KEY (Id)
   );
   

5. 다음 스크립트를 실행하여 MyTestPersonTable 테이블에 데이터를 추가합니다.

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

6. MyTestPersonTable 테이블을 마우스 오른쪽 단추로 클릭하고 상위 1000개 선택을 선택하여 데이터베이스에 데이터가 있는지 확인합니다.

정적 웹앱 구성

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

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

   • Bash
   • PowerShell

   git checkout main
   

2. git pull을 사용하여 로컬 버전을 GitHub의 버전과 동기화합니다.

   • Bash
   • PowerShell

   git pull origin main
   

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

다음으로, 정적 웹앱이 데이터베이스와 인터페이스하는 데 사용하는 구성 파일을 만듭니다.

1. 터미널을 열고 연결 문자열을 저장할 새 변수를 만듭니다. 특정 구문은 사용 중인 셸 유형에 따라 달라질 수 있습니다.

   • Bash
   • PowerShell

   export DATABASE_CONNECTION_STRING='<YOUR_CONNECTION_STRING>'
   

   <YOUR_CONNECTION_STRING>을 텍스트 편집기에서 따로 설정한 연결 문자열 값으로 바꿔야 합니다.

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

   설치하려면 npm install을 사용합니다.

   • Bash
   • PowerShell

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

   업데이트하려면 npm update를 사용합니다.

   • Bash
   • PowerShell

   npm update
   

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

   • Bash
   • PowerShell

   swa db init --database-type mysql
   

   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": "mysql",
    "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 설명서를 참조하세요.

이제 데이터베이스에 연결하도록 구성된 정적 웹앱을 사용하여 연결을 확인할 수 있습니다.

홈페이지 업데이트

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 ./src --data-api-location swa-db-connections
   

이제 CLI가 시작되었으므로 staticwebapp.database.config.json 파일에 정의된 대로 엔드포인트를 통해 데이터베이스에 액세스할 수 있습니다.

데이터 조작

다음 프레임워크에 구애받지 않는 명령은 데이터베이스에서 전체 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);
}

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

페이지를 새로 고치고 목록 단추를 선택합니다.

이제 브라우저의 콘솔 창에 데이터베이스의 레코드가 모두 나열된 테이블이 표시됩니다.

브라우저에 어떻게 표시되는지 보여주는 스크린샷은 다음과 같습니다.

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

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

페이지를 새로 고치고 가져오기 단추를 선택합니다.

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

엽데이트

index.html의 script 태그 사이에 다음 코드를 추가합니다.

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

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

페이지를 새로 고치고 업데이트 단추를 선택합니다.

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

만들기

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

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

페이지를 새로 고치고 만들기 단추를 선택합니다.

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

삭제

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

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

페이지를 새로 고치고 삭제 단추를 선택합니다.

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

삭제된 레코드: 3

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

사이트 배포

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

1. 추적할 파일 변경 내용을 추가합니다.

   git add .
   

2. 구성 변경 내용을 커밋합니다.

   git commit -am "Add database configuration"
   

3. 서버에 변경 내용을 푸시합니다.

   git push origin main
   

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

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

1. Azure Portal의 Static Web App을 엽니다.

2. 설정 섹션에서 데이터베이스 연결을 선택합니다.

3. 프로덕션 섹션에서 기존 데이터베이스 연결 링크를 선택합니다.

4. 기존 데이터베이스 연결 창에서 다음 값을 입력합니다.

   속성	값
   데이터베이스 유형	드롭다운 목록에서 데이터베이스 유형을 선택합니다.
   구독	드롭다운 목록에서 Azure 구독을 선택합니다.
   리소스 이름	원하는 데이터베이스가 있는 데이터베이스 서버 이름을 선택합니다.
   데이터베이스 이름	정적 웹앱에 연결할 데이터베이스의 이름을 선택합니다.
   인증 유형	연결 문자열을 선택하고 MySQL 사용자 이름과 암호를 입력합니다.

5. 확인을 선택합니다.

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

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

1. Azure Portal의 Static Web App을 엽니다.

2. Essentials 섹션에서 Static Web Apps 리소스의 URL을 선택하여 정적 웹앱으로 이동합니다.

3. 목록 단추를 선택하여 모든 항목을 나열합니다.

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

   

리소스 정리

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

1. 데이터베이스 연결 해제: Azure Portal에서 정적 웹앱을 엽니다. 설정 섹션에서 데이터베이스 연결을 선택합니다. 연결된 데이터베이스 옆에 있는 세부 정보 보기를 선택합니다. 데이터베이스 연결 세부 정보 창에서 연결 해제 단추를 선택합니다.

2. 샘플 데이터 제거: 데이터베이스에서 MyTestPersonTable라는 테이블을 삭제합니다.

다음 단계