البرنامج التعليمي: إضافة اتصال قاعدة بيانات MySQL في Azure Static Web Apps (معاينة)

في هذا البرنامج التعليمي، ستتعلم كيفية توصيل قاعدة بيانات Azure Database for MySQL Flexible Server بتطبيق الويب الثابت الخاص بك. بمجرد التكوين، يمكنك إجراء طلبات REST أو GraphQL إلى نقطة النهاية المضمنة /data-api لمعالجة البيانات دون الحاجة إلى كتابة التعليمات البرمجية الخلفية.

من أجل البساطة، يوضح لك هذا البرنامج التعليمي كيفية استخدام قاعدة بيانات Azure لأغراض التطوير المحلي، ولكن يمكنك أيضا استخدام خادم قاعدة بيانات محلي لاحتياجات التطوير المحلية الخاصة بك.

إشعار

يوضح هذا البرنامج التعليمي كيفية استخدام قاعدة بيانات Azure لخادم MySQL المرن. إذا كنت ترغب في استخدام قاعدة بيانات أخرى، فراجع البرامج التعليمية Azure Cosmos DB أو Azure SQL أو PostgreSQL .

Web browser showing results from MySQL in the developer tools console window.

ستتعرف في هذا البرنامج التعليمي على:

ربط قاعدة بيانات Azure Database for MySQL بتطبيق الويب الثابت
إنشاء البيانات وقراءتها وتحديثها وحذفها

المتطلبات الأساسية

لإكمال هذا البرنامج التعليمي، تحتاج إلى وجود قاعدة بيانات Azure لقاعدة بيانات MySQL وتطبيق ويب ثابت. بالإضافة إلى ذلك، تحتاج إلى تثبيت Azure Data Studio.

مورد	‏‏الوصف
قاعدة بيانات Azure لخادم MySQL المرن	إذا كنت بحاجة إلى إنشاء قاعدة بيانات، فاتبع الخطوات الواردة في دليل إنشاء قاعدة بيانات Azure لخادم MySQL المرن. إذا كنت تخطط لاستخدام مصادقة سلسلة الاتصال لتطبيق الويب الخاص بك، فتأكد من إنشاء قاعدة البيانات الخاصة بك باستخدام مصادقة MySQL. يمكنك تغيير هذا الإعداد لاحقا إذا كنت تريد استخدام الهوية المدارة لاحقا.
تطبيق ويب ثابت موجود	إذا لم يكن لديك واحد بالفعل، فاتبع الخطوات الواردة في دليل البدء لإنشاء تطبيق ويب ثابت No Framework .
Azure Data Studio، مع ملحق MySQL	إذا لم يكن لديك Azure Data Studio مثبتا بالفعل، فاتبع الدليل لتثبيت Azure Data Studio، مع ملحق MySQL. بدلا من ذلك، يمكنك استخدام أي أداة أخرى للاستعلام عن قاعدة بيانات MySQL، مثل MySQL Workbench.

ابدأ بتكوين قاعدة البيانات للعمل مع ميزة اتصال قاعدة بيانات Azure Static Web Apps.

تكوين اتصال قاعدة البيانات

يجب أن يكون لدى Azure Static Web Apps حق الوصول إلى الشبكة إلى قاعدة البيانات الخاصة بك حتى تعمل اتصالات قاعدة البيانات. بالإضافة إلى ذلك، لاستخدام قاعدة بيانات Azure للتطوير المحلي، تحتاج إلى تكوين قاعدة البيانات الخاصة بك للسماح بالطلبات من عنوان IP الخاص بك.

انتقل إلى Azure Database for MySQL Server Flexible Server في مدخل Microsoft Azure.
ضمن قسم الإعدادات، حدد Networking.
ضمن قسم Firewall rules ، حدد الزر Add your current client IP address . تضمن هذه الخطوة أنه يمكنك استخدام قاعدة البيانات هذه للتطوير المحلي.
ضمن قسم Firewall rules، حدد خانة الاختيار Allow public access from any Azure service within Azure to this server. تضمن هذه الخطوة أن مورد Static Web Apps المنشور يمكنه الوصول إلى قاعدة البيانات الخاصة بك.
حدد حفظ.

الحصول على سلسلة الاتصال قاعدة البيانات للتطوير المحلي

