Oktatóanyag: Azure Static Web Apps közzététele ARM-sablonnal
Ez a cikk bemutatja, hogyan helyezheti üzembe az Azure Static Web Appst egy Azure Resource Manager-sablon (ARM-sablon) használatával.
Eben az oktatóanyagban az alábbiakkal fog megismerkedni:
- ARM-sablon létrehozása az Azure Static Web Appshez
- Az ARM-sablon üzembe helyezése Azure Static Web App-példány létrehozásához
Előfeltételek
Aktív Azure-fiók: Ha nem rendelkezik ilyen fiókkal, ingyenesen létrehozhat egy fiókot.
GitHub-fiók: Ha nem rendelkezik ilyen fiókkal, ingyenesen létrehozhat egy GitHub-fiókot
ARM-sablonok szerkesztője: A sablonok áttekintéséhez és szerkesztéséhez JSON-szerkesztőre van szükség. Az Azure Resource Manager Tools bővítményt tartalmazó Visual Studio Code kiválóan alkalmas ARM-sablonok szerkesztésére. A Visual Studio Code telepítésére és konfigurálására vonatkozó utasításokért tekintse meg a Rövid útmutatót: ARM-sablonok létrehozása a Visual Studio Code-tal.
Azure CLI vagy Azure PowerShell: Az ARM-sablonok üzembe helyezéséhez parancssori eszközre van szükség. A telepítési utasításokért lásd:
Személyes hozzáférési jogkivonat létrehozása a GitHubban
Az ARM-sablon egyik paramétere, repositoryToken
amely lehetővé teszi, hogy az ARM üzembe helyezési folyamata a statikus hely forráskódját tartalmazó GitHub-adattárral működjön együtt.
A GitHub-fiókprofilban (a jobb felső sarokban) válassza a Gépház.
Válassza a Fejlesztői Gépház lehetőséget.
Válassza ki a személyes hozzáférési jogkivonatokat.
Válassza az Új jogkivonat létrehozása lehetőséget.
Adja meg a jogkivonat nevét a Név mezőben, például myfirstswadeployment.
Válassza ki a jogkivonat lejáratát, az alapértelmezett érték 30 nap.
Adja meg a következő hatóköröket: adattár, munkafolyamat, írás:csomagok
Válassza a Jogkivonat létrehozása lehetőséget.
Másolja ki a jogkivonat értékét, és illessze be egy szövegszerkesztőbe későbbi használatra.
Fontos
Győződjön meg arról, hogy másolja ezt a jogkivonatot, és tárolja biztonságos helyen. Érdemes lehet ezt a jogkivonatot az Azure Key Vaultban tárolni, és az ARM-sablonban elérni.
GitHub-adattár létrehozása
Ez a cikk egy GitHub-sablontárházat használ, hogy megkönnyítse az első lépéseket. A sablon az Azure Static Web Apps használatával történő üzembe helyezéshez használt kezdőalkalmazást tartalmaz.
Új adattár létrehozásához lépjen a következő helyre:
Az adattár neve myfirstswadeployment
Megjegyzés:
Az Azure Static Web Apps használatához legalább egy HTML-fájl szükséges egy webalkalmazás létrehozásához. Az ebben a lépésben létrehozott adattár egyetlen index.html fájlt tartalmaz.
Válassza a Create repository (Adattár létrehozása) gombot.
Az ARM-sablon létrehozása
Az előfeltételek teljesülése esetén a következő lépés az ARM üzembehelyezési sablonfájljának meghatározása.
Hozzon létre egy új mappát az ARM-sablonok tárolásához.
Hozzon létre egy új fájlt, és nevezze el azuredeploy.json néven.
Illessze be az alábbi ARM-sablonrészletet az azuredeploy.json fájlba.
{ "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentTemplate.json#", "contentVersion": "1.0.0.0", "parameters": { "name": { "type": "string" }, "location": { "type": "string" }, "sku": { "type": "string" }, "skucode": { "type": "string" }, "repositoryUrl": { "type": "string" }, "branch": { "type": "string" }, "repositoryToken": { "type": "securestring" }, "appLocation": { "type": "string" }, "apiLocation": { "type": "string" }, "appArtifactLocation": { "type": "string" }, "resourceTags": { "type": "object" }, "appSettings": { "type": "object" } }, "resources": [ { "apiVersion": "2021-01-15", "name": "[parameters('name')]", "type": "Microsoft.Web/staticSites", "location": "[parameters('location')]", "tags": "[parameters('resourceTags')]", "properties": { "repositoryUrl": "[parameters('repositoryUrl')]", "branch": "[parameters('branch')]", "repositoryToken": "[parameters('repositoryToken')]", "buildProperties": { "appLocation": "[parameters('appLocation')]", "apiLocation": "[parameters('apiLocation')]", "appArtifactLocation": "[parameters('appArtifactLocation')]" } }, "sku": { "Tier": "[parameters('sku')]", "Name": "[parameters('skuCode')]" }, "resources":[ { "apiVersion": "2021-01-15", "name": "appsettings", "type": "config", "location": "[parameters('location')]", "properties": "[parameters('appSettings')]", "dependsOn": [ "[resourceId('Microsoft.Web/staticSites', parameters('name'))]" ] } ] } ] }
Hozzon létre egy új fájlt, és nevezze el azuredeploy.parameters.json néven.
Illessze be a következő ARM-sablonrészletet az azuredeploy.parameters.json fájlba.
{ "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentParameters.json#", "contentVersion": "1.0.0.0", "parameters": { "name": { "value": "myfirstswadeployment" }, "location": { "value": "Central US" }, "sku": { "value": "Free" }, "skucode": { "value": "Free" }, "repositoryUrl": { "value": "https://github.com/<YOUR-GITHUB-USER-NAME>/<YOUR-GITHUB-REPOSITORY-NAME>" }, "branch": { "value": "main" }, "repositoryToken": { "value": "<YOUR-GITHUB-PAT>" }, "appLocation": { "value": "/" }, "apiLocation": { "value": "" }, "appArtifactLocation": { "value": "src" }, "resourceTags": { "value": { "Environment": "Development", "Project": "Testing SWA with ARM", "ApplicationName": "myfirstswadeployment" } }, "appSettings": { "value": { "MY_APP_SETTING1": "value 1", "MY_APP_SETTING2": "value 2" } } } }
Frissítse a következő paramétereket.
Parameter Várt érték repositoryUrl
Adja meg a Static Web Apps GitHub-adattár URL-címét. repositoryToken
Adja meg a GitHub PAT-jogkivonatot. Mentse a frissítéseket, mielőtt futtatja az üzembe helyezést a következő lépésben.
Az üzembe helyezés futtatása
A sablon üzembe helyezéséhez az Azure CLI vagy az Azure PowerShell szükséges.
Bejelentkezés az Azure-ba
Sablon üzembe helyezéséhez jelentkezzen be az Azure CLI-be vagy az Azure PowerShellbe.
az login
Ha több Azure-előfizetéssel rendelkezik, válassza ki a használni kívánt előfizetést. Cserélje le <SUBSCRIPTION-ID>
az előfizetés adatait:
az account set --subscription <SUBSCRIPTION-ID>
Erőforráscsoport létrehozása
Sablon üzembe helyezésekor meg kell adnia egy erőforráscsoportot, amely kapcsolódó erőforrásokat tartalmaz. Az üzembe helyezési parancs futtatása előtt hozza létre az erőforráscsoportot az Azure CLI-vel vagy az Azure PowerShell-lel.
Megjegyzés:
A cikkben szereplő CLI-példák a Bash-rendszerhéjhoz vannak megírva.
resourceGroupName="myfirstswadeployRG"
az group create \
--name $resourceGroupName \
--location "Central US"
Sablon üzembe helyezése
Használja az alábbi üzembehelyezési lehetőségek egyikét a sablon üzembe helyezéséhez.
az deployment group create \
--name DeployLocalTemplate \
--resource-group $resourceGroupName \
--template-file <PATH-TO-AZUREDEPLOY.JSON> \
--parameters <PATH-TO-AZUREDEPLOY.PARAMETERS.JSON> \
--verbose
Ha többet szeretne megtudni a sablonok Azure CLI-vel történő üzembe helyezéséről, tekintse meg az erőforrások ARM-sablonokkal és az Azure CLI-vel való üzembe helyezését ismertető témakört.
A webhely megtekintése
A statikus alkalmazások üzembe helyezésének két aspektusa van. Az első azokat a mögöttes Azure-erőforrásokat építi ki, amelyekből az alkalmazás áll. A második egy GitHub Actions-munkafolyamat, amely létrehozza és közzéteszi az alkalmazást.
Mielőtt az új statikus helyre navigálna, az üzembe helyezési buildnek először futnia kell.
A Static Web Apps áttekintő ablaka hivatkozássorozatot jelenít meg, amelyek segítenek a webalkalmazással való interakcióban.
A megjelenő szalagcímre kattintva ide kattintva ellenőrizheti a GitHub Actions-futtatások állapotát, és az adattáron futó GitHub-műveletekhez irányítja. Ha meggyőződik arról, hogy az üzembe helyezési feladat befejeződött, a létrehozott URL-címen keresztül navigálhat a webhelyére.
A GitHub Actions munkafolyamatának befejezése után az URL-hivatkozásra kattintva megnyithatja a webhelyet az új lapon.
Clean up resources
Törölje az üzembe helyezett erőforrásokat az erőforráscsoport törlésével.
- Az Azure Portalon válassza az Erőforráscsoport lehetőséget a bal oldali menüben.
- A Szűrés név alapján mezőben adja meg az erőforráscsoport nevét.
- Válassza ki az erőforráscsoport nevét.
- A felső menüben válassza az Erőforráscsoport törlése lehetőséget.