Az Azure Static Web Apps buildkonfigurációja
Az Azure Static Web Apps buildkonfigurációját a GitHub Actions vagy az Azure Pipelines működteti. Minden hely rendelkezik egy YAML-konfigurációs fájllal, amely szabályozza a helyek létrehozásának és üzembe helyezésének módját. Ez a cikk a fájl felépítését és beállításait ismerteti.
Az alábbi táblázat az elérhető konfigurációs beállításokat sorolja fel.
Property | Leírás | Kötelező |
---|---|---|
app_location |
Ez a mappa tartalmazza az előtérbeli alkalmazás forráskódját. Az érték a GitHub adattárgyökéréhez és az Azure DevOps aktuális munkamappájához képest van. A használat során skip_app_build: true ez az érték az alkalmazás buildkimeneti helye. |
Igen |
api_location |
Ez a mappa tartalmazza az API-alkalmazás forráskódját. Az érték a GitHub adattárgyökéréhez és az Azure DevOps aktuális munkamappájához képest van. A használat során skip_api_build: true ez az érték az API buildkimeneti helye. |
Nem |
output_location |
Ha a webalkalmazás buildelési lépést futtat, a kimeneti hely az a mappa, ahol a nyilvános fájlok létrejönnek. A legtöbb projekt esetében a output_location app_location . A .NET-projektek esetében azonban a hely a közzétételi kimeneti mappához képest van. |
Nem |
app_build_command |
A Node.js-alkalmazásokhoz megadhat egy egyéni parancsot a statikus tartalomalkalmazás létrehozásához. Ha például éles buildet szeretne konfigurálni egy Angular-alkalmazáshoz, hozzon létre egy npm-szkriptet, amely az egyéni parancsként való futtatásra ng build --prod és beírásra npm run build-prod szolgálbuild-prod . Ha üresen marad, a munkafolyamat megpróbálja futtatni a npm run build parancsokat.npm run build:azure |
Nem |
api_build_command |
A Node.js-alkalmazásokhoz megadhat egy egyéni parancsot az Azure Functions API-alkalmazás létrehozásához. | Nem |
skip_app_build |
Állítsa be az értéket úgy, hogy true kihagyja az előtér-alkalmazás készítését. |
Nem |
skip_api_build |
Állítsa be az értéket úgy, hogy true hagyja ki az API-függvények készítését. |
Nem |
cwd (csak Azure Pipelines) |
A munkamappa abszolút elérési útja. Alapértelmezett érték: $(System.DefaultWorkingDirectory) . |
Nem |
build_timeout_in_minutes |
Állítsa be ezt az értéket a build időtúllépésének testreszabásához. Alapértelmezett érték: 15 . |
Nem |
Ezekkel a beállításokkal beállíthatja a GitHub Actionst vagy az Azure Pipelinest , hogy folyamatos integrációt/folyamatos kézbesítést (CI/CD) futtasson a statikus webalkalmazáshoz.
Fájlnév és hely
A konfigurációs fájlt a GitHub hozza létre, és a .github/workflows mappában tárolja, a következő formátumban elnevezve: azure-static-web-apps-<RANDOM_NAME>.yml
.
Buildelési konfiguráció
Az alábbi mintakonfiguráció figyeli a módosítások adattárát. A véglegesítések leküldése az main
ágra történik, az alkalmazás a app_location
mappából jön létre, és a output_location
fájlokat a nyilvános weben kézbesítik. Emellett az API-mappában lévő alkalmazás a webhely api
elérési útja alatt érhető el.
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"
Ebben a konfigurációban:
- Az
main
ágat a véglegesítések figyelik. - A GitHub Actions-munkafolyamat akkor aktiválódik, ha az
main
ágon lekéréses kérelem van megnyitva, szinkronizálva, újra megnyitva vagy bezárva. - A
build_and_deploy_job
végrehajtás akkor történik, amikor leküldéses véglegesítést hajt végre, vagy lekéréses kérelmet nyit meg aon
tulajdonságban felsorolt ágon. - A
app_location
webalkalmazás forrásfájljait tartalmazó mappára mutatsrc
. Ha ezt az értéket az adattár gyökerére szeretné állítani, használja a következőt/
: . - A
api_location
hely API-végpontjaihoz tartozó Azure Functions-alkalmazást tartalmazó mappára mutatapi
. Ha ezt az értéket az adattár gyökerére szeretné állítani, használja a következőt/
: . - Az
output_location
alkalmazás forrásfájljainak végleges verzióját tartalmazó mappára mutatpublic
. Ehhez képestapp_location
. .NET-projektek esetén a hely a közzétételi kimeneti mappához viszonyítva van.
Ne módosítsa az Azure Static Web Apps által beállított értékeketrepo_token
action
azure_static_web_apps_api_token
.
Egyéni buildelési parancsok
A Node.js-alkalmazások esetében részletesen szabályozhatja, hogy milyen parancsok futnak az alkalmazás vagy az API buildelési folyamata során. Az alábbi példa bemutatja, hogyan definiálhatja a buildet a következő értékekkel app_build_command
: és api_build_command
.
Megjegyzés:
Jelenleg csak a Node.js-buildek definiálhatók app_build_command
és api_build_command
használhatók.
A Node.js-verzió megadásához használja a engines
fájlban lévő package.json
mezőt.
...
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'
Előtérbeli alkalmazás létrehozásának kihagyása
Ha az előtér-alkalmazás buildjének teljes körű vezérlésére van szüksége, megkerülheti az automatikus buildelést, és üzembe helyezheti az előző lépésben létrehozott alkalmazást.
Az előtérbeli alkalmazás létrehozásának kihagyása:
- Állítsa be
app_location
az üzembe helyezni kívánt fájlok helyét. - Set
skip_app_build
totrue
. - Állítsa be
output_location
üres sztringre (''
).
Megjegyzés:
Győződjön meg arról, hogy a staticwebapp.config.json
fájlt is átmásolta a kimeneti könyvtárba.
...
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
Az API létrehozásának kihagyása
Ha ki szeretné hagyni az API készítését, megkerülheti az automatikus buildelést, és üzembe helyezheti az előző lépésben létrehozott API-t.
Az API létrehozásának kihagyása:
- A staticwebapp.config.json fájlban állítsa be
apiRuntime
a megfelelő futtatókörnyezetet és verziót. Tekintse meg az Azure Static Web Apps konfigurálását a támogatott futtatókörnyezetek és verziók listájához.{ "platform": { "apiRuntime": "node:16" } }
- Set
skip_api_build
totrue
. - Állítsa az
api_location
üzembe helyezendő beépített API-alkalmazást tartalmazó mappára. Ez az elérési út a GitHub Actionsben éscwd
az Azure Pipelinesban található adattár gyökeréhez képest van.
...
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
Build időtúllépésének meghosszabbítása
Alapértelmezés szerint az alkalmazás- és API-buildek 15 percre korlátozódnak. A tulajdonság beállításával meghosszabbíthatja a build időtúllépését 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
Munkafolyamat futtatása üzembehelyezési titkos kulcsok nélkül
Néha szükség van arra, hogy a munkafolyamat továbbra is feldolgozható legyen, még akkor is, ha néhány titkos kulcs hiányzik. Állítsa be a SKIP_DEPLOY_ON_MISSING_SECRETS
környezeti változót úgy, hogy true
úgy konfigurálja a munkafolyamatot, hogy meghatározott titkos kulcsok nélkül haladjon tovább.
Ha engedélyezve van, ez a funkció lehetővé teszi a munkafolyamat folytatását a webhely tartalmának üzembe helyezése nélkül.
...
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
Környezeti változók
A build környezeti változóit a env
feladat konfigurációjának szakaszán keresztül állíthatja be.
...
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-támogatás
A monorepó egy olyan adattár, amely egynél több alkalmazás kódját tartalmazza. Alapértelmezés szerint a munkafolyamat nyomon követi az adattár összes fájlját, de a konfigurációt egyetlen alkalmazás megcélzásához módosíthatja.
Ha egy munkafolyamat-fájlt egyetlen alkalmazásra szeretne célozni, meg kell adnia az útvonalakat a szakaszokban és pull_request
a push
szakaszokban.
Monorepó beállításakor minden statikus alkalmazáskonfiguráció csak egyetlen alkalmazás fájljaira terjed ki. A különböző munkafolyamat-fájlok egymás mellett élnek az adattár .github/workflows mappájában.
├── .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
Az alábbi példa bemutatja, hogyan adhat hozzá csomópontot paths
egy push
azure-static-web-apps-purple-pond.yml nevű fájlhoz és pull_request
-szakaszokhoz.
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
Ebben a példában csak a következő fájlok módosításai aktiválnak új buildet:
- Az app1 mappában lévő fájlok
- Az api1 mappában lévő fájlok
- Az alkalmazás azure-static-web-apps-purple-pond.yml munkafolyamat-fájljának módosítása