تكوين الإنشاء ل Azure Static Web Apps
يتم تشغيل تكوين إنشاء Azure Static Web Apps إما بواسطة GitHub Actions أو Azure Pipelines. يحتوي كل موقع على ملف تكوين YAML يتحكم في كيفية إنشاء موقع ونشره. تشرح هذه المقالة بنية الملف وخياراته.
يسرد الجدول التالي إعدادات التكوين المتوفرة.
الخاصية | الوصف | مطلوب |
---|---|---|
app_location |
يحتوي هذا المجلد على التعليمات البرمجية المصدر لتطبيق الواجهة الأمامية. القيمة نسبة إلى جذر المستودع في GitHub ومجلد العمل الحالي في Azure DevOps. عند استخدامها مع skip_app_build: true ، هذه القيمة هي موقع إخراج بناء التطبيق. |
نعم |
api_location |
هذا المجلد الذي يحتوي على التعليمات البرمجية المصدر لتطبيق API الخاص بك. القيمة نسبة إلى جذر المستودع في GitHub ومجلد العمل الحالي في Azure DevOps. عند استخدامها مع skip_api_build: true ، هذه القيمة هي موقع إخراج بناء واجهة برمجة التطبيقات. |
لا |
output_location |
إذا كان تطبيق الويب الخاص بك يقوم بتشغيل خطوة إنشاء، فإن موقع الإخراج هو المجلد الذي يتم فيه إنشاء الملفات العامة. بالنسبة لمعظم المشاريع، output_location تكون نسبة إلى app_location . ومع ذلك، بالنسبة لمشاريع .NET، يكون الموقع نسبة إلى مجلد إخراج النشر. |
لا |
app_build_command |
بالنسبة لتطبيقات Node.js، يمكنك تعريف أمر مخصص لإنشاء تطبيق المحتوى الثابت. على سبيل المثال، لتكوين بناء إنتاج لتطبيق Angular، قم بإنشاء برنامج نصي npm يسمى build-prod للتشغيل ng build --prod وإدخال npm run build-prod كأمر مخصص. إذا ترك فارغا، يحاول سير العمل تشغيل npm run build الأوامر أو npm run build:azure . |
لا |
api_build_command |
بالنسبة لتطبيقات Node.js، يمكنك تعريف أمر مخصص لإنشاء تطبيق Azure Functions API. | لا |
skip_app_build |
قم بتعيين القيمة إلى true لتخطي إنشاء تطبيق الواجهة الأمامية. |
لا |
skip_api_build |
قم بتعيين القيمة إلى true لتخطي إنشاء وظائف واجهة برمجة التطبيقات. |
لا |
cwd (Azure Pipelines فقط) |
المسار المطلق إلى مجلد العمل. الإعدادات الافتراضية لـ $(System.DefaultWorkingDirectory) . |
لا |
build_timeout_in_minutes |
قم بتعيين هذه القيمة لتخصيص مهلة البناء. الإعدادات الافتراضية لـ 15 . |
لا |
باستخدام هذه الإعدادات، يمكنك إعداد GitHub Actions أو Azure Pipelines لتشغيل التكامل المستمر/التسليم المستمر (CI/CD) لتطبيق الويب الثابت.
اسم الملف وموقعه
يتم إنشاء ملف التكوين بواسطة GitHub وتخزينه في المجلد .github/workflows ، المسمى باستخدام التنسيق التالي: azure-static-web-apps-<RANDOM_NAME>.yml
.
ضبط البنية
يراقب تكوين العينة التالي المستودع للتغييرات. عند دفع التثبيتات إلى main
الفرع، يتم إنشاء التطبيق من app_location
المجلد ويتم تقديم الملفات في output_location
إلى الويب العام. بالإضافة إلى ذلك، يتوفر التطبيق في مجلد api ضمن مسار الموقع api
.
name: Azure Static Web Apps CI/CD
on:
push:
branches:
- main
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- main
jobs:
build_and_deploy_job:
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
runs-on: ubuntu-latest
name: Build and Deploy Job
steps:
- uses: actions/checkout@v2
with:
submodules: true
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
action: "upload"
###### Repository/Build Configurations ######
app_location: "src" # App source code path relative to repository root
api_location: "api" # Api source code path relative to repository root - optional
output_location: "public" # Built app content directory, relative to app_location - optional
###### End of Repository/Build Configurations ######
close_pull_request_job:
if: github.event_name == 'pull_request' && github.event.action == 'closed'
runs-on: ubuntu-latest
name: Close Pull Request Job
steps:
- name: Close Pull Request
id: closepullrequest
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
action: "close"
في هذا التكوين:
main
تتم مراقبة الفرع للتثبيتات.- يتم تشغيل سير عمل إجراءات GitHub عندما يكون طلب السحب على
main
الفرع: مفتوحا أو متزامنا أو أعيد فتحه أو مغلقا. build_and_deploy_job
ينفذ عند دفع التثبيتات أو فتح طلب سحب مقابل الفرع المدرج في الخاصيةon
.app_location
يشير إلىsrc
المجلد الذي يحتوي على الملفات المصدر لتطبيق الويب. لتعيين هذه القيمة إلى جذر المستودع، استخدم/
.api_location
يشير إلىapi
المجلد الذي يحتوي على تطبيق Azure Functions لنقاط نهاية واجهة برمجة تطبيقات الموقع. لتعيين هذه القيمة إلى جذر المستودع، استخدم/
.output_location
يشير إلىpublic
المجلد الذي يحتوي على الإصدار النهائي من ملفات مصدر التطبيق. إنها نسبة إلىapp_location
. بالنسبة لمشاريع .NET، يكون الموقع نسبة إلى مجلد إخراج النشر.
لا تقم بتغيير قيم repo_token
و action
و azure_static_web_apps_api_token
كما تم تعيينها لك بواسطة Azure Static Web Apps.
أوامر الإنشاء المخصصة
بالنسبة لتطبيقات Node.js، يمكنك التحكم الدقيق في الأوامر التي يتم تشغيلها أثناء عملية إنشاء التطبيق أو واجهة برمجة التطبيقات. يوضح المثال التالي كيفية تعريف البنية بقيم ل app_build_command
و api_build_command
.
إشعار
حاليا، يمكنك فقط تعريف app_build_command
و api_build_command
لNode.js builds.
لتحديد إصدار Node.js، استخدم engines
الحقل في package.json
الملف.
...
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
repo_token: ${{ secrets.GITHUB_TOKEN }}
action: 'upload'
app_location: '/'
api_location: 'api'
output_location: 'dist'
app_build_command: 'npm run build-ui-prod'
api_build_command: 'npm run build-api-prod'
تخطي إنشاء تطبيق الواجهة الأمامية
إذا كنت بحاجة إلى التحكم الكامل في البنية لتطبيق الواجهة الأمامية، يمكنك تجاوز البنية التلقائية ونشر التطبيق المضمن في خطوة سابقة.
لتخطي إنشاء تطبيق الواجهة الأمامية:
- قم بتعيين
app_location
إلى الموقع الذي تريد نشر الملفات فيه. - عيّن
skip_app_build
إلىtrue
. - تعيين
output_location
إلى سلسلة فارغة (''
).
إشعار
تأكد من نسخ الملف الخاص بك staticwebapp.config.json
أيضا في دليل الإخراج .
...
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
repo_token: ${{ secrets.GITHUB_TOKEN }}
action: 'upload'
app_location: 'src/dist'
api_location: 'api'
output_location: ''
skip_app_build: true
تخطي إنشاء واجهة برمجة التطبيقات
إذا كنت ترغب في تخطي إنشاء واجهة برمجة التطبيقات، يمكنك تجاوز الإنشاء التلقائي ونشر واجهة برمجة التطبيقات المضمنة في خطوة سابقة.
خطوات لتخطي إنشاء واجهة برمجة التطبيقات:
- في الملف staticwebapp.config.json ، قم بتعيين
apiRuntime
إلى وقت التشغيل والإصدار الصحيحين. راجع تكوين Azure Static Web Apps للحصول على قائمة أوقات التشغيل والإصدارات المدعومة.{ "platform": { "apiRuntime": "node:16" } }
- عيّن
skip_api_build
إلىtrue
. - قم بتعيين
api_location
إلى المجلد الذي يحتوي على تطبيق API المضمن للنشر. هذا المسار نسبة إلى جذر المستودع في GitHub Actions وفيcwd
Azure Pipelines.
...
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
repo_token: ${{ secrets.GITHUB_TOKEN }}
action: 'upload'
app_location: "src" # App source code path relative to repository root
api_location: "api" # Api source code path relative to repository root - optional
output_location: "public" # Built app content directory, relative to app_location - optional
skip_api_build: true
تمديد مهلة الإنشاء
بشكل افتراضي، تقتصر إصدارات التطبيق وواجهة برمجة التطبيقات على 15 دقيقة. يمكنك تمديد مهلة الإنشاء عن طريق تعيين الخاصية build_timeout_in_minutes
.
...
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
repo_token: ${{ secrets.GITHUB_TOKEN }}
action: 'upload'
app_location: 'src'
api_location: 'api'
output_location: 'public'
build_timeout_in_minutes: 30
تشغيل سير العمل بدون أسرار النشر
في بعض الأحيان تحتاج إلى سير العمل الخاص بك لمتابعة المعالجة حتى عندما تكون بعض الأسرار مفقودة. SKIP_DEPLOY_ON_MISSING_SECRETS
قم بتعيين متغير البيئة إلى true
لتكوين سير العمل الخاص بك للمتابعة دون أسرار محددة.
عند التمكين، تسمح هذه الميزة لسير العمل بالمتابعة دون نشر محتوى الموقع.
...
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
repo_token: ${{ secrets.GITHUB_TOKEN }}
action: 'upload'
app_location: 'src'
api_location: 'api'
output_location: 'public'
env:
SKIP_DEPLOY_ON_MISSING_SECRETS: true
متغيرات البيئة
يمكنك تعيين متغيرات البيئة للبناء الخاص بك عبر env
قسم تكوين الوظيفة.
...
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
repo_token: ${{ secrets.GITHUB_TOKEN }}
action: 'upload'
app_location: 'src'
api_location: 'api'
output_location: 'public'
env: # Add environment variables here
HUGO_VERSION: 0.58.0
دعم Monorepo
monorepo هو مستودع يحتوي على تعليمات برمجية لأكثر من تطبيق واحد. بشكل افتراضي، يتعقب سير العمل جميع الملفات في مستودع، ولكن يمكنك ضبط التكوين لاستهداف تطبيق واحد.
لاستهداف ملف سير عمل إلى تطبيق واحد، يمكنك تحديد مسارات في push
المقطعين و pull_request
.
عند إعداد monorepo، يتم تحديد نطاق كل تكوين تطبيق ثابت إلى ملفات لتطبيق واحد فقط. ملفات سير العمل المختلفة مباشرة جنبا إلى جنب في مجلد .github/workflows الخاص بالمستودع.
├── .github
│ └── workflows
│ ├── azure-static-web-apps-purple-pond.yml
│ └── azure-static-web-apps-yellow-shoe.yml
│
├── app1 👉 controlled by: azure-static-web-apps-purple-pond.yml
├── app2 👉 controlled by: azure-static-web-apps-yellow-shoe.yml
│
├── api1 👉 controlled by: azure-static-web-apps-purple-pond.yml
├── api2 👉 controlled by: azure-static-web-apps-yellow-shoe.yml
│
└── README.md
يوضح المثال التالي كيفية إضافة عقدة paths
push
إلى قسمي و pull_request
من ملف يسمى azure-static-web-apps-purple-pond.yml.
on:
push:
branches:
- main
paths:
- app1/**
- api1/**
- .github/workflows/azure-static-web-apps-purple-pond.yml
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- main
paths:
- app1/**
- api1/**
- .github/workflows/azure-static-web-apps-purple-pond.yml
في هذا المثال، تقوم التغييرات التي تم إجراؤها على الملفات التالية فقط بتشغيل بنية جديدة:
- أي ملفات داخل مجلد app1
- أي ملفات داخل مجلد api1
- تغييرات على ملف سير عمل azure-static-web-apps-purple-pond.yml للتطبيق