لاستخدام قاعدة بيانات Azure الخاصة بك للتطوير المحلي، تحتاج إلى استرداد سلسلة الاتصال قاعدة البيانات الخاصة بك. يمكنك تخطي هذه الخطوة إذا كنت تخطط لاستخدام قاعدة بيانات محلية لأغراض التطوير.

انتقل إلى Azure Database for MySQL Server Flexible Server في مدخل Microsoft Azure.
ضمن قسم الإعدادات، حدد الاتصال.
في الاتصال من قسم التطبيق، حدد ADO.NET سلسلة الاتصال وضعها جانبا في محرر نصوص.
استبدل {your_password} العنصر النائب في سلسلة الاتصال بكلمة المرور الخاصة بك.
استبدل {your_database} العنصر النائب باسم MyTestPersonDatabaseقاعدة البيانات . ستقوم بإنشاء MyTestPersonDatabase في الخطوات القادمة.
احذف قسمي SslMode وSslCa في سلسلة الاتصال حيث تتطلب هذه الخطوات الإضافية وهي مخصصة لأغراض الإنتاج.

إنشاء بيانات العينة

إنشاء نموذج جدول وزرعه مع نموذج البيانات لمطابقة البرنامج التعليمي. هنا، يمكنك استخدام Azure Data Studio، ولكن يمكنك استخدام MySQL Workbench أو أي أداة أخرى.

في Azure Data Studio، أنشئ اتصالا بخادم Azure MySQL المرن.
انقر بزر الماوس الأيمن فوق الخادم الخاص بك، وأنشئ قاعدة بيانات جديدة. أدخل MyTestPersonDatabase كاسم قاعدة البيانات، وحدد charset ليكون utf8mb4 و ترتيب utf8mb4_0900_ai_ci.
انقر بزر الماوس الأيمن فوق الخادم وحدد تحديث.
انقر بزر الماوس الأيمن فوق MyTestPersonDatabase قاعدة البيانات وحدد استعلام جديد. قم بتشغيل البرنامج النصي التالي لإنشاء جدول جديد باسم MyTestPersonTable.
```
CREATE TABLE MyTestPersonTable (
    Id INT AUTO_INCREMENT NOT NULL,
    Name VARCHAR(25) NULL,
    PRIMARY KEY (Id)
);
```
قم بتشغيل البرنامج النصي التالي لإضافة بيانات إلى MyTestPersonTable الجدول.
```
INSERT INTO MyTestPersonTable (Name)
VALUES ('Sunny');

INSERT INTO MyTestPersonTable (Name)
VALUES ('Dheeraj');
```
انقر بزر الماوس الأيمن فوق MyTestPersonTable الجدول وحدد تحديد أعلى 1000 للتحقق من وجود بيانات في قاعدة البيانات.

تكوين تطبيق الويب الثابت

يركز الجزء المتبقي من هذا البرنامج التعليمي على تحرير التعليمات البرمجية المصدر لتطبيق الويب الثابت للاستفادة من اتصالات قاعدة البيانات محليا.

هام

تفترض الخطوات التالية أنك تعمل مع تطبيق الويب الثابت الذي تم إنشاؤه في دليل البدء. إذا كنت تستخدم مشروعا مختلفا، فتأكد من ضبط أوامر git التالية لمطابقة أسماء الفروع.

قم بالتبديل إلى ⁧⁧main⁩⁩ الفرع.
- Bash
- PowerShell
```
git checkout main
```
```
git checkout main
```
مزامنة الإصدار المحلي الخاص بك مع ما هو موجود على GitHub باستخدام git pull.
- Bash
- PowerShell
```
git pull origin main
```
```
git pull origin main
```

إنشاء ملف تكوين قاعدة البيانات

بعد ذلك، قم بإنشاء ملف التكوين الذي يستخدمه تطبيق الويب الثابت الخاص بك للواجهة مع قاعدة البيانات.

افتح المحطة الطرفية الخاصة بك وأنشئ متغيرا جديدا للاحتفاظ سلسلة الاتصال. قد يختلف بناء الجملة المحدد استنادا إلى نوع shell الذي تستخدمه.
- Bash
- PowerShell
```
export DATABASE_CONNECTION_STRING='<YOUR_CONNECTION_STRING>'
```
```
$env:DATABASE_CONNECTION_STRING='<YOUR_CONNECTION_STRING>'
```
تأكد من استبدال <YOUR_CONNECTION_STRING> بقيمة سلسلة الاتصالات التي وضعتها جانبا في محرر نص.
استخدم npm لتثبيت أو تحديث Static Web Apps CLI. حدد الأمر الأفضل لموقفك.

