Gyakorlat – Statikus Azure-webalkalmazás létrehozása

  • 5 perc

Ebben a gyakorlatban egy olyan Azure Static Web Apps-példányt hoz létre, amely egy olyan GitHub Actions-műveletet is magában foglal, amely automatikusan létrehozza és közzéteszi az alkalmazást.

Statikus webalkalmazás létrehozása

Most, hogy létrehozta a GitHub-adattárat, létrehozhat egy Static Web Apps-példányt az Azure Portalon.

Az Azure Static Web Apps Visual Studio Code-bővítmény telepítése

  1. Nyissa meg a Visual Studio Marketplace-t, és telepítse a Visual Studio Code-hoz készült Azure Static Web Apps-bővítményt .

  2. Amikor a Bővítmény lap betöltődik a Visual Studio Code-ban, válassza a Telepítés gombot.

  3. A telepítés befejezése után válassza az Újraindítás lehetőséget a frissítéshez , ha a rendszer kéri.

Bejelentkezés az Azure-ba a Visual Studio Code-ban

  1. A Visual Studio Code-ban jelentkezzen be az Azure-ba aParancskatalógus> gombra kattintva, majd lépjen be az Azure-ba: Bejelentkezés.

  2. Az utasításokat követve másolja és illessze be a kapott kódot a webböngészőbe. Ezzel hitelesíti Visual Studio Code-munkamenetét.

Válassza ki az előfizetését

  1. Nyissa meg a Visual Studio Code-ot, és válassza a Fájl > megnyitása lehetőséget, és nyissa meg a számítógépre klónozott adattárat a szerkesztőben.

  2. A parancskatalógus megnyitásával és beírásával Azure: Select Subscriptionsellenőrizze, hogy bejelentkezett-e az előnyben részesített Azure-előfizetésbe, majd nyomja le az Enter billentyűt.

  3. Jelölje ki az előfizetést (mellette pipa jelenik meg), majd kattintson az OK gombra.

Statikus webalkalmazás létrehozása

  1. Nyissa meg a Visual Studio Code-ot, és válassza a Fájlmegnyitás > lehetőséget a számítógépre klónozott adattár megnyitásához a szerkesztőben.

  2. 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.

    Képernyőkép az Azure-emblémáról a VS Code-ban.

    Feljegyzés

    Az Azure-ba és a GitHubba kötelező bejelentkezni. Ha még nincs bejelentkezve az Azure-ba és a GitHubra a Visual Studio Code-ból, a bővítmény arra fogja kérni, hogy a létrehozás folyamata során mindkét szolgáltatásba jelentkezzen be.

  3. Helyezze az egeret a Static Web Apps címsor fölé, kattintson a jobb gombbal, és válassza a Statikus webalkalmazás létrehozása lehetőséget.

    A webalkalmazások létrehozásának helyét bemutató képernyőkép.

  4. Írja be my-first-static-web-app, és nyomja meg az Enter-t.

    Képernyőkép statikus webalkalmazások létrehozásáról.

  5. Válassza ki a tartózkodási helyét , és nyomja le az Enter billentyűt.

    Az előfizetés kiválasztását bemutató képernyőkép.

  1. Válassza az Angular lehetőséget, majd nyomja meg az Entert.

    Képernyőkép a kiválasztott szögletes beállításról.

  2. Adja meg az /angular-app értéket az alkalmazáskód helyeként, és nyomja le az Enter billentyűt.

    Képernyőkép az Angular-alkalmazásként megadott kódhelyről.

  3. Adja meg dist/angular-app-t a build kimeneti helyeként, ahol a fájlok az alkalmazásban éles használatra készülnek, majd nyomja meg az Enter billentyűt.

    Képernyőkép az Angular buildkimeneti helyének megadásáról.

  1. Válassza a React lehetőséget, és nyomja le az Enter billentyűt.

    Képernyőkép a kiválasztott válaszlehetőségről.

  2. Adja meg a /react-app értéket az alkalmazáskód helyeként, és nyomja le az Enter billentyűt.

    Képernyőkép a kód react alkalmazásként megadott helyéről.

  3. Adja meg a build-et a build kimeneti helyeként, ahol a fájlok az alkalmazásban készülnek éles környezetre, majd nyomja meg az Enter billentyűt.

    Képernyőkép a React buildkimeneti helyének megadásáról.

  1. Válassza a Svelte lehetőséget, és nyomja le az Enter billentyűt.

    Képernyőkép a kiválasztott karcsú lehetőségről.

  2. Adja meg a /svelte-app értéket az alkalmazáskód helyeként, és nyomja le az Enter billentyűt.

    Képernyőkép a Svelte-alkalmazásként megadott kódhelyről.

  3. Adja meg nyilvánosan a build kimeneti helyét, ahol a fájlok éles környezetben vannak létrehozva az alkalmazásban, és nyomja le az Enter billentyűt.

    Képernyőkép a Svelte buildkimeneti helyének megadásáról.

  1. Válassza a Vue lehetőséget, és nyomja le az Enter billentyűt.

    Képernyőkép a kiválasztott vue beállításról.

  2. Adja meg a /vue-app értéket az alkalmazáskód helyeként, és nyomja le az Enter billentyűt.

    Képernyőkép a Vue-alkalmazásként megadott kódhelyről.

  3. Adja meg a dist értéket az alkalmazásban a build kimeneti helyeként, ahol a fájlok production célokra készülnek el, és nyomja meg az Entert.

    Képernyőkép a Vue buildkimeneti helyének megadásáról

Feljegyzés

Az adattár kissé eltérhet attól, amit korábban használt. Négy különböző alkalmazást tartalmaz négy különböző mappában. Minden mappa más és más JavaScript-keretrendszerben létrehozott alkalmazást tartalmaz. Általában egy alkalmazás található az adattár gyökerében, és / van megadva az alkalmazás elérési útjának helyeként. Ez egy nagyszerű példa arra, hogy az Azure Static Web Apps eleve miért teszi lehetővé a helyek konfigurálását – így teljes körűen szabályozhatja az alkalmazás létrehozásának módját.

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

    Képernyőkép a megerősítő kódról, amely arra kéri a felhasználót, hogy nyisson meg műveleteket a GitHubon vagy a View/Edit Configure alkalmazásban.

  2. Az üzembe helyezés előrehaladását a GitHub Actions használatával tekintheti meg a Műveletek menü kibontásával.

    Képernyőkép arról, hogyan ellenőrizheti az előrehaladást a GitHub Actions használatával.

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

  3. 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.

    Képernyőkép arról, hogyan lehet böngészni a statikus webalkalmazás webhelyének eléréséhez.

Gratulálunk! Üzembe helyezte az első alkalmazást az Azure Static Web Apps-ben!

Feljegyzés

Ne aggódjon, ha egy olyan weblap jelenik meg, amely szerint az alkalmazás még nincs létrehozva és üzembe helyezve. Egy perc múlva frissítse a böngészőt. Az Azure Static Web Apps-példány létrehozásakor a GitHub Actions-művelet automatikusan lefut. Ha a kezdőlap jelenik meg, az alkalmazás üzembe helyezése még folyamatban van.