Oktatóanyag: Gatsby-webhely közzététele Azure Static Web Apps

  • Cikk
  • 2 perc alatt elolvasható

Ez a cikk bemutatja, hogyan hozhat létre és helyezhet üzembe Gatsby-webalkalmazástAzure Static Web Apps. A végeredmény egy új Static Web Apps webhely (a társított GitHub Actions), amely lehetővé teszi az alkalmazás létrehozásának és közzétételének szabályozását.

Eben az oktatóanyagban az alábbiakkal fog megismerkedni:

  • Gatsby-alkalmazás létrehozása
  • Azure Static Web Apps webhely beállítása
  • A Gatsby alkalmazás üzembe helyezése az Azure-ban

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

Előfeltételek

Gatsby-alkalmazás létrehozása

Gatsby-alkalmazás létrehozása a Gatsby parancssori felület (CLI) használatával:

  1. Terminál megnyitása

  2. Az npx eszközzel hozzon létre egy új alkalmazást a Gatsby parancssori felülettel. Ez eltarthat néhány percig.

    npx gatsby new static-web-app

  3. Ugrás az újonnan létrehozott alkalmazásra

    cd static-web-app

  4. Git-adattár inicializálása

    git init
git add -A
git commit -m "initial commit"

Megjegyzés

Ha a Gatsby legújabb verzióját használja, előfordulhat, hogy módosítania kell a package.json fájlt a "engines": { "node": ">=18.0.0" },

Az alkalmazás leküldése a GitHubra

Új Azure Static Web Apps erőforrás létrehozásához rendelkeznie kell egy adattárral a GitHubon.

  1. Hozzon létre egy üres GitHub-adattárat (ne hozzon létre README-t) a gatsby-static-web-app névbőlhttps://github.com/new.

  2. Ezután adja hozzá az imént létrehozott GitHub-adattárat távoliként a helyi adattárhoz. Mindenképpen adja hozzá a GitHub-felhasználónevet a <YOUR_USER_NAME> helyőrző helyett a következő parancsban.

    git remote add origin https://github.com/<YOUR_USER_NAME>/gatsby-static-web-app

  3. Küldje le a helyi adattárat a GitHubra.

    git push --set-upstream origin main

A webalkalmazás üzembe helyezése

Az alábbi lépések bemutatják, hogyan hozhat létre új statikus webhelyalkalmazást, és hogyan helyezheti üzembe éles környezetben.

Az alkalmazás létrehozása

  1. Nyissa meg az Azure Portalt

  2. Válassza az Erőforrás létrehozása lehetőséget

  3. Keressen rá a Static Web Apps kifejezésre

  4. Válassza a Static Web Apps

  5. Kattintson a Létrehozás elemre.

  6. Az Alapvető beállítások lapon adja meg a következő értékeket.

    Tulajdonság Érték
    Előfizetés Az Azure-előfizetés neve.
    Erőforráscsoport my-gatsby-group
    Név my-gatsby-app
    Csomag típusa Ingyenes
    Régió Azure Functions API-hoz és előkészítési környezetekhez Válassza ki az Önhöz legközelebbi régiót.
    Forrás GitHub

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

  8. Adja meg a következő GitHub-értékeket.

    Tulajdonság Érték
    Szervezet Válassza ki a kívánt GitHub-szervezetet.
    Adattár Válassza a gatsby-static-web-app lehetőséget.
    Ág Válassza a fő lehetőséget.

  9. A Build Details (Build részletei ) szakaszban válassza a Gatsby (Gatsby ) lehetőséget a Build Presets (Összeállítási beállítások ) legördülő listából, és tartsa meg az alapértelmezett értékeket.

Áttekintés és létrehozás

  1. Válassza az Áttekintés + Létrehozás lehetőséget annak ellenőrzéséhez, hogy a részletek helyesek-e.

  2. Válassza a Létrehozás lehetőséget a App Service statikus webalkalmazás létrehozásának megkezdéséhez, és hozzon létre egy GitHub Actions az üzembe helyezéshez.

  3. Az üzembe helyezés befejezése után válassza az Erőforrás megnyitása lehetőséget.

  4. Az erőforrás képernyőjén válassza az URL-hivatkozást az üzembe helyezett alkalmazás megnyitásához. Előfordulhat, hogy várnia kell egy-két percet, amíg a GitHub Actions befejeződik.

    Üzembe helyezett alkalmazás

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

Ha nem folytatja az alkalmazás használatát, az alábbi lépésekkel törölheti az Azure Static Web App-erőforrást:

  1. Nyissa meg az Azure Portalt
  2. A felső keresősávon keresse meg az alkalmazást a korábban megadott név alapján
  3. Kattintson az alkalmazásra
  4. Kattintson a Törlés gombra
  5. Kattintson az Igen gombra a törlési művelet megerősítéséhez

Következő lépések

Egyéni tartomány hozzáadása