Rövid útmutató: Az első statikus webalkalmazás létrehozása

Az Azure Static Web Apps egy Azure DevOps- vagy GitHub-adattárból származó alkalmazások létrehozásával tesz közzé webhelyet egy éles környezetben. Ebben a rövid útmutatóban egy webalkalmazást helyez üzembe az Azure Static Web Appsben az Azure Portal használatával.

Előfeltételek

• Ha nem rendelkezik Azure-előfizetéssel, hozzon létre egy ingyenes próbaverziós fiókot.
• GitHub-fiók

• Ha nem rendelkezik Azure-előfizetéssel, hozzon létre egy ingyenes próbaverziós fiókot.
• Azure DevOps-szervezet

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 tartalmaz egy kezdőalkalmazást, amely üzembe helyezhető az Azure Static Web Appsben.

Nincs keretrendszer

1. Új adattár létrehozásához lépjen a következő helyre:
   1. https://github.com/staticwebdev/vanilla-basic/generate
2. Az adattár elnevezése a saját első-static-web-appomnak

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.

Angular

1. Új adattár létrehozásához lépjen a következő helyre:
   1. https://github.com/staticwebdev/angular-basic/generate
2. Az adattár elnevezése a saját első-static-web-appomnak

Blazor

1. Új adattár létrehozásához lépjen a következő helyre:
   1. https://github.com/staticwebdev/blazor-basic/generate
2. Az adattár elnevezése a saját első-static-web-appomnak

React

1. Új adattár létrehozásához lépjen a következő helyre:
   1. https://github.com/staticwebdev/react-basic/generate
2. Az adattár elnevezése a saját első-static-web-appomnak

Vue

1. Új adattár létrehozásához lépjen a következő helyre:
   1. https://github.com/staticwebdev/vue-basic/generate
2. Az adattár elnevezése a saját első-static-web-appomnak

Válassza a Create repository (Adattár létrehozása) gombot.

Adattár létrehozása

Ez a cikk egy Azure DevOps-adattárat használ, hogy megkönnyítse az első lépéseket. Az adattár az Azure Static Web Apps használatával történő üzembe helyezéshez használt kezdőalkalmazást tartalmazza.

1. Jelentkezzen be az Azure DevOpsba.

2. Válassza az Új adattár lehetőséget.

3. Az Új projekt létrehozása ablakban bontsa ki a Speciális menüt, és végezze el a következő beállításokat:

   Beállítás	Value
   Project	Adja meg az első web-static-appot.
   Látótávolság	Válassza a Privát lehetőséget.
   Verziókövetés	Válassza a Git lehetőséget.
   Munkaelem-folyamat	Válassza ki a fejlesztési módszereknek leginkább megfelelő lehetőséget.

4. Select Create.

5. Válassza az Adattár menüelemet.

6. Válassza a Fájlok menüelemet.

7. Az Adattár importálása kártya alatt válassza az Importálás lehetőséget.

8. Másolja ki a választott keretrendszer adattárÁNAK URL-címét, és illessze be a Klónozás URL-cím mezőbe.

   Nincs keretrendszer

   https://github.com/staticwebdev/vanilla-basic.git

   Angular

   https://github.com/staticwebdev/angular-basic.git

   Blazor

   https://github.com/staticwebdev/blazor-basic.git

   React

   https://github.com/staticwebdev/react-basic.git

   Vue

   https://github.com/staticwebdev/vue-basic.git

9. Válassza az Importálás lehetőséget, és várja meg, amíg az importálási folyamat befejeződik.

Statikus webalkalmazás létrehozása

Az adattár létrehozása után létrehozhat egy statikus webalkalmazást az Azure Portalon.

1. Nyissa meg az Azure Portalt.
2. Válassza az Erőforrás létrehozása lehetőséget.
3. Statikus webalkalmazások keresése.
4. Válassza a Static Web Apps elemet.
5. Select Create.

Az Alapszintű szakaszban először konfigurálja az új alkalmazást, és csatolja egy GitHub-adattárhoz.

Beállítás	Value
Subscription	Válassza ki az Azure-előfizetését.
Erőforráscsoport	Válassza az Új hivatkozás létrehozása lehetőséget, és írja be a static-web-apps-test kifejezést a szövegmezőbe.
Name	Írja be a my-first-static-web-appot a szövegmezőbe.
Csomag típusa	Válassza az Ingyenes lehetőséget.
Az Azure Functions és az előkészítés részletei	Válasszon ki egy Önhöz legközelebbi régiót.
Source	Válassza a GitHub lehetőséget.

Válassza a Bejelentkezés a GitHubbal lehetőséget, és hitelesítés a GitHubbal.

Miután bejelentkezett a GitHubbal, adja meg az adattár adatait.

Beállítás	Value
Szervezet	Válassza ki a szervezetet.
Adattár	Válassza ki az első web-static-appot.
Ág	Válassza a <branch_name>.

Megjegyzés:

Ha nem lát adattárakat:

• Előfordulhat, hogy engedélyeznie kell az Azure Static Web Appst a GitHubon. Keresse meg a GitHub-profilját, és nyissa meg Gépház > Alkalmazások > engedélyezett OAuth-alkalmazásait, válassza az Azure Static Web Apps lehetőséget, majd válassza a Grant lehetőséget.
• Előfordulhat, hogy engedélyeznie kell az Azure Static Web Appst az Azure DevOps-szervezetben. Az engedélyek megadásához a szervezet tulajdonosának kell lennie. Külső alkalmazáshozzáférés kérése az OAuthon keresztül. További információ: REST API-k hozzáférésének engedélyezése az OAuth 2.0-val.

Az Alapok szakaszban először konfigurálja az új alkalmazást, és csatolja egy Azure DevOps-adattárhoz.

Beállítás	Value
Subscription	Válassza ki az Azure-előfizetését.
Erőforráscsoport	Válassza az Új hivatkozás létrehozása lehetőséget, és írja be a static-web-apps-test kifejezést a szövegmezőbe.
Name	Írja be a my-first-static-web-appot a szövegmezőbe.
Csomag típusa	Válassza az Ingyenes lehetőséget.
Az Azure Functions és az előkészítés részletei	Válasszon ki egy Önhöz legközelebbi régiót.
Source	Válassza a DevOps lehetőséget.
Szervezet	Válassza ki a szervezetet.
Project	Válassza ki a projektet.
Adattár	Válassza ki az első web-static-appot.
Ág	Válassza a <branch_name>.

Megjegyzés:

Győződjön meg arról, hogy a használt ág nem védett, és hogy rendelkezik-e megfelelő engedélyekkel a push parancsok kiadásához. Az ellenőrzéshez keresse meg a DevOps-adattárat, és lépjen az Adattárak –>Ágak lapra, és válassza a További lehetőségek lehetőséget. Ezután válassza ki az ágat, majd a fiókszabályzatokat , hogy a szükséges szabályzatok ne legyenek engedélyezve.

A Build Details (Összeállítás részletei) szakaszban adja hozzá az előnyben részesített előtér-keretrendszerre vonatkozó konfigurációs adatokat.

Nincs keretrendszer

1. Válassza az Egyéni lehetőséget a Build Presets legördülő listából.
2. Írja be a ./src kifejezést az Alkalmazás helye mezőbe.
3. Hagyja üresen az Api-hely mezőt.
4. Írja be az ./srcalkalmazásösszetevő helyének mezőjét.

Angular

1. Válassza az Angular lehetőséget a Build Presets legördülő listából .
2. Tartsa meg az alapértelmezett értéket az Alkalmazás helye mezőben.
3. Hagyja üresen az Api-hely mezőt.
4. Írja be a dist/angular-basic kifejezést az Alkalmazásösszetevő helye mezőbe.

Blazor

1. Válassza a Blazort a Build Presets legördülő listából.
2. Tartsa meg az ügyfél alapértelmezett értékét az Alkalmazás helye mezőben.
3. Hagyja üresen az Api-hely mezőt.
4. Tartsa meg a wwwroot alapértelmezett értékét az Alkalmazásösszetevő helye mezőben.

React

1. Válassza a React lehetőséget a Build Presets legördülő listából.
2. Tartsa meg az alapértelmezett értéket az Alkalmazás helye mezőben.
3. Hagyja üresen az Api-hely mezőt.
4. Írja be a buildet az Alkalmazásösszetevő helye mezőbe.

Vue

1. Válassza ki a Vue.js elemet a BuildElőkészletek legördülő listából.
2. Tartsa meg az alapértelmezett értéket az Alkalmazás helye mezőben.
3. Hagyja üresen az Api-hely mezőt.
4. Tartsa meg az alapértelmezett értéket az Alkalmazásösszetevő helye mezőben.

Select Review + create.

Megjegyzés:

Az alkalmazás létrehozása után szerkesztheti a munkafolyamat-fájlt az értékek módosításához.

Select Create.

Válassza az Erőforrás megnyitása lehetőséget.

A webhely megtekintése

A statikus alkalmazások üzembe helyezésének két aspektusa van. Az első létrehozza az alkalmazást alkotó mögöttes Azure-erőforrásokat. A második egy munkafolyamat, amely létrehozza és közzéteszi az alkalmazást.

Mielőtt megnyithatja az új statikus helyet, az üzembe helyezési buildnek először futnia kell.

A Static Web Apps Overview (Statikus webalkalmazások áttekintése ) ablak hivatkozássorozatot jelenít meg, amelyek segítenek a webalkalmazással való interakcióban.

1. A megjelenő szalagcímre kattintva a GitHub Actions-futtatások állapotának ellenőrzéséhez válassza ki az adattáron futó GitHub Actions-műveleteket. Ha meggyőződik arról, hogy az üzembe helyezési feladat befejeződött, a létrehozott URL-címen keresztül megnyithatja a webhelyét.

2. A GitHub Actions munkafolyamatának befejezése után az URL-hivatkozást választva megnyithatja a webhelyet az új lapon.

A munkafolyamat befejezése után az URL-hivatkozásra kattintva megnyithatja a webhelyet az új lapon.

Clean up resources

Ha nem folytatja az alkalmazás használatát, az alábbi lépések végrehajtásával törölheti az Azure Static Web Apps-példányt:

1. Nyissa meg az Azure Portalt.
2. Keressen rá az első web-static-appomra a felső keresősávon.
3. Válassza ki az alkalmazás nevét.
4. Válassza a Törlés lehetőséget.
5. Válassza az Igen lehetőséget a törlési művelet megerősítéséhez (a művelet végrehajtása eltarthat néhány percig).

Következő lépések

API hozzáadása