إضافة واجهة برمجة تطبيقات إلى تطبيقات الويب الثابتة ل Azure باستخدام وظائف Azure

مقالة
05/02/2022
قراءة خلال 5 دقائق

يمكنك إضافة واجهات برمجة تطبيقات بدون خادم إلى تطبيقات الويب الثابتة من Azure التي يتم تشغيلها بواسطة وظائف Azure. توضح هذه المقالة كيفية إضافة واجهة برمجة تطبيقات ونشرها إلى موقع Azure Static Web Apps.

ملاحظة

يتم تكوين الوظائف المتوفرة افتراضيا في تطبيقات الويب الثابتة مسبقا لتوفير نقاط نهاية آمنة لواجهة برمجة التطبيقات وتدعم فقط الوظائف التي يتم تشغيلها بواسطة HTTP. راجع دعم واجهة برمجة التطبيقات مع وظائف Azure للحصول على معلومات حول كيفية اختلافها عن تطبيقات وظائف Azure المستقلة.

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

إنشاء حساب في Azure ذي اشتراك نشط.
- إذا لم يكن لديك حساب، يمكنك إنشاء حساب مجانا.
تعليمة Visual Studio برمجية
ملحق Azure Static Web Apps for Visual Studio Code
ملحق وظائف Azure لرمز Visual Studio
Node.js لتشغيل تطبيق الواجهة الأمامية وواجهة برمجة التطبيقات

إنشاء تطبيق ويب ثابت

قبل إضافة واجهة برمجة تطبيقات، قم بإنشاء تطبيق واجهة أمامية ونشره في Azure Static Web Apps. استخدم تطبيقا موجودا قمت بنشره بالفعل أو قم بإنشاء واحد باتباع بدء التشغيل السريع لإنشاء أول موقع ثابت باستخدام Azure Static Web Apps .

في Visual Studio Code، افتح جذر مستودع التطبيق. تحتوي بنية المجلد على مصدر تطبيق الواجهة الأمامية وسير عمل GitHub تطبيقات الويب الثابتة في مجلد .github/workflows.

├── .github
│   └── workflows
│       └── azure-static-web-apps-<DEFAULT_HOSTNAME>.yml
│
└── (folders and files from your static web app)

إنشاء واجهة برمجة التطبيقات

يمكنك إنشاء مشروع Azure Functions لواجهة برمجة تطبيقات تطبيق الويب الثابت الخاص بك. بشكل افتراضي، يقوم ملحق التعليمات البرمجية Visual Studio لتطبيقات الويب الثابتة بإنشاء المشروع في مجلد باسم api في جذر المستودع.

اضغط على F1 لفتح لوح الأوامر.
حدد تطبيقات الويب الثابتة Azure: إنشاء وظيفة HTTP.... إذا تمت مطالبتك بتثبيت ملحق Azure Functions، فقم بتثبيته وإعادة تشغيل هذا الأمر.

عند المطالبة، أدخل القيم التالية:

المطالبة	القيمة
تحديد لغة	JavaScript
منح الدالة اسماً	رسالة

يتم إنشاء مشروع Azure Functions باستخدام دالة تشغيل HTTP. يحتوي تطبيقك الآن على بنية مشروع مشابهة للمثال التالي.

├── .github
│   └── workflows
│       └── azure-static-web-apps-<DEFAULT_HOSTNAME>.yml
│
├── api
│   ├── message
│   │   ├── function.json
│   │   └── index.js
│   ├── host.json
│   ├── local.settings.json
│   └── package.json
│
└── (folders and files from your static web app)

بعد ذلك، قم بتغيير الوظيفة message لإرجاع رسالة إلى الواجهة الأمامية. قم بتحديث الدالة في api/message/index.js باستخدام التعليمة البرمجية التالية.
```
module.exports = async function (context, req) {
    context.res.json({
        text: "Hello from the API"
    });
};
```

تلميح

يمكنك إضافة المزيد من وظائف واجهة برمجة التطبيقات عن طريق تشغيل الأمر Azure Static Web Apps: Create HTTP Function...

تحديث تطبيق الواجهة الأمامية للاتصال بواجهة برمجة التطبيقات

قم بتحديث تطبيق الواجهة الأمامية للاتصال بواجهة برمجة التطبيقات وعرض /api/message رسالة الاستجابة.

إذا استخدمت عمليات التشغيل السريع لإنشاء التطبيق، فاستخدم الإرشادات التالية لتطبيق التحديثات.

قم بتحديث محتوى ملف src/index.html باستخدام التعليمة البرمجية التالية لجلب النص من وظيفة واجهة برمجة التطبيقات وعرضه على الشاشة.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Vanilla JavaScript App</title>
</head>

<body>
    <main>
    <h1>Vanilla JavaScript App</h1>
    <p>Loading content from the API: <b id="name">...</b></p>
    </main>

    <script>
    (async function() {
        const { text } = await( await fetch(`/api/message`)).json();
        document.querySelector('#name').textContent = text;
    }())
    </script>
</body>

</html>

قم بتحديث محتوى src/app/app.module.ts باستخدام التعليمة البرمجية التالية لتمكينها HttpClient في تطبيقك.

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

قم بتحديث محتوى src/app/app.component.ts باستخدام التعليمة البرمجية التالية لجلب النص من وظيفة واجهة برمجة التطبيقات وعرضه على الشاشة.

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<div>{{message}}</div>`,
})
export class AppComponent {
  message = '';

  constructor(private http: HttpClient) {
    this.http.get('/api/message')
      .subscribe((resp: any) => this.message = resp.text);
  }
}

قم بتحديث محتوى src / App.js باستخدام التعليمة البرمجية التالية لجلب النص من وظيفة API وعرضه على الشاشة.

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState('');

  useEffect(() => {
    (async function () {
      const { text } = await( await fetch(`/api/message`)).json();
      setData(text);
    })();
  });

  return <div>{data}</div>;
}

export default App;

قم بتحديث محتوى src/App.vue بالتعليمة البرمجية التالية لجلب النص من وظيفة واجهة برمجة التطبيقات وعرضه على الشاشة.

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      message: ""
    };
  },
  async mounted() {
    const { text } = await (await fetch("/api/message")).json();
    this.message = text;
  }
};
</script>

تشغيل الواجهة الأمامية وواجهة برمجة التطبيقات محليا

لتشغيل تطبيق الواجهة الأمامية وواجهة برمجة التطبيقات معا محليا، توفر Azure Static Web Apps واجهة مستخدم CLI تحاكي البيئة السحابية. يستفيد CLI من الأدوات الأساسية لوظائف Azure لتشغيل واجهة برمجة التطبيقات.

تثبيت أدوات سطر الأوامر

تأكد من تثبيت أدوات سطر الأوامر الضرورية.

تثبيت Azure Static Web Apps CLI.

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

تثبيت Azure Functions Core Tools V3.

npm install -g azure-functions-core-tools@3

إنشاء تطبيق الواجهة الأمامية

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

ليست هناك حاجة لإنشاء التطبيق.

قم بإنشاء التطبيق في المجلد dist / angular-basic .

npm run build --prod

قم بإنشاء التطبيق في مجلد الإنشاء .

npm run build

قم بإنشاء التطبيق في مجلد dist .

npm run build

بدء تشغيل CLI

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

في جذر المستودع الخاص بك، ابدأ تشغيل CLI تطبيقات الويب الثابتة مع الأمر start . اضبط الوسيطات إذا كان تطبيقك يحتوي على بنية مجلد مختلفة.
قم بتمرير المجلد الحالي () ومجلد API (srcapi) إلى CLI.
```
swa start src --api-location api
```
قم بتمرير مجلد إخراج الإنشاء () ومجلد API (dist/angular-basicapi) إلى CLI.
```
swa start dist/angular-basic --api-location api
```
قم بتمرير مجلد إخراج الإنشاء () ومجلد API (buildapi) إلى CLI.
```
swa start build --api-location api
```
قم بتمرير مجلد إخراج الإنشاء () ومجلد API (distapi) إلى CLI.
```
swa start dist --api-location api
```
عند بدء عمليات CLI، يمكنك الوصول إلى تطبيقك على .http://localhost:4280/ لاحظ كيف تستدعي الصفحة واجهة برمجة التطبيقات وتعرض مخرجاتها ، Hello from the API.
لإيقاف CLI، اكتب Ctrl + C.

إضافة موقع واجهة برمجة التطبيقات إلى سير العمل

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

افتح سير العمل على .github/workflows/azure-static-web-apps-DEFAULT-HOSTNAME.yml<>.
ابحث عن الخاصية api_location واضبط القيمة على api.
احفظ الملف

نشر التغييرات

لنشر التغييرات على تطبيق الويب الثابت في Azure، قم بتنفيذ التعليمات البرمجية ودفعها إلى مستودع GitHub البعيد.

اضغط على F1 لفتح لوح الأوامر.
حدد الأمر Git: تنفيذ الكل .
عند مطالبتك برسالة التزام، أدخل إضافة واجهة برمجة تطبيقات ونفذ جميع التغييرات على مستودع git المحلي.
اضغط على F1 لفتح لوح الأوامر.
حدد الأمر Git: push .

يتم دفع التغييرات إلى المستودع البعيد في GitHub، مما يؤدي إلى تشغيل سير عمل "إجراءات GitHub تطبيقات الويب الثابتة" لإنشاء تطبيقك ونشره.
افتح المستودع الخاص بك في GitHub لمراقبة حالة تشغيل سير العمل.
عند اكتمال تشغيل سير العمل، انتقل إلى تطبيق الويب الثابت لعرض التغييرات.

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

تكوين إعدادات التطبيق