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 sandboxot ennek az oldalnak a 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. Menjen a GitHub sablon alapján létrehozott oldalára.

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 a Create repository (Adattár létrehozása) gombot.

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

Az 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, a rendszertálca keresőmezőjében megadhatja cmd.

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 a <YOUR_GITHUB_USERNAME> a GitHub-felhasználónevére.

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

   Jegyzet

   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 be van jelölve másolás/beillesztés közben .

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

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

4. Lépjen be a kívánt front-end keretrendszer könyvtárába.

   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 a front-end kliensalkalmazást.

   npm start
   

   npm start
   

   npm run dev
   

   npm run serve
   

Keresse meg az alkalmazást

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 http://localhost:4200.

A helyi gazda React esetében http://localhost:3000.

Helyi gazdagép a Svelte számára http://localhost:5000.

A Vue helyi gazdagépe 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 CtrlC+ a kötegelt feladat leállításához.

Gratulálok! 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-bővítmény telepítése a Visual Studio Code-hoz

1. Nyissa meg a Visual Studio Code-ot.

2. A felső menüben válassza aBővítmények>, é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.

Válassza ki az előfizetését

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 lehetőséget.

3. Írja be a fájl tetejére a kezdeti commitot.

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.

   Haladéktalan	Érték
   Előfizetés	Válassza ki a Concierge-előfizetést
   Név	Írja be my-static-web-app-and-api
   Régió	Válassza ki az Önhöz legközelebbi régiót
   Előre beállít	Az Angular kiválasztása
   Alkalmazáskód helye	Adja meg az angular-appot
   Kimeneti helyszín	Adja meg dist/angular-app könyvtárat

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.

   Haladéktalan	Érték
   Előfizetés	Válassza ki a Concierge-előfizetést
   Név	Írja be my-static-web-app-and-api
   Régió	Válassza ki az Önhöz legközelebbi régiót
   Előre beállít	Válassza a React lehetőséget
   Alkalmazáskód helye	Adja meg a react-appot
   Kimeneti helyszín	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.

   Haladéktalan	Érték
   Előfizetés	Válassza ki a Concierge-előfizetést
   Név	Írja be my-static-web-app-and-api
   Régió	Válassza ki az Önhöz legközelebbi régiót
   Előre beállít	Svelte válassza
   Alkalmazáskód helye	Írja be svelte-app
   Kimeneti helyszín	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.

   Haladéktalan	Érték
   Előfizetés	Válassza ki a Concierge-előfizetést
   Név	Írja be my-static-web-app-and-api
   Régió	Válassza ki az Önhöz legközelebbi régiót
   Előre beállít	Válassza a(z) Vue-t.
   Alkalmazáskód helye	Adja meg a vue-appot
   Kimeneti helyszín	Adja meg a dist értéket

Jegyzet

Ez az adattár különbözik a többi olyan projekttől, amelyet használhat. Ez a projekt négy különböző alkalmazást tartalmaz négy különböző mappában. Minden mappa egy másik JavaScript-keretrendszerben létrehozott alkalmazást tartalmaz. Általában csak egy alkalmazás található az adattár gyökerében, ezért az alkalmazás útvonalához az alapértelmezett / tartozik. Ez a struktúra nagyszerű példa arra, hogy az Azure Static Web Apps hogyan teszi lehetővé a helyek első helyen történő 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álok! Az alkalmazás üzembe lett helyezve az Azure Static Web Appsben!

Jegyzet

Ne aggódjon, ha olyan weblapot lát, amely azt jelzi, hogy az alkalmazás még nincs felépítve é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. Így ha megjelenik a kezdőoldal, az alkalmazás üzembe helyezése még folyamatban van.

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

Az Azure Static Web Apps szolgáltatás által létrehozott munkafolyamat fájl letöltéséhez húzza le a legújabb módosításokat a GitHubról.

1. Nyissa meg a parancs palettát 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.