Megosztás a következőn keresztül:


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:

Erőforrás Leírás
Azure-előfizetés Ha nem rendelkezik ilyen fiókkal, ingyenesen létrehozhat fiókot.
Node.js Telepítse a 20.0-s vagy újabb verziót.
Azure CLI Telepítse a 2.6-os vagy újabb verziót.

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.
  1. Válasszon ki egy megfelelő könyvtárat a kódhoz, majd futtassa a következő parancsokat.

    npm create vite@latest swa-vanilla-demo -- --template=vanilla
    cd swa-vanilla-demo
    npm install
    npm run dev
    

    A parancsok futtatásakor a fejlesztői kiszolgáló kinyomtatja a webhely URL-címét. Válassza ki a hivatkozást az alapértelmezett böngészőben való megnyitásához.

    Képernyőkép a létrehozott vanília webalkalmazásról.

  1. Válasszon ki egy megfelelő könyvtárat a kódhoz, majd futtassa a következő parancsokat.

    npx --package @angular/cli@latest ng new swa-angular-demo --ssr=false --defaults
    cd swa-angular-demo
    npm start
    

    A parancsok futtatásakor a fejlesztői kiszolgáló kinyomtatja a webhely URL-címét. Válassza ki a hivatkozást az alapértelmezett böngészőben való megnyitásához.

    Képernyőkép a létrehozott angular webalkalmazásról.

  1. Válasszon ki egy megfelelő könyvtárat a kódhoz, majd futtassa a következő parancsokat.

    npm create vite@latest swa-react-demo -- --template react
    cd swa-react-demo
    npm install
    npm run dev
    

    A parancsok futtatásakor a fejlesztői kiszolgáló kinyomtatja a webhely URL-címét. Válassza ki a hivatkozást az alapértelmezett böngészőben való megnyitásához.

    Képernyőkép a létrehozott React-webalkalmazásról.

  1. Válasszon ki egy megfelelő könyvtárat a kódhoz, majd futtassa a következő parancsokat.

    npm create vite@latest swa-vue-demo -- --template vue
    cd swa-vue-demo
    npm install
    npm run dev
    

    A parancsok futtatásakor a fejlesztői kiszolgáló kinyomtatja a webhely URL-címét. Válassza ki a hivatkozást az alapértelmezett böngészőben való megnyitásához.

    Képernyőkép a létrehozott Vue-webalkalmazásról.

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

Figyelmeztetés

Az Angular v17 és újabb verziói a választható kimeneti elérési út alkönyvtárában helyezik el a terjeszthető fájlokat. Az SWA CLI nem ismeri a könyvtár pontos helyét. Az alábbi lépések bemutatják, hogyan állíthatja be helyesen ezt az útvonalat.

Keresse meg a létrehozott index.html fájlt a projektben a dist/swa-angular-demo/browser mappában.

  1. Állítsa a környezeti változót SWA_CLI_OUTPUT_LOCATION a index.html fájlt tartalmazó könyvtárra:

    export SWA_CLI_OUTPUT_LOCATION="dist/swa-angular-demo/browser"
    

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.

Képernyőkép az üzembe helyezési parancsról.

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