Gyakorlat – A mintaalkalmazás lekérése

  • 10 perc

Készüljön fel egy CI-folyamat létrehozására a Microsoft Azure Pipelines használatával. Az első lépés a Space Game webalkalmazás létrehozása és futtatása. A szoftver manuális létrehozásának megértése felkészíti a folyamat folyamatának ismétlésére.

Mara pontosan ezt fogja tenni, és az eljárások követésével ugyanezt teheti.

Azure DevOps személyes hozzáférési jogkivonat létrehozása

  1. Jelentkezzen be a szervezetbe (https://dev.azure.com/{yourorganization}). Ha még nem rendelkezik Azure DevOps-szervezettel, a kezdés előtt hozzon létre egy ingyenes szervezetet . Miután bejelentkezett, ha több szervezettel is rendelkezik, válassza az Azure DevOpsot, és lépjen a modul elvégzéséhez használni kívánt szervezethez. Ebben a példában a szervezet neve .fabrikam

    Képernyőkép az Azure DevOps-szervezet kiválasztásáról.

  2. A kezdőlapon nyissa meg a felhasználói beállításokat , és válassza a Személyes hozzáférési jogkivonatok lehetőséget.

  3. Válassza az + Új jogkivonat lehetőséget.

  4. Nevezze el a jogkivonatot tetszőleges névvel. A jogkivonat akkor használatos, ha a Codespace regisztrálja az ügynökét az Azure DevOps-szervezetnél, így megtarthatja az alapértelmezett lejáratot.

  5. Válassza az Egyéni definiált lehetőséget, és válassza az Összes hatókör megjelenítése lehetőséget.

    Képernyőkép egy személyes hozzáférési jogkivonat összes hatókörének megtekintéséről.

  6. Válassza ki a következő hatókört: Ügynökkészletek (Olvasás és kezelés) és a Létrehozás gombra.

    Képernyőkép egy személyes hozzáférési jogkivonat ügynökkészlet-engedélyeinek kiválasztásáról.

  7. Ha elkészült, másolja ki a jogkivonatot, és tárolja biztonságos helyen. A biztonság érdekében ez nem jelenik meg újra.

Figyelmeztetés

Kezelje és használja a PAT-t, mint a jelszavát, és tartsa titokban.

Elágazás létrehozása

A gitbeli projekt használatának első lépése egy elágazás létrehozása, amellyel dolgozhat és módosíthatja a forrásfájlokat. Egy elágaztatás egy GitHub-adattár másolatát jelenti. A másolat megtalálható a fiókjában, és lehetővé teszi, hogy a kívánt módosításokat az eredeti projekt befolyásolása nélkül végezze el.

Bár javasolhat módosításokat az eredeti projekten, ebben a leckében úgy dolgozik a Space Game webes projekttel, mintha az eredeti projekt lenne Mara és a csapat tulajdonában.

Feljegyzés

Ha korábban elágazott ez az adattár, például ha korábban elvégezte ezt a modult vagy egy másik Tailspin Toys betanítási modult, javasoljuk, hogy törölje az elágazást , és hozzon létre egy új elágazást az alábbi lépések végrehajtásával. Ha nem szeretné törölni az elágazást, győződjön meg arról, hogy szinkronizálja az elágazást.

Fork a Space Game webes projektjét a GitHub-fiókjába:

  1. Egy webböngészőben nyissa meg a GitHubot, és jelentkezzen be.

  2. Lépjen a Space Game webes projektjéhez.

  3. Válassza az Elágazás lehetőséget:

    Képernyőkép a GitHubról, amelyen az Elágazás gomb helye látható.

  4. Az adattár fiókba való elágazásához kövesse az utasításokat.

Titkos kódok beállítása saját üzemeltetésű ügynökhöz

A Codespace létrehozása előtt több titkos kulcs is létrejön, amelyek segítenek a saját üzemeltetésű Azure DevOps-ügynök futtatásában. Éles környezetben nem szeretne saját üzemeltetésű ügynököt használni a GitHub Codespacesben. Mivel azonban a csapat a Codespace-eket használja tesztelésre, ez egy jó ideiglenes megoldás a folyamatok létrehozásakor.

  1. Nyissa meg az elágaztatott GitHub-adattárat, és válassza Gépház >Secrets és változók Codespaces>elemét.

    Képernyőkép a GitHub Codespaces titkos kulcsokról.

  2. Hozza létre a következő Codespaces-adattár titkos kulcsait.

    Név szerint Érték
    ADO_ORG A modul elvégzéséhez használt Azure DevOps-szervezet neve. Ebben a példában fabrikam a szervezet neve látható. Ennek a szervezetnévnek meg kell egyeznie azzal, amelyet az előző lépésben a PAT létrehozásakor használt.
    ADO_PAT Az előző lépésben létrehozott személyes hozzáférési jogkivonat.

    Tipp.

    Ebben a betanítási modulban az ügynök hozzá van rendelve az Default ügynökkészlethez. Ha nem szeretné futtatni az ügynököt a készletben (például ezt a Default betanítási modult az éles Azure DevOps-környezettel futtatja, és más ügynökök is vannak a Default készletben), létrehozhat egy titkos kódot, ADO_POOL_NAME és megadhatja a használni kívánt ügynökkészlet nevét. Ha nincs megadva ez a titkos kód, a rendszer a Default készletet használja.

Kódterek beállítása

Ezután beállítja a Codespace-eket, hogy létrehozhassa a webhelyet, használhassa a forrásfájlokat, és futtathassa a folyamatot egy saját üzemeltetésű ügynökkel.

  1. Az elágaztatott GitHub-adattárban válassza a Kód elemet, válassza újra a Kód elemet , válassza a Codespaces lapot, és hozzon + létre egy új Kódteret.

    Képernyőkép egy új codespace beállításokkal való létrehozásáról.

  2. Várjon, amíg a Codespace létrejön. Ez a build eltarthat néhány percig, de csak egyszer kell elvégeznie a betanítási modul ezen lépésében. A build befejezése után a rendszer átirányítja a Visual Studio Code online verziójára. A Codespace a Visual Studio Code friss telepítésével rendelkezik, hasonlóan a Visual Studio Code helyi gépen való friss telepítéséhez. A Codespace első indításakor előfordulhat, hogy a Visual Studio Code online kérni fogja, hogy adjon meg bizonyos konfigurációt, vagy kérdezzen a beállításokról. Kiválaszthatja a Visual Studio Code használati stílusának megfelelő beállításokat.

Felsőbb rétegbeli távoli adattár beállítása

A távoli egy Git-adattár, ahol a csapattagok együttműködnek (hasonlóan a GitHubon található adattárhoz). Soroljuk fel a távoli adatokat, és adjunk hozzá egy olyan távolit, amely a Microsoft adattárának másolatára mutat, hogy megkaphassa a legújabb mintakódot.

  1. A Visual Studio Code online szerkesztőjében lépjen a terminálablakba, és válassza a basht a jobb oldalon.

    Képernyőkép a Visual Studio Code online szerkesztőjének terminálablakáról.

  2. A távoli eszközök listázásához futtassa a git remote következő parancsot:

    git remote -v

    Beolvasási (letöltési) és leküldéses (feltöltési) hozzáféréssel rendelkezik az adattárhoz:

    origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (fetch)
origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (push)

    Az Origin megadja az adattárat a GitHubon. Amikor egy másik adattárból elágazik a kód, gyakori, hogy az eredeti távolit (az elágazásból származót) felfelé nevezik el.

  3. Ha a Microsoft-adattárra mutató távoli névvel rendelkező felsőbb réteget szeretne létrehozni, futtassa a git remote add következő parancsot:

    git remote add upstream https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git

  4. Futtasson git remote egy második alkalommal a módosítások megtekintéséhez:

    git remote -v

    Láthatja, hogy továbbra is rendelkezik az adattárához beolvasási (letöltési) és felküldési (feltöltési) hozzáféréssel. Most már lekéréses és leküldéses hozzáféréssel is rendelkezik a Microsoft-adattárhoz:

    origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (fetch)
origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (push)
upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git (fetch)
upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git (push)

A webalkalmazás létrehozása és futtatása

  1. A Visual Studio Code online szerkesztőjében keresse meg a terminálablakot, és az alkalmazás létrehozásához futtassa a dotnet build következő parancsot:

    dotnet build --configuration Release

  2. A terminálablakban az alkalmazás futtatásához futtassa a következő dotnet run parancsot:

    dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web

    A .NET-megoldásfájlok több projektet is tartalmazhatnak. Az --project argumentum a Space Game webalkalmazás projektje.

Az alkalmazás működésének ellenőrzése

Fejlesztési módban a Space Game webhelye úgy van konfigurálva, hogy az 5000-s porton fusson.

Új üzenet jelenik meg a Visual Studio szerkesztőjében. Az 5000-s porton futó alkalmazás elérhető. Válassza a Megnyitás böngészőben lehetőséget a futó alkalmazás megnyitásához.

Képernyőkép a porttovábbítási kódterek üzenetéről.

Az új böngészőablakban meg kell jelennie a Space Game webhelyének:

Képernyőkép egy webböngészőről, amelyen a Space Game webhelye látható.

Használhatja az oldalt, beleértve a ranglistát is. Amikor kiválasztja egy játékos nevét, a játékos adatai megjelennek:

A Space Game ranglistát megjelenítő webböngésző képernyőképe.

Ha végzett, térjen vissza a terminálablakba, és a futó alkalmazás leállításához válassza a Ctrl+C billentyűkombinációt.

A Visual Studio Code előkészítése

Először állítsa be a Visual Studio Code-ot, hogy helyileg felépíthesse a webhelyet, és használhassa a forrásfájlokat.

A Visual Studio Code integrált terminállal rendelkezik, így egyszerre szerkesztheti a fájlokat és dolgozhat a parancssorból.

  1. Indítsa el a Visual Studio Code-ot.

  2. A Nézet menüben válassza a Terminál lehetőséget.

  3. A legördülő menüben válassza a basht:

    Képernyőkép a Bash-rendszerhéj kiválasztásáról a Visual Studio Code-ban.

    A terminálablakban kiválaszthatja a rendszeren telepített összes rendszerhéjat, például a Basht, a Zsh-t és a PowerShellt.

    Itt a Basht használja. A Git for Windows Git Basht kínál, amellyel a Git-parancsok egyszerűen futtathatók.

    Feljegyzés

    Windows rendszeren, ha nem látja a Git Basht beállításként, győződjön meg arról, hogy telepítette a Gitet, majd indítsa újra a Visual Studio Code-ot.

  4. A használni kívánt könyvtárra (például a kezdőkönyvtárra)~ való navigáláshoz futtassa a cd parancsot. Tetszés szerint másik könyvtárat is kijelölhet.

    cd ~

A Git konfigurálása

Ha még csak most ismerkedik a Gittel és a GitHubtal, először futtatnia kell néhány parancsot az identitás githez való társításához és a GitHubon való hitelesítéshez.

A Git beállításáról szóló rész részletesebben ismerteti a folyamatot.

Legalább el kell végeznie a következő lépéseket. A Visual Studio Code integrált termináljában futtassa ezeket a parancsokat.

  1. Adja meg a felhasználónevét.
  2. A véglegesítési e-mail-cím beállítása.
  3. Gyorsítótárazza a GitHub-jelszót.

Feljegyzés

Ha már használ kéttényezős hitelesítést a GitHubon, hozzon létre egy személyes hozzáférési jogkivonatot, és használja a jogkivonatot a jelszó helyett, amikor a rendszer később kéri.

A hozzáférési jogkivonatot úgy kezelje, mint egy jelszót. Tartsa biztonságos helyen.

A forráskód lekérése

Most lekérheti a forráskódot a GitHubról, és beállíthatja a Visual Studio Code-ot, hogy futtathassa az alkalmazást, és használhassa a forráskódfájlokat.

Elágazás létrehozása

A gitbeli projekt használatának első lépése egy elágazás létrehozása, amellyel dolgozhat és módosíthatja a forrásfájlokat. Egy elágaztatás egy GitHub-adattár másolatát jelenti. A másolat megtalálható a fiókjában, és lehetővé teszi, hogy a kívánt módosításokat az eredeti projekt befolyásolása nélkül végezze el.

Bár javasolhat módosításokat az eredeti projekten, ebben a leckében úgy dolgozik a Space Game webes projekttel, mintha az eredeti projekt lenne Mara és a csapat tulajdonában.

Fork a Space Game webes projektjét a GitHub-fiókjába:

  1. Egy webböngészőben nyissa meg a GitHubot, és jelentkezzen be.

  2. Lépjen a Space Game webes projektjéhez.

  3. Válassza az Elágazás lehetőséget:

    Képernyőkép a GitHubról, amelyen az Elágazás gomb helye látható.

  4. Az adattár fiókba való elágazásához kövesse az utasításokat.

Az elágazás klónozása helyileg

Most, hogy már rendelkezik a Space Game webes projekt egy példányával a GitHub-fiókjában, letöltheti vagy klónozhat egy másolatot a számítógépére, hogy helyileg is működjön vele.

A klónok, mint egy elágazás, egy adattár másolata. Adattárak klónozásakor módosításokat végezhet, ellenőrizheti, hogy az elvárásai szerint működnek-e, majd a módosításokat visszatöltheti a GitHubra. A helyi másolatot szinkronizálhatja más hitelesített felhasználók által az adattár GitHub-példányán végzett módosításokkal is.

A Space Game webprojekt számítógépre való klónozásához tegye a következőt:

  1. Nyissa meg a Space Game webes projekt elágazását a GitHubon.

  2. A parancssávon válassza a Kód lehetőséget. Megjelenik egy panel, amelyen a Klónozás lehetőség látható, amelyen a klónozás típusainak lapjai láthatók. A HTTPS lapon válassza az URL-cím melletti másolás ikont az URL-cím vágólapra másolásához.

    Képernyőkép a GitHub-adattár URL-címének és másolási gombjának helyéről.

  3. A Visual Studio Code-ban lépjen a terminálablakba, és írja be git clone, majd illessze be az URL-címet a vágólapról. A következőhöz hasonlóan kell kinéznie:

    git clone https://github.com/username/mslearn-tailspin-spacegame-web.git

  4. Cloning 'mslearn-tailspin-spacegame-web'... A művelet befejezése után írja be a következő parancsot a mslearn-tailspin-spacegame-webcímtárra való váltáshoz. Az adattár gyökérkönyvtára.

    cd mslearn-tailspin-spacegame-web

Felsőbb rétegbeli távoli adattár beállítása

A távoli egy Git-adattár, ahol a csapattagok együttműködnek (hasonlóan a GitHubon található adattárhoz). Soroljuk fel a távoli adatokat, és adjunk hozzá egy olyan távolit, amely a Microsoft adattárának másolatára mutat, hogy megkaphassa a legújabb mintakódot.

  1. A távoli eszközök listázásához futtassa a git remote következő parancsot:

    git remote -v

    Beolvasási (letöltési) és leküldéses (feltöltési) hozzáféréssel rendelkezik az adattárhoz:

    origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (fetch)
origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (push)

    Az Origin megadja az adattárat a GitHubon. Amikor egy másik adattárból elágazik a kód, gyakori, hogy az eredeti távolit (az elágazásból származót) felfelé nevezik el.

  2. Ha a Microsoft-adattárra mutató távoli névvel rendelkező felsőbb réteget szeretne létrehozni, futtassa a git remote add következő parancsot:

    git remote add upstream https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git

  3. Futtasson git remote egy második alkalommal a módosítások megtekintéséhez:

    git remote -v

    Láthatja, hogy továbbra is rendelkezik az adattárához beolvasási (letöltési) és felküldési (feltöltési) hozzáféréssel. Most már lekéréses és leküldéses hozzáféréssel is rendelkezik a Microsoft-adattárhoz:

    origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (fetch)
origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (push)
upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git (fetch)
upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git (push)

A projekt megnyitása a fájlkezelőben

A Visual Studio Code-ban a terminálablak a Space Game webprojekt gyökérkönyvtárára mutat. Nyissuk meg a projektet a struktúrájának megtekintéséhez és a fájlok használatához.

  1. A projekt megnyitásának legegyszerűbb módja a Visual Studio Code újbóli megnyitása az aktuális könyvtárban. Ehhez futtassa a következő parancsot az integrált terminálról:

    code -r .

    Megjelenik a könyvtár és a fájlok fája a fájlkezelőben.

  2. Nyissa meg újra az integrált terminált. A terminál a webes projekt gyökeréhez helyezi.

Ha a code parancs sikertelen, hozzá kell adnia a Visual Studio Code-ot a rendszer PATH-hoz. Ehhez tegye a következőket:

  1. A Visual Studio Code-ban válassza az F1 lehetőséget, vagy válassza a Parancskatalógus megtekintése>lehetőséget a parancskatalógus eléréséhez.

  2. A parancskatalógusban adja meg a Shell-parancsot: Telepítse a "code" parancsot a PATH-ban.

  3. Ismételje meg az előző eljárást a projekt fájlkezelőben való megnyitásához.

A webalkalmazás létrehozása és futtatása

Most, hogy már rendelkezik a webalkalmazással, helyileg is létrehozhatja és futtathatja.

  1. A Visual Studio Code-ban keresse meg a terminálablakot, és az alkalmazás létrehozásához futtassa a dotnet build következő parancsot:

    dotnet build --configuration Release

    Feljegyzés

    Ha a dotnet parancs nem található, tekintse át a modul elején található előfeltételeket. Előfordulhat, hogy telepítenie kell a .NET SDK-t.

    A .NET-projektek általában két buildkonfigurációval járnak: hibakereséssel és kiadással. A hibakeresési buildek nincsenek teljesítményre optimalizálva. Megkönnyítik a program nyomon követését és a problémák elhárítását. Itt a kiadási konfigurációt választva láthatja, hogy a webalkalmazás működés közben van-e.

  2. A terminálablakban az alkalmazás futtatásához futtassa a következő dotnet run parancsot:

    dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web

    A .NET-megoldásfájlok több projektet is tartalmazhatnak. Az --project argumentum a Space Game webalkalmazás projektje.

Az alkalmazás működésének ellenőrzése

Fejlesztési módban a Space Game webhelye úgy van konfigurálva, hogy az 5000-s porton fusson.

Egy új böngészőlapon navigáljon a futó alkalmazás megtekintéséhez http://localhost:5000 :

Képernyőkép egy webböngészőről, amelyen a Space Game webhelye látható.

Tipp.

Ha a böngészőben adatvédelmi vagy tanúsítványhiba miatt hibaüzenet jelenik meg, a futó alkalmazás leállításához válassza a Ctrl+C billentyűkombinációt a terminálon.

Ezután futtassadotnet dev-certs https --trust, és válassza az Igen lehetőséget, amikor a rendszer kéri. További információkért tekintse meg ezt a blogbejegyzést.

Miután a számítógép megbízik a helyi SSL-tanúsítványban, a futó alkalmazás megtekintéséhez futtassa dotnet run a parancsot másodszor, és lépjen http://localhost:5000 egy új böngészőlapra.

Használhatja az oldalt, beleértve a ranglistát is. Amikor kiválasztja egy játékos nevét, a játékos adatai megjelennek:

A Space Game ranglistát megjelenítő webböngésző képernyőképe.

Ha végzett, térjen vissza a terminálablakba, és a futó alkalmazás leállításához válassza a Ctrl+C billentyűkombinációt.