Angular-alkalmazás üzembe helyezése az Azure Static Web Appsben

Ebből a cikkből megtudhatja, hogyan helyezhet üzembe egy Angular-alkalmazást az Azure Static Web Appsben az Azure Portal használatával.

Előfeltételek

Erőforrás Jegyzetek
Azure-előfizetés Ha nem rendelkezik Azure-előfizetéssel, hozzon létre egy ingyenes próbaverziós fiókot.
GitHub-fiók Ha nincs GitHub-fiókja, ingyenesen létrehozhat egyet.
Erőforrás Jegyzetek
Azure-előfizetés Ha nem rendelkezik Azure-előfizetéssel, hozzon létre egy ingyenes próbaverziós fiókot.
Azure DevOps-fiók Ha nincs GitHub-fiókja, létrehozhat egyet.

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.

  1. Új adattár létrehozásához lépjen a következő helyre:

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

  2. Az adattárt nevezze el így: my-first-static-web-app

  3. Válassza az Adattár létrehozása sablonból lehetőséget.

    Képernyőkép az adattár sablonból való létrehozásáról.

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 Érték
    Projekt Adja meg my-first-web-static-app.
    Láthatósá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. Válassza a Létrehozás lehetőséget.

  5. Válassza a Tárolók 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.

    https://github.com/staticwebdev/angular-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ás keresése.
  4. Válassza a Statikus webalkalmazás lehetőséget.
  5. Válassza a Létrehozás lehetőséget.

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

Képernyőkép az Azure Portal alapismeretek szakaszáról.

Beállítás Érték
Előfizetés 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.
Név Írja be a my-first-static-web-app-ot a szövegmezőbe.
Konstrukció típusa Válassza az Ingyenes lehetőséget.
Forrás Válassza a GitHubot , és szükség esetén jelentkezzen be a GitHubra.

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

Beállítás Érték
Szervezet Válassza ki a szervezetet.
Adattár Válassza ki my-first-web-static-app.
Branch Válassza ki a fő elemet.

Képernyőkép az adattár részleteiről az Azure Portalon.

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-adattárat, és nyissa meg a Beállításalkalmazá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 Érték
Előfizetés 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.
Név Írja be a my-first-static-web-app-ot a szövegmezőbe.
Konstrukció típusa Válassza az Ingyenes lehetőséget.
Forrás Válassza a DevOps lehetőséget.
Szervezet Válassza ki a szervezetet.
Projekt Válassza ki a projektet.
Adattár Válassza ki my-first-web-static-app.
Branch Válassza ki a fő elemet.

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. Következőként válassza ki az ágat, majd a fiókszabályzatokat, hogy biztosítsa, a nem kötelező szabályzatok nincsenek 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.

  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 parancsot a Kimeneti hely mezőbe.

Megjegyzés

Ha ezeket az utasításokat saját kóddal és Angular 17 vagy újabb verzióval használja, a kimeneti hely értékének /böngésző-re kell végződnie.

Válassza az Áttekintés + létrehozás lehetőséget.

Képernyőkép a létrehozás gombról.

Megjegyzés

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

Válassza a Létrehozás lehetőséget.

Képernyőkép a Létrehozás gombról.

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

Képernyőkép az Erőforrás megnyitása gombról.

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 elérheti az új statikus webhelyet, a telepítési buildnek előbb be kell fejeznie a futást.

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.

Képernyőkép az Azure Static Web Apps áttekintési ablakáról.

  1. A GitHub Action futások kiválasztása az Áttekintésben a GitHub Actions-re vezet, amelyek az adattáron futnak. A folytatás előtt ellenőrizze, hogy az üzembe helyezési művelet befejeződött-e.

  2. A GitHub Actions munkafolyamat 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.

Az erőforrások felfrissítése

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 az alkalmazáshoz

  • Last updated on