A React-alkalmazás üzembe helyezése Azure Static Web Apps szolgáltatásban

Ebből a cikkből megtudhatja, hogyan helyezhet üzembe Egy React-alkalmazást Azure Static Web Apps a Azure portál használatával.

Prerequisites

Resource Notes
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.
Resource Notes
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/react-basic/generate

  2. Nevezze el a my-first-static-web-app nevű repositoriumot.

  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 DevOps-ba.

  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:

    Setting Value
    Projekt Adja meg my-first-web-static-app.
    Láthatóság Válassza Privátlehető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 Create gombot.

  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/react-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 Create gombot.

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.

Setting Value
Subscription Válassza ki 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 my-first-static-web-app-ot a szövegmezőbe.
Konstrukció típusa Válassza az Ingyenes lehetőséget.
Source Válassza a GitHubot , és szükség esetén jelentkezzen be a GitHubra.

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

Setting Value
Szervezet Válassza ki a szervezetet.
Raktá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.

Note

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.

Setting Value
Subscription Válassza ki 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 my-first-static-web-app-ot a szövegmezőbe.
Konstrukció típusa Válassza az Ingyenes lehetőséget.
Source Válassza a DevOps lehetőséget.
Szervezet Válassza ki a szervezetet.
Projekt Válassza ki a projektet.
Raktár Válassza ki my-first-web-static-app.
Branch Válassza ki a fő elemet.

Note

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 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 build kifejezést az Applikáció-artefakt helye mezőbe.

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

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

Note

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

Válassza a Create gombot.

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

Válassza a Go to resource lehetőséget.

Képernyőkép az Erőforráshoz való ugrás 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 műveletfuttatási példányok kiválasztása az Áttekintésben elvisz a GitHub-akciókhoz, amelyek az adattárod ellen 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 a 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.

Erőforrások tisztítása

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