للتنزيل، استخدم npm install.
- Bash
- PowerShell
```
npm install -g @azure/static-web-apps-cli
```
```
npm install -g @azure/static-web-apps-cli
```
للتحديث، استخدم npm update.
- Bash
- PowerShell
```
npm update
```
```
npm update
```
swa db init استخدم الأمر لإنشاء ملف تكوين قاعدة بيانات.
- Bash
- PowerShell
```
swa db init --database-type mysql
```
```
swa db init --database-type mysql
```
init يقوم الأمر بإنشاء الملف staticwebapp.database.config.json في مجلد swa-db-connections.
الصق في هذه العينة في ملف 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.

الميزة	الشرح
اتصال قاعدة البيانات	في التطوير، يقرأ وقت التشغيل سلسلة الاتصال من قيمة سلسلة الاتصال في ملف التكوين. بينما يمكنك تحديد سلسلة الاتصال مباشرة في ملف التكوين، فإن أفضل الممارسات هي تخزين سلسلة الاتصال في متغير بيئة محلية. يمكنك الرجوع إلى قيم متغير البيئة في ملف التكوين عبر التعليمة البرمجية `@env('DATABASE_CONNECTION_STRING')` . تتم الكتابة فوق قيمة سلسلة الاتصال بواسطة Static Web Apps للموقع المنشور بالمعلومات التي تم جمعها عند توصيل قاعدة البيانات.
نقطة نهاية واجهة برمجة التطبيقات	تتوفر نقطة نهاية REST عبر `/data-api/rest` بينما تتوفر نقطة نهاية GraphQL من خلال `/data-api/graphql` كما تم تكوينها في ملف التكوين هذا. يمكنك تكوين مسارات REST وGraphQL، ولكن البادئة `/data-api` غير قابلة للتكوين.
أمان واجهة برمجة التطبيقات	`runtime.host.cors` تسمح لك الإعدادات بتعريف الأصول المسموح بها التي يمكنها تقديم طلبات إلى واجهة برمجة التطبيقات. في هذه الحالة، يعكس التكوين بيئة تطوير ويسمح بالموقع http://localhost:4280 .
نموذج الكيان	تعريف الكيانات المكشوفة عبر المسارات في واجهة برمجة تطبيقات REST، أو كالأنواع في مخطط GraphQL. في هذه الحالة، اسم الشخص، هو الاسم المكشوف لنقطة النهاية بينما `entities.<NAME>.source` هو مخطط قاعدة البيانات وتعيين الجدول. لاحظ كيف لا يلزم أن يكون اسم نقطة نهاية واجهة برمجة التطبيقات مطابقا لاسم الجدول.
أمان الكيان	تتحكم قواعد الأذونات المدرجة في `entity.<NAME>.permissions` الصفيف في إعدادات التخويل للكيان. يمكنك تأمين كيان بأدوار بنفس الطريقة التي تؤمن بها المسارات بالأدوار.

إشعار

تتم الكتابة فوق خصائص ملف connection-stringhost.modeالتكوين و و graphql.allow-introspection عند نشر موقعك. تتم الكتابة فوق سلسلة الاتصال بتفاصيل المصادقة التي تم جمعها عند توصيل قاعدة البيانات بمورد Static Web Apps. host.mode تم تعيين الخاصية إلى production، ويتم graphql.allow-introspection تعيين إلى false. توفر هذه التجاوزات التناسق في ملفات التكوين الخاصة بك عبر أحمال عمل التطوير والإنتاج، بينما يضمن أن مورد Static Web Apps مع تمكين اتصالات قاعدة البيانات آمن وجاهز للإنتاج.

مع تكوين تطبيق الويب الثابت للاتصال بقاعدة البيانات، يمكنك الآن التحقق من الاتصال.

تحديث الصفحة الرئيسية

استبدل العلامات بين العلامات body في ملف index.html ب 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> تقبل POST GETPUTنقطة النهاية طلبات و و DELETE لمعالجة البيانات في قاعدة البيانات.

http://localhost:4280/data-api/graphql تقبل نقطة النهاية استعلامات وطفرات GraphQL.

معالجة البيانات

توضح الأوامر التالية غير المحدد إطار العمل كيفية القيام بعمليات CRUD كاملة على قاعدة البيانات الخاصة بك.

يظهر الإخراج لكل وظيفة في نافذة وحدة تحكم المستعرض.

افتح أدوات المطور بالضغط على CMD/CTRL + SHIFT + I وحدد علامة التبويب وحدة التحكم.

سرد كافة العناصر

أضف التعليمات البرمجية التالية بين العلامات script في index.html.

async function list() {
  const endpoint = '/data-api/rest/Person';
  const response = await fetch(endpoint);
  const data = await response.json();
  console.table(data.value);
}

في هذا المثال:

يستخدم الطلب الافتراضي لواجهة fetch برمجة التطبيقات الفعل 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 .

قم بتحديث الصفحة وحدد الزر قائمة .

تعرض نافذة وحدة تحكم المستعرض الآن جدولا يسرد جميع السجلات في قاعدة البيانات.

البطاقة/ رقم البطاقة	الاسم
1	مشمس
2	دهراج

فيما يلي لقطة شاشة لما يجب أن تبدو عليه في المستعرض.

Web browser showing results from a database selection in the developer tools console window.

الحصول على حسب المعرف

أضف التعليمات البرمجية التالية بين العلامات script في index.html.

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.
يتم إلحاق قيمة المعرف بنهاية موقع نقطة النهاية.
يتم العثور على البيانات في حمولة الاستجابة في الخاصية 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 .

قم بتحديث الصفحة وحدد الزر Get .

تعرض نافذة وحدة تحكم المستعرض الآن جدولا يسرد السجل الفردي المطلوب من قاعدة البيانات.

البطاقة/ رقم البطاقة	الاسم
1	مشمس

‏‏تحديث

أضف التعليمات البرمجية التالية بين العلامات script في index.html.

تدعم تطبيقات الويب الثابتة كلا من 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/.
يتم إلحاق قيمة المعرف بنهاية موقع نقطة النهاية.
فعل 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 يحتفظ الكائن باستعلام GraphQL في الخاصية query .
يتم تمرير قيم الوسيطة إلى الدالة GraphQL عبر الخاصية query.variables .
يتطلب الطلب الذي تم تمريره إلى الخادم حمولة حيث تحتوي الخاصية query على تعريف الاستعلام.
يتم العثور على البيانات في حمولة الاستجابة في الخاصية data.updatePerson .

قم بتحديث الصفحة وحدد الزر تحديث .

تعرض نافذة وحدة تحكم المستعرض الآن جدولا يعرض البيانات المحدثة.

البطاقة/ رقم البطاقة	الاسم
1	مولي

إنشاء

أضف التعليمات البرمجية التالية بين العلامات script في index.html.

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 يحتفظ الكائن باستعلام GraphQL في الخاصية query .
يتم تمرير قيم الوسيطة إلى الدالة GraphQL عبر الخاصية query.variables .
يتطلب الطلب الذي تم تمريره إلى الخادم حمولة حيث تحتوي الخاصية query على تعريف الاستعلام.
يتم العثور على البيانات في حمولة الاستجابة في الخاصية data.updatePerson .

قم بتحديث الصفحة وحدد الزر إنشاء .

تعرض نافذة وحدة تحكم المستعرض الآن جدولا يعرض السجل الجديد في قاعدة البيانات.

البطاقة/ رقم البطاقة	الاسم
3	بيدرو

حذف

أضف التعليمات البرمجية التالية بين العلامات script في index.html.

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/.
يتم إلحاق قيمة المعرف بنهاية موقع نقطة النهاية.
فعل 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 }`);
}

في هذا المثال:

يحدد Id استعلام GraphQL الحقل من قاعدة البيانات.
query يحتفظ الكائن باستعلام GraphQL في الخاصية query .
يتم تمرير قيم الوسيطة إلى الدالة GraphQL عبر الخاصية query.variables .
يتطلب الطلب الذي تم تمريره إلى الخادم حمولة حيث تحتوي الخاصية query على تعريف الاستعلام.
يتم العثور على البيانات في حمولة الاستجابة في الخاصية data.deletePerson .

قم بتحديث الصفحة وحدد الزر حذف .

تعرض نافذة وحدة تحكم المستعرض الآن جدولا يعرض الاستجابة من طلب الحذف.

تم حذف السجل: 3

الآن بعد أن عملت مع موقعك محليا، يمكنك الآن نشره على Azure.

نشر موقعك

لنشر هذا الموقع للإنتاج، تحتاج فقط إلى تثبيت ملف التكوين ودفع التغييرات إلى الخادم.

أضف تغييرات الملف لتعقبها.
```
git add .
```

تنفيذ تغييرات التكوين.

git commit -am "Add database configuration"

ادفع التغييرات إلى الخادم.
```
git push origin main
```

الاتصال قاعدة البيانات إلى تطبيق الويب الثابت

استخدم الخطوات التالية لإنشاء اتصال بين مثيل Static Web Apps لموقعك وقاعدة البيانات الخاصة بك.

افتح تطبيق الويب الثابت في مدخل Microsoft Azure.
في قسم الإعدادات، حدد اتصال قاعدة البيانات.
ضمن قسم Production ، حدد رابط Link existing database .

في نافذة ربط قاعدة البيانات الموجودة، أدخل القيم التالية:

الخاصية	القيمة
نوع قاعدة البيانات	حدد نوع قاعدة البيانات من القائمة المنسدلة.
الوصف	حدد اشتراك Azure من القائمة المنسدلة.
اسم المورد	حدد اسم خادم قاعدة البيانات الذي يحتوي على قاعدة البيانات المطلوبة.
اسم قاعدة البيانات	حدد اسم قاعدة البيانات التي تريد ربطها بتطبيق الويب الثابت.
نوع المصادقة	حدد الاتصال سلسلة، وأدخل اسم مستخدم MySQL وكلمة المرور.

حدد موافق.

تحقق من أن قاعدة البيانات متصلة بمورد Static Web Apps

بمجرد توصيل قاعدة البيانات بتطبيق الويب الثابت وانتهاء إنشاء الموقع، استخدم الخطوات التالية للتحقق من اتصال قاعدة البيانات.

افتح تطبيق الويب الثابت في مدخل Microsoft Azure.
في قسم Essentials ، حدد عنوان URL لمورد Static Web Apps للانتقال إلى تطبيق الويب الثابت.
حدد الزر قائمة لسرد كافة العناصر.

يجب أن يشبه الإخراج ما هو موضح في لقطة الشاشة هذه.

تنظيف الموارد

إذا كنت ترغب في إزالة الموارد التي تم إنشاؤها أثناء هذا البرنامج التعليمي، تحتاج إلى إلغاء ربط قاعدة البيانات وإزالة نموذج البيانات.

إلغاء ربط قاعدة البيانات: افتح تطبيق الويب الثابت في مدخل Microsoft Azure. ضمن قسم الإعدادات، حدد اتصال قاعدة البيانات. بجوار قاعدة البيانات المرتبطة، حدد عرض التفاصيل. في نافذة تفاصيل اتصال قاعدة البيانات، حدد الزر إلغاء الارتباط .
إزالة بيانات العينة: في قاعدة البيانات الخاصة بك، احذف الجدول المسمى MyTestPersonTable.

الخطوات التالية

إضافة واجهة برمجة تطبيقات

الملاحظات

هل كانت هذه الصفحة مفيدة؟

Last updated on 2023-03-16

مشاركة عبر

البرنامج التعليمي: إضافة اتصال قاعدة بيانات MySQL في Azure Static Web Apps (معاينة)

المتطلبات الأساسية

تكوين اتصال قاعدة البيانات

الحصول على سلسلة الاتصال قاعدة البيانات للتطوير المحلي

إنشاء بيانات العينة

تكوين تطبيق الويب الثابت

إنشاء ملف تكوين قاعدة البيانات

تحديث الصفحة الرئيسية

بدء تشغيل التطبيق محليا

معالجة البيانات

سرد كافة العناصر

الحصول على حسب المعرف

‏‏تحديث

إنشاء

حذف

نشر موقعك

الاتصال قاعدة البيانات إلى تطبيق الويب الثابت

تحقق من أن قاعدة البيانات متصلة بمورد Static Web Apps

تنظيف الموارد

الخطوات التالية

الملاحظات

الموارد الإضافية