Gatsby-webhely üzembe helyezése az Azure Static Web Appsben

Ez a cikk bemutatja, hogyan hozhat létre és helyezhet üzembe Gatsby-webalkalmazásokat az Azure Static Web Appsben. A végeredmény egy új Static Web Apps-webhely (a társított GitHub Actionsszel együtt), amely szabályozza az alkalmazás létrehozásának és közzétételének módját.

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

Ha nem rendelkezik Azure-előfizetéssel, első lépésként hozzon létre egy ingyenes Azure-fiókot.

Előfeltételek

• Egy Azure-fiók, aktív előfizetéssel. Ha nem rendelkezik ilyen fiókkal, ingyenesen létrehozhat fiókot.
• Egy GitHub-fiók. Ha nem rendelkezik ilyen fiókkal, ingyenesen létrehozhat fiókot.
• Telepítve van egy Git-beállítás. Ha nincs ilyenje, telepítheti a Gitet.
• Telepített Node.js.

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"
   

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-appból https://github.com/new .

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

   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 helyalkalmazá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. Statikus webalkalmazások kiválasztása

5. Válassza a Létrehozás elemet

6. Az Alapismeretek 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
   Terv típusa	Ingyenes
   Régió az Azure Functions API-hoz és az előkészítési környezetekhez	Válasszon ki egy Önhöz legközelebbi régiót.
   Forrás	GitHub

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

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 ki a fő elemet.

   Feljegyzés

   Ha nem lát tárházakat, lehetséges, 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. A szervezeti adattárak esetében az engedélyek megadásához a szervezet tulajdonosának kell lennie.

9. A Build Details (Build részletei) szakaszban válassza a Gatsby lehetőséget a Buildelő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 a Véleményezés + Létrehozás lehetőséget , ha ellenőrizni szeretné, hogy a részletek helyesek-e.

2. Válassza a Létrehozás lehetőséget az App Service Static Web App létrehozásának megkezdéséhez, és üzembe helyezéshez kiépíthet egy GitHub Actionst.

3. Az üzembe helyezés befejezése után válassza az Ugrás az erőforrásra 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.

   

Az erőforrások eltávolí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 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