Webalkalmazás üzembe helyezése az Azure Static Web Appsben

Ebben a cikkben egy új webalkalmazást hoz létre a választott keretrendszerrel, helyileg futtatja, majd üzembe helyezi az Azure Static Web Appsben.

Előfeltételek

Az oktatóanyag elvégzéséhez a következőkre lesz szüksége:

Szükség van egy szövegszerkesztőre is. Az Azure-ral való munkához a Visual Studio Code használata ajánlott.

A cikkben létrehozott alkalmazást a választott platformon futtathatja, például: Linux, macOS, Windows vagy Linuxos Windows-alrendszer.

A webalkalmazás létrehozása

1. Nyisson meg egy terminálablakot.

3. A fejlesztési kiszolgáló leállításához válassza a Cmd/Ctrl C billentyűkombinációt+.

Statikus webalkalmazás létrehozása az Azure-ban

Statikus webalkalmazást az Azure Portal, az Azure CLI, az Azure PowerShell vagy a Visual Studio Code használatával hozhat létre (az Azure Static Web Apps bővítményével). Ez az oktatóanyag az Azure CLI-t használja.

1. Jelentkezzen be az Azure CLI-be:

   az login
   

   Alapértelmezés szerint ez a parancs megnyit egy böngészőt a folyamat befejezéséhez. Az Azure CLI különböző módszereket támogat a bejelentkezéshez , ha ez a módszer nem működik a környezetben.

2. Ha több előfizetéssel rendelkezik, előfordulhat, hogy ki kell választania egy előfizetést. Az aktuális előfizetését az alábbi paranccsal tekintheti meg:

   az account show
   

   Előfizetés kiválasztásához futtassa a az account set parancsot.

   az account set --subscription "<SUBSCRIPTION_NAME_OR_ID>"
   

3. Hozzon létre egy erőforráscsoportot.

   Az erőforráscsoportok az Azure-erőforrások csoportosítására szolgálnak.

   az group create -n swa-tutorial -l centralus --query "properties.provisioningState"
   

   A -n paraméter a hely nevére hivatkozik, a -l paraméter pedig az Azure-hely neve. A parancs ezzel fejeződik --query "properties.provisioningState" be, így a parancs csak egy sikeres vagy hibaüzenetet ad vissza.

4. Hozzon létre egy statikus webalkalmazást az újonnan létrehozott erőforráscsoportban.

   az staticwebapp create -n swa-demo-site -g swa-tutorial --query "defaultHostname"
   

   A -n paraméter a hely nevére, a -g paraméter pedig az Azure-erőforráscsoport nevére hivatkozik. Győződjön meg arról, hogy ugyanazt az erőforráscsoportnevet adja meg, mint az előző lépésben. A statikus webalkalmazás globálisan elosztott, így a hely nem fontos az alkalmazás üzembe helyezéséhez.

   A parancs úgy van konfigurálva, hogy visszaadja a webalkalmazás URL-címét. Az üzembe helyezett webalkalmazás megtekintéséhez másolja az értéket a terminálablakból a böngészőbe.

Üzembe helyezés konfigurálása

1. Adjon hozzá egy staticwebapp.config.json fájlt az alkalmazás kódjához a következő tartalommal:

   {
       "navigationFallback": {
           "rewrite": "/index.html"
       }
   }
   

   A tartalék útvonal definiálása lehetővé teszi, hogy a webhely kiszolgálóként szolgálhassa ki a index.html tartományra vonatkozó kérések fájlját.

   Ha használ ilyet, ellenőrizze ezt a fájlt a forráskód-vezérlőrendszerben (például a gitben).

2. Telepítse az Azure Static Web Apps (SWA) parancssori felületét a projektbe.

   npm install -D @azure/static-web-apps-cli
   

   Az SWA CLI segít a webhely helyi fejlesztésében és tesztelésében, mielőtt üzembe helyezené a felhőben.

3. Hozzon létre egy új fájlt a projekthez, és nevezze el.swa-cli.config.json

   A swa-cli.config.json fájl leírja, hogyan hozhatja létre és helyezheti üzembe a webhelyet.

   A fájl létrehozása után a parancs használatával létrehozhatja annak npx swa init tartalmát.

   npx swa init --yes
   

4. Hozza létre az alkalmazást terjesztésre.

   npx swa build
   

5. Az SWA CLI használatával jelentkezzen be az Azure-ba.

   npx swa login --resource-group swa-tutorial --app-name swa-demo-site
   

   Használja ugyanazt az erőforráscsoportnevet és statikus webalkalmazás-nevet, amelyet az előző szakaszban hozott létre. Amikor megpróbál bejelentkezni, megnyílik egy böngésző, amely szükség esetén befejezi a folyamatot.

Webhely üzembe helyezése az Azure-ban

A kód üzembe helyezése a statikus webalkalmazásban:

npx swa deploy --env production

Az alkalmazás üzembe helyezése eltarthat néhány percig. Miután elkészült, megjelenik a webhely URL-címe.

A legtöbb rendszerben kiválaszthatja a webhely URL-címét az alapértelmezett böngészőben való megnyitásához.

Erőforrások törlése (nem kötelező)

Ha nem folytatja a további oktatóanyagokat, távolítsa el az Azure-erőforráscsoportot és az erőforrásokat:

az group delete -n swa-tutorial

Amikor eltávolít egy erőforráscsoportot, az összes benne lévő erőforrást törli. Ezt a műveletet nem vonhatja vissza.

Következő lépések

Kapcsolódó tartalom

• Hitelesítés és engedélyezés
• Adatbázis-kapcsolatok
• Egyéni tartományok
• Videósorozat: Webhelyek üzembe helyezése a felhőben az Azure Static Web Apps használatával