Gyakorlat: Statikus HTML-webalkalmazás létrehozása az Azure Cloud Shell használatával

  • 15 perc

Az ingyenes tesztkörnyezetben az Azure globális régióinak egy részében hozhat létre erőforrásokat. Az erőforrások létrehozásakor válasszon ki egy régiót az alábbi listából:

  • USA 2. nyugati régiója
  • USA déli középső régiója
  • USA középső régiója
  • USA keleti régiója
  • Nyugat-Európa
  • Délkelet-Ázsia
  • Kelet-Japán
  • Dél-Brazília
  • Délkelet-Ausztrália
  • Közép-India

Ebben a gyakorlatban egy egyszerű HTML+CSS-webhelyet helyez üzembe Azure-alkalmazás Szolgáltatásban az Azure CLI az webapp up paranccsal. Ezután frissítse a kódot, és telepítse újra ugyanazzal a paranccsal.

A az webapp up parancs megkönnyíti a webalkalmazások létrehozását és frissítését. Végrehajtáskor a következő műveleteket hajtja végre:

  • Hozzon létre egy alapértelmezett erőforráscsoportot, ha nincs megadva.
  • Egy alapértelmezett App Service-csomag létrehozása.
  • Egy alkalmazás létrehozása a megadott néven.
  • Fájlok tömörített üzembe helyezése az aktuális munkakönyvtárból a webalkalmazásba.

Fontos

A gyakorlat elvégzéséhez át kell váltania a Cloud Shellt a klasszikus verzióra. A Cloud Shell betöltése után válassza a Beállítások lehetőséget a menüből közvetlenül a Cloud Shell tetején, majd válassza az Ugrás a klasszikus verzióra lehetőséget.

A mintaalkalmazás letöltése

Ebben a szakaszban a tesztkörnyezettel töltheti le a mintaalkalmazást, és változókat állíthat be, hogy megkönnyítse a parancsok bevitelét.

  1. A tesztkörnyezetben hozzon létre egy könyvtárat, majd navigáljon hozzá.

    mkdir htmlapp

cd htmlapp

  2. Futtassa a következő git parancsot a mintaalkalmazás-adattár htmlapp könyvtárba való klónozásához.

    git clone https://github.com/Azure-Samples/html-docs-hello-world.git

  3. Állítsa be a változókat az erőforráscsoport és az alkalmazásnevek tárolására az alábbi parancsok futtatásával.

    resourceGroup=$(az group list --query "[].{id:name}" -o tsv)
appName=az204app$RANDOM

A webapp létrehozása

  1. Lépjen abba a könyvtárba, amelyben a mintakód található, és futtassa az az webapp up parancsot.

    cd html-docs-hello-world

az webapp up -g $resourceGroup -n $appName --html

    A parancs futtatása eltarthat néhány percig. Miközben a parancs fut, az alábbi példához hasonló információkat jelenít meg.

    {
"app_url": "https://<myAppName>.azurewebsites.net",
"location": "westeurope",
"name": "<app_name>",
"os": "Windows",
"resourcegroup": "<resource_group_name>",
"serverfarm": "appsvc_asp_Windows_westeurope",
"sku": "FREE",
"src_path": "/home/<username>/demoHTML/html-docs-hello-world ",
< JSON data removed for brevity. >
}

  2. Nyisson meg egy új lapot a böngészőben, keresse meg az alkalmazás URL-címét (https://<myAppName>.azurewebsites.net) és ellenőrizze, hogy az alkalmazás fut-e – jegyezze fel a címet a lap tetején. Hagyja nyitva a böngészőt az alkalmazásban a következő szakaszban.

    Feljegyzés

    Az előző parancs kimenetéből másolhat <myAppName>.azurewebsites.net , vagy a kimenetben lévő URL-címet választva megnyithatja a webhelyet egy új lapon.

Az alkalmazás frissítése és ismételt üzembe helyezése

  1. A Cloud Shellben írja be code index.html a szerkesztő megnyitásához. A címsorcímkében módosítsa a <h1> Azure-alkalmazás Szolgáltatás – Statikus HTML-mintawebhelyet a szolgáltatás frissítésének Azure-alkalmazás - vagy bármi másra, amelyet szeretne.

  2. A ctrl-s parancsokkal mentheti a fájlt, a kilépéshez pedig a ctrl-q billentyűkombinációt.

  3. Helyezze újra üzembe az alkalmazást ugyanazzal az webapp up a paranccsal, amelyet korábban használt.

    az webapp up -g $resourceGroup -n $appName --html

    Tipp.

    A billentyűzet felfelé mutató nyilat használhatja az előző parancsok görgetéséhez.

  4. Az üzembe helyezés befejezése után váltson vissza a böngészőre a "Webalkalmazás létrehozása" szakasz 2. lépésétől, és frissítse a lapot.