Rövid útmutató: Az első statikus webhely létrehozása az Azure Static Web Apps használatával

  • Cikk

Az Azure Static Web Apps egy alkalmazás kódtárból való létrehozásával tesz közzé webhelyet. Ebben a rövid útmutatóban üzembe helyez egy alkalmazást az Azure Static Web Appsben a Visual Studio Code bővítmény használatával.

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

Előfeltételek

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:
    1. https://github.com/staticwebdev/vanilla-basic/generate
  2. Az adattár elnevezése a saját első-static-web-appomnak

Feljegyzé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.

Képernyőkép az Adattár létrehozása gombról.

A tárház klónozása

A GitHub-fiókban létrehozott adattárral klónozza a projektet a helyi gépre az alábbi paranccsal.

git clone https://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/my-first-static-web-app.git

Mindenképpen cserélje le <YOUR_GITHUB_ACCOUNT_NAME> a GitHub-felhasználónevét.

Ezután nyissa meg a Visual Studio Code-ot, és nyissa meg a Fájl > megnyitása mappát a klónozott tárház megnyitásához a szerkesztőben.

Az Azure Static Web Apps bővítmény telepítése

Ha még nem rendelkezik a Visual Studio Code Azure Static Web Apps-bővítményével, telepítheti a Visual Studio Code-ban.

  1. Válassza a Bővítmények megtekintése lehetőséget>.
  2. A Marketplace keresési bővítményeiben írja be az Azure Static Web Apps kifejezést.
  3. Válassza a Telepítés az Azure Static Web Appshez lehetőséget.

Statikus webalkalmazás létrehozása

  1. Az Azure-bővítmények ablak megnyitásához a Visual Studio Code-ban kattintson a Tevékenység sávon az Azure-emblémára.

    Azure-embléma

    Feljegyzés

    A folytatáshoz be kell jelentkeznie az Azure-ba és a GitHubra a Visual Studio Code-ban. Ha még nincs hitelesítve, a bővítmény kéri, hogy jelentkezzen be mindkét szolgáltatásba a létrehozási folyamat során.

  2. Válassza az F1 lehetőséget a Visual Studio Code parancskatalógusának megnyitásához.

  3. Írja be a Statikus webalkalmazás létrehozása parancsmezőt.

  4. Válassza az Azure Static Web Apps: Statikus webalkalmazás létrehozása... lehetőséget.

  5. Válassza ki az Azure-előfizetését.

  6. Adja meg a my-first-static-web-app nevet az alkalmazás nevéhez.

  7. Válassza ki az Önhöz legközelebb eső régiót.

  8. Adja meg a keretrendszer által választott beállításértékeket.

    Beállítás Érték
    Váz Egyéni kiválasztása
    Az alkalmazáskód helye Írja be a következő szöveget: /src
    Build helye Írja be a következő szöveget: /src

  9. Az alkalmazás létrehozása után megerősítő értesítés jelenik meg a Visual Studio Code-ban.

    Létrehozás megerősítése

    Ha a GitHub egy Művelet engedélyezése gombot jelenít meg ezen az adattáron, a gombot választva engedélyezheti a buildelési művelet futtatását az adattárban.

    Mivel az üzembe helyezés folyamatban van, a Visual Studio Code bővítmény jelenti Önnek a build állapotát.

    Várakozás az üzembe helyezésre

    Az üzembe helyezés befejezése után közvetlenül a webhelyére navigálhat.

  10. A webhely böngészőben való megtekintéséhez kattintson a jobb gombbal a projektre a Static Web Apps bővítményben, és válassza a Webhely tallózása lehetőséget.

    Webhely tallózása

Az erőforrások eltávolítása

Ha nem folytatja az alkalmazás használatát, a bővítményen keresztül törölheti az Azure Static Web Apps-példányt.

A Visual Studio Code Azure-ablakban térjen vissza az Erőforrások szakaszhoz, és a Static Web Apps területen kattintson a jobb gombbal az első statikus-webalkalmazásomra, és válassza a Törlés lehetőséget.

Következő lépések

API hozzáadása