Előző

Következő

Gyakorlat – Első lépések

Befejeződött

Ebben a gyakorlatban létrehoz egy Azure Static Web App-példányt, beleértve egy GitHub-műveletet, amely automatikusan létrehozza és közzéteszi a webhelyet.

Ez a modul a tesztkörnyezeten keresztül elérhetővé tett erőforrásokat használja, amely ingyenes, ideiglenes hozzáférést biztosít egy Azure-előfizetéshez, valamint a gyakorlatok elvégzéséhez szükséges erőforrásokat. Mindenképpen aktiválja a tesztkörnyezetet az oldal tetején. Az ebben a modulban található gyakorlatok során minden egység az előző gyakorlatban létrehozott tartalomtól függ. Ezért válasszon ki egy JavaScript-keretrendszert, és használja az összes további gyakorlathoz.

Adattár létrehozása

Először hozzon létre egy adattárat egy GitHub-sablon használatával. Számos adattársablon érhető el, amelyek a különböző előtér-keretrendszerekben implementált kezdőalkalmazást tartalmazzák.

1. Lépjen a GitHub létrehozási lapjára a sablontár megnyitásához.

2. Ha a rendszer tulajdonost kér, válassza ki az egyik GitHub-fiókját.

3. Az adattár nevének megadásához írja be a my-static-web-app-and-api nevet.

4. Válassza az Adattár létrehozása sablonból lehetőséget.

   Amikor sablonból hozza létre a projektet, a GitHub a háttérben hozza létre az adattárat.

Alkalmazás helyi futtatása

Most már rendelkezik egy Saját-static-web-app-and-api nevű GitHub-adattárral a GitHub-fiókjában. Ezután klónozza a GitHub-adattárat, és helyileg futtatja a kódot a számítógépen.

1. Nyisson meg egy terminálablakot a számítógépen.

   Ha Windows rendszeren dolgozik, beírhatja cmd a rendszertálca keresőmezőbe.

2. Az adattár gépre történő klónozásához illessze be a következő kódot a parancssori ablakba.

   Mindenképpen cserélje le <YOUR_GITHUB_USERNAME> a GitHub-felhasználónevét.

   git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-and-api
   

   Feljegyzés

   Ha problémát tapasztal a parancssori terminálba való másoláskor, kattintson a jobb gombbal a címsorban lévő ikonra, és a Tulajdonságok lapon győződjön meg arról, hogy a Ctrl+Shift+C/V billentyűkombináció használata másolás/beillesztésként jelölőnégyzet be van jelölve.

3. Váltson a klónozott forráskód könyvtárára.

   cd my-static-web-app-and-api
   

4. Nyissa meg a kívánt előtér-keretrendszer könyvtárát.

   cd angular-app
   

   cd react-app
   

   cd svelte-app
   

   cd vue-app
   

5. Telepítse az alkalmazásfüggőségeket.

   npm install
   

6. Győződjön meg arról, hogy az egyes függőségek legújabb verziója telepítve van az alábbi paranccsal.

   npm audit fix
   

7. Futtassa az előtérbeli ügyfélalkalmazást.

   npm start
   

   npm start
   

   npm run dev
   

   npm run serve
   

Az alkalmazás megnyitása a böngészőben

Az alkalmazáscsomag létrehozása és lefordítása után automatikusan megnyílik egy böngészőlap, amely megjeleníti az alkalmazást helyileg.

Az angular helyi gazdagépe a http://localhost:4200.

A react helyi gazdagépe a http://localhost:3000.

A svelte helyi gazdagépe.http://localhost:5000

A Vue helyi gazdagépe a http://localhost:8080.

Az alkalmazásnak azt kell mondania, hogy adatok betöltése ... mert még nincs adat vagy API. A lecke későbbi részében hozzáadja a webalkalmazás API-ját.

A terminálban nyomja le a Ctrl C billentyűkombinációt+a kötegelt feladat leállításához.

Gratulálunk! Elkészítette az alkalmazást, és látta, hogy helyileg fut a böngészőben. Ezután közzéteheti az alkalmazást az Azure Static Web Appsben.

Statikus webalkalmazás létrehozása

Saját GitHub-adattárat hozott létre. Most már létrehozhatja saját statikus webalkalmazását a Visual Studio Code Azure Static Web Apps bővítményével.

Az Azure Static Web Apps Visual Studio Code-bővítmény telepítése

1. Nyissa meg a Visual Studio Code-ot.

2. A felső menüben válassza a Bővítmények megtekintése lehetőséget>, és írja be az Azure Static Web Apps kifejezést a keresőmezőbe.

3. Amikor a Bővítmény lap betöltődik a Visual Studio Code-ban, válassza a Telepítés lehetőséget.

Az alkalmazásmappa megnyitása

1. Válassza az F1 lehetőséget a Visual Studio Code parancskatalógusának megnyitásához.

2. Írja be a fájlt: Mappa megnyitása....

3. Válassza ki a my-static-web-app-and-api mappát.

4. A Megnyitás gombra kattintva nyissa meg a mappát a Visual Studio Code-ban.

Bejelentkezés az Azure-ba a Visual Studio Code-ban

1. Válassza az F1 lehetőséget a Visual Studio Code parancskatalógusának megnyitásához.

2. Írja be az Azure-t: Jelentkezzen be, és kövesse az utasításokat a hitelesítéshez.

   Fontos

   Győződjön meg arról, hogy ugyanazzal a fiókkal jelentkezik be az Azure-ba, amelyet a böngészőbeli tesztkörnyezet aktiválásához használt. Ugyanezzel a fiókkal elérhetővé válik a Concierge-előfizetés, amely az oktatóanyag során ingyenes Azure-erőforrásokhoz biztosít hozzáférést.

Az előfizetés kiválasztása

1. Válassza az F1 lehetőséget a Visual Studio Code parancskatalógusának megnyitásához.

2. Adja meg az Azure-t: Válassza ki az előfizetéseket, és törölje az összes kijelölést a Concierge-előfizetés kivételével.

   

Módosítások véglegesítése

Amikor telepítette az alkalmazásfüggőségeket, a projekt egyes fájljai frissültek a folyamatban. A folytatáshoz véglegesítenie kell ezeket a módosításokat az adattárban.

1. Válassza az F1 lehetőséget a Visual Studio Code parancskatalógusának megnyitásához.

2. Adja meg és válassza a Git Commit All (Összes véglegesítése) lehetőséget.

3. Adja meg a fájl tetejére vonatkozó kezdeti véglegesítést .

4. Mentse és zárja be a git véglegesítési fájlt.

   Ezen a ponton ne aggódjon a módosítások kiszolgálóval való szinkronizálása miatt. A frissítések a statikus webalkalmazás közzétételekor át lesznek másolva a GitHubra.

A statikus webalkalmazás létrehozása

Statikus webalkalmazás létrehozásához az Azure és a GitHub aktuális hitelesített munkamenetei szükségesek. Ha még nem jelentkezett be mindkét szolgáltatóhoz, a bővítmény kéri, hogy jelentkezzen be a létrehozási folyamat során.

1. Válassza az F1 lehetőséget a Visual Studio Code parancskatalógusának megnyitásához.

2. Adja meg és válassza ki az Azure Static Web Apps: Statikus webalkalmazás létrehozása... lehetőséget.

   Adja meg a következő értékeket a parancskatalógus további kéréseihez.

   Adatkérés	Érték
   Előfizetés	Válassza ki a Concierge-előfizetést
   Név	Adja meg a my-static-web-app-and-api értéket
   Régió	Válassza ki az Önhöz legközelebb eső régiót
   Előre beállított	Az Angular kiválasztása
   Alkalmazáskód helye	Adja meg az angular-appot
   Kimeneti hely	Adja meg a dist/angular-appot

2. Adja meg és válassza ki az Azure Static Web Apps: Statikus webalkalmazás létrehozása... lehetőséget.

   Adja meg a következő értékeket a parancskatalógus további kéréseihez.

   Adatkérés	Érték
   Előfizetés	Válassza ki a Concierge-előfizetést
   Név	Adja meg a my-static-web-app-and-api értéket
   Régió	Válassza ki az Önhöz legközelebb eső régiót
   Előre beállított	Válassza a React lehetőséget
   Alkalmazáskód helye	Adja meg a react-appot
   Kimeneti hely	Adja meg a dist értéket

2. Adja meg és válassza ki az Azure Static Web Apps: Statikus webalkalmazás létrehozása... lehetőséget.

   Adja meg a következő értékeket a parancskatalógus további kéréseihez.

   Adatkérés	Érték
   Előfizetés	Válassza ki a Concierge-előfizetést
   Név	Adja meg a my-static-web-app-and-api értéket
   Régió	Válassza ki az Önhöz legközelebb eső régiót
   Előre beállított	Svelte kiválasztása
   Alkalmazáskód helye	Írja be a svelte-appot
   Kimeneti hely	Adja meg a nyilvános

2. Adja meg és válassza ki az Azure Static Web Apps: Statikus webalkalmazás létrehozása... lehetőséget.

   Adja meg a következő értékeket a parancskatalógus további kéréseihez.

   Adatkérés	Érték
   Előfizetés	Válassza ki a Concierge-előfizetést
   Név	Adja meg a my-static-web-app-and-api értéket
   Régió	Válassza ki az Önhöz legközelebb eső régiót
   Előre beállított	Vue kiválasztása
   Alkalmazáskód helye	Adja meg a vue-appot
   Kimeneti hely	Adja meg a dist értéket

Feljegyzés

Ez az adattár eltér a korábban esetleg használt többi projekttől. Ez a projekt négy különböző alkalmazást tartalmaz négy különböző mappában. Minden mappa más és más JavaScript-keretrendszerben létrehozott alkalmazást tartalmaz. Általában csak egy alkalmazás van az adattár gyökerében, és így az alkalmazás elérési útjának alapértelmezett / helye. Ez egy nagyszerű példa arra, hogyan teszi lehetővé az Azure Static Web Apps a helyek konfigurálását – teljes mértékben szabályozhatja az alkalmazás felépítését.

3. Az alkalmazás létrehozása után megerősítő értesítés jelenik meg a Visual Studio Code-ban.

   

   A build konfigurálása során a Visual Studio Code jelenti Önnek a build állapotát.

   

4. Az üzembe helyezés előrehaladását a GitHub Actions használatával tekintheti meg a Műveletek menü kibontásával.

   

   Az üzembe helyezés befejezése után közvetlenül a webhelyére navigálhat.

5. A webhely böngészőben való megtekintéséhez kattintson a jobb gombbal a projektre a Static Web Apps bővítményben, és válassza a Webhely tallózása lehetőséget.

   

   Az alkalmazásnak azt kell mondania, hogy adatok betöltése ... mert még nincs adat vagy API. A modul későbbi részében hozzáadja a webalkalmazás API-ját.

Gratulálunk! Az alkalmazás üzembe lett helyezve az Azure Static Web Appsben!

Feljegyzés

Ne aggódjon, ha olyan weblapot lát, amely szerint az alkalmazás még nem lett létrehozva és üzembe helyezve. Próbálja meg egy perc múlva frissíteni a böngészőt. A GitHub Action szolgáltatás automatikusan fut az Azure Static Web App létrehozásakor. Szóval ha a kezdőlap jelenik meg, az alkalmazás üzembe helyezése még folyamatban van.

Módosítások lekérése a GitHubról

A GitHubról lekérheti a legújabb módosításokat az Azure Static Web Apps szolgáltatás által létrehozott munkafolyamat-fájl lekéréséhez.

1. Nyissa meg a parancskatalógust a Ctrl Shift+P billentyűkombináció+lenyomásával.

2. Adja meg és válassza a Git: Pull lehetőséget.

3. Nyomja le az Enter billentyűt.

Következő lépések

Ezután megtudhatja, hogyan hozhatja létre és futtathatja az API-t egy Azure Functions-projekt használatával.

Folytatás