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
- Nyisson meg egy terminálablakot.
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.
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.
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.
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.
- 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.
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.
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>"
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.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
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).
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.
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
Hozza létre az alkalmazást terjesztésre.
npx swa build
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.
Á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.
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.