Gyakorlat – Az adattár közzététele

Befejeződött

A játékvállalatnál a webhely fejlesztői felajánlották, hogy segítenek a Bicep-sablon megírásában. Azt mondta nekik, hogy egy adattárban tartja a Bicep-kódot, és megkérték, hogy tegye közzé az adattárat. Ebben a gyakorlatban közzé fogja tenni a Git-adattárat, hogy munkatársai megtekinthetik a fájlokat, és együttműködhessenek Önnel.

A folyamat során a következőt fogja elvégezni:

  • Hozzon létre egy új távoli adattárat.
  • Konfigurálja a helyi Git-adattárat úgy, hogy integrálható legyen a távoli adattárral.
  • A módosítások leküldése a helyi adattárból a távoli adattárba.
  • Ellenőrizze, hogy a módosítások megjelennek-e a távoli adattárban.

Adattár létrehozása a GitHubon

  1. Egy böngészőben nyissa meg a GitHubot. Jelentkezzen be a GitHub-fiókjával, vagy hozzon létre egy új fiókot, ha nincs.

  2. Válassza az ablak jobb felső sarkában található plusz (+) ikont, majd válassza az Új adattár lehetőséget.

    Screenshot of the GitHub interface that shows the menu for creating a new repository.

  3. Adja meg az új adattár részleteit:

    • Tulajdonos: Válassza ki a GitHub-felhasználónevet a legördülő menüből. A képernyőképen mygithubuser az adattár tulajdonosának GitHub-fiókneve látható. A fiók nevét a modul későbbi részében fogja használni.
    • Adattár neve: Adjon meg egy értelmes, de rövid nevet. Ehhez a modulhoz használja a következőt toy-website-workflow: .
    • Leírás: Adjon meg egy leírást, amely segít másoknak megérteni az adattár célját.
    • Privát: A GitHub használatával nyilvános és privát adattárakat hozhat létre. Hozzon létre egy privát adattárat, mert csak a szervezeten belüli személyek férhetnek hozzá a felhasználói webhely fájljaihoz. Később hozzáférést adhat másoknak.

    Miután végzett, az adattár konfigurációjának az alábbi képernyőképhez hasonlóan kell kinéznie:

    Screenshot of the GitHub interface that shows the configuration for the repository to create.

  4. Válassza a Create repository (Adattár létrehozása) gombot.

  5. A megjelenő megerősítő lapon jegyezze fel az adattár URL-címét. A másolás gombbal másolhatja az URL-címet. Hamarosan használni fogja.

    Screenshot of the GitHub interface that shows the new repository's details, with the repository's URL highlighted.

Adattár létrehozása az Azure-adattárakban

  1. Egy böngészőben nyissa meg az Azure DevOpsot. Jelentkezzen be, vagy hozzon létre egy új fiókot.

  2. Ha új fiókot hoz létre, kövesse az utasításokat egy Azure DevOps-szervezet létrehozásához. Az Azure DevOps ezután megkéri, hogy hozzon létre egy új projektet. Folytassa a következő lépésben.

    Ha bejelentkezett egy meglévő Azure DevOps-szervezetbe, az Új projekt gombra kattintva hozzon létre egy új projektet.

    Screenshot of the Azure DevOps interface that shows the button to create a new project.

  3. Adja meg az új projekt részleteit:

    • Projekt neve: Adjon meg egy értelmes, de rövid nevet. Ehhez a modulhoz használja a következőt toy-website: .
    • Leírás: Adjon meg egy leírást, amely segít másoknak megérteni az adattár célját.
    • Láthatóság: Az Azure DevOps használatával nyilvános és privát adattárakat hozhat létre. Hozzon létre egy privát adattárat, mert csak a szervezeten belüli személyek férhetnek hozzá a webhely fájljaihoz. Később hozzáférést adhat másoknak.

    Ha végzett, a projektkonfigurációnak az alábbi képernyőképhez hasonlóan kell kinéznie:

    Screenshot of the Azure DevOps interface that shows the configuration for the project to create.

  4. Válassza a Létrehozás lehetőséget.

  5. A megjelenő projektlapon válassza az Adattár menüelemet.

    Screenshot of the Azure DevOps interface that shows the menu on the project page, with the Repos item highlighted.

  6. Jegyezze fel az adattár URL-címét. A másolás gombbal másolhatja az URL-címet. Hamarosan használni fogja.

    Screenshot of the Azure Repos interface that shows the repository's details, with the repository's U R L highlighted.

Git-jelszó létrehozása

Ha macOS rendszeren használja az Azure Repost a Visual Studio Code-ból, a bejelentkezéshez használt jelszótól eltérő jelszót kell használnia.

Megjegyzés:

Ha Windowst használ, ugorjon a következő szakaszra, konfigurálja a helyi Git-adattárat.

  1. Válassza a Git-hitelesítő adatok létrehozása gombot.

    Az Azure Repos véletlenszerű jelszót hoz létre a használathoz.

  2. Jegyezze fel a Jelszó értéket. Hamarosan használni fogja.

Tartsa nyitva a böngészőt. A gyakorlat későbbi részében ismét ellenőrizni fogja az adattárat.

A helyi Git-adattár konfigurálása

  1. Győződjön meg arról, hogy a ágon van, ha beírja a következő parancsot a Visual Studio Code termináljába:

    git checkout main
    
  2. Írja be a következő parancsot a helyi adattár és a létrehozott távoli adattár integrálásához. Cserélje le YOUR_REPOSITORY_URL a korábban mentett URL-címre.

    git remote add origin YOUR_REPOSITORY_URL
    

    Figyelje meg, hogy a parancs használatával git remote add új hivatkozást hoz létre egy távoli adattárra. Nevezze el a hivatkozást origin, amely a standard név.

  3. Ellenőrizze, hogy a távoli eszköz létrejött-e.

    git remote -v
    

    A kimenet a példához hasonlóan fog kinézni.

    origin  https://github.com/mygithubuser/toy-website.git (fetch)
    origin  https://github.com/mygithubuser/toy-website.git (push)
    
    origin https://myuser@dev.azure.com/myuser/toy-website/_git/toy-website (fetch)
    origin https://myuser@dev.azure.com/myuser/toy-website/_git/toy-website (push)
    

Módosítások leküldése a Git parancssori felületével

  1. A Visual Studio Code terminálban adja meg a következő parancsot:

    git push -u origin main
    

    Mivel az aktuális helyi ág a , ez a parancs tájékoztatja a Gitet, hogy a helyi főágnyomon követi a távoli adattár fő ágát. Emellett leküldi a véglegesítéseket a helyi adattárból a távoli adattárba.

  2. Ez az első alkalom, hogy ezt a távoli adattárat használja, ezért a terminál kéri, hogy válassza ki a hitelesítés módját. Válassza ki a böngészőt használni kívánt lehetőséget.

  3. A böngésző utasításait követve jelentkezzen be, és engedélyezze a Visual Studio Code számára a GitHub-adattár elérését.

  4. A terminálablakban a Git az alábbi példához hasonló kimenetet jelenít meg:

    Enumerating objects: 16, done.
    Counting objects: 100% (16/16), done.
    Delta compression using up to 8 threads
    Compressing objects: 100% (11/11), done.
    Writing objects: 100% (16/16), 2.30 KiB | 785.00 KiB/s, done.
    Total 16 (delta 2), reused 0 (delta 0), pack-reused 0
    remote: Resolving deltas: 100% (2/2), done.
    To https://github.com/mygithubuser/toy-website.git
     * [new branch]      main -> main
    Branch 'main' set up to track remote branch 'main' from 'origin'.
    

    Ez a kimenet azt jelzi, hogy a Git sikeresen leküldte az adattár tartalmát a távoli adattárba.

  1. A Visual Studio Code terminálban adja meg a következő parancsot:

    git push -u origin main
    

    Mivel az aktuális helyi ág a , ez a parancs tájékoztatja a Gitet, hogy a helyi főágnyomon követi a távoli adattár fő ágát. Emellett leküldi a véglegesítéseket a helyi adattárból a távoliba.

  2. Ez az első alkalom, hogy ezt az adattárat használja, ezért a rendszer kérni fogja, hogy jelentkezzen be.

    Ha Windowst használ, adja meg ugyanazokat a hitelesítő adatokat, amelyeket a gyakorlat korábbi részében az Azure DevOpsba való bejelentkezéshez használt.

    MacOS használata esetén illessze be a gyakorlatban korábban létrehozott jelszót.

  3. A terminálablakban a Git az alábbi példához hasonló kimenetet jelenít meg:

    Enumerating objects: 16, done.
    Counting objects: 100% (16/16), done.
    Delta compression using up to 8 threads
    Compressing objects: 100% (11/11), done.
    Writing objects: 100% (16/16), 2.30 KiB | 785.00 KiB/s, done.
    Total 16 (delta 2), reused 0 (delta 0), pack-reused 0
    remote: Analyzing objects... (16/16) (5 ms)
    remote: Storing packfile... done (165 ms)
    remote: Storing index... done (75 ms)
    To https://dev.azure.com/myuser/toy-website/_git/toy-website
     * [new branch]      main -> main
    Branch 'main' set up to track remote branch 'main' from 'origin'.
    

    Ez a kimenet azt jelzi, hogy a Git sikeresen leküldte az adattár tartalmát a távoli adattárba.

README-fájl hozzáadása

Most, hogy munkatársai használni fogják az adattárat, fontos, hogy létrehozhasson egy README.md fájlt, amely segít nekik megérteni, hogy mire való az adattár, és hogyan kezdhetik el az első lépéseket.

  1. Nyissa meg az Explorert a Visual Studio Code-ban.

  2. Adjon hozzá egy új fájlt az aktuális mappastruktúra gyökerénél, és nevezze el README.md.

  3. Másolja a következő szöveget a fájlba:

    # Toy company's website
    
    This repository contains the website for our toy company.
    
    ## How to use
    
    The Azure infrastructure is defined using [Bicep](/azure/azure-resource-manager/bicep).
    
    To deploy the website's Azure resources, use the _deploy/main.bicep_ file.
    

    Tipp.

    Ez egy helyőrző README-fájl, így nem sok hasznos tartalommal rendelkezik. Ha saját Git-adattárakkal dolgozik, hozzon létre egy README-fájlt, amely segít megérteni, hogyan kezdheti el a kódot. Tekintsd úgy, mint egy egyszerű kézikönyvet a projekthez.

  4. Mentse a fájlt.

  5. A fájl előkészítése és véglegesítése a helyi Git-adattárban. Eldöntheti, hogy a Git CLI-vel vagy a Visual Studio Code-ban a Source Control használatával véglegesíti-e a kötelezettséget.

Újra leküldés a Visual Studio Code használatával

Most, hogy véglegesített egy új fájlt, újra le kell küldenie a módosításokat, hogy a távoli fájl tartalmazza a legújabb fájlokat. Ezúttal a Visual Studio Code-ot használja a távoli adattárba való leküldéshez.

  1. Nyílt forráskódú vezérlő a Visual Studio Code-ban.

  2. Jelölje ki a Forrásvezérlő eszköztár jobb oldalán három ponttal rendelkező ikont, majd válassza a Leküldés lehetőséget.

    Screenshot of Visual Studio Code that shows the Source Control menu, with the Push menu item highlighted.

    Figyelje meg, hogy a rendszer nem kéri újra a bejelentkezést. A hitelesítő adatok meg vannak osztva a Git CLI és a Visual Studio Code között.

A változások ellenőrzése a GitHubon

Most, hogy leküldte a módosításokat a távoli adattárba, megvizsgálhatja az adattár tartalmát a GitHubon.

  1. A böngészőben frissítse az adattár oldalát.

  2. Figyelje meg, hogy a létrehozott fájlok megjelennek, és megjelenik a README.md fájl.

    Screenshot of the GitHub interface that shows the repository, including the folder and file structure.

  3. A GitHub felületén tallózva megismerheti a fájlokat, és láthatja, hogy a módosítások mind megjelennek. Mivel a GitHub tartalmazza az egyes fájlok módosításainak teljes listáját, a Visual Studio Code-ban végzett munka során is megtekintheti a fájlok előzményeit.

Az Azure-adattárak változásainak ellenőrzése

Most, hogy leküldte a módosításokat a távoli adattárba, megvizsgálhatja az Adattár tartalmát az Azure-adattárakban.

  1. A böngészőben frissítse az Adattárak lapot.

  2. Figyelje meg, hogy a létrehozott fájlok megjelennek, és megjelenik a README.md fájl.

    Screenshot of the Azure DevOps interface that shows the repository, including the folder and file structure.

  3. A GitHub felületén tallózva megismerheti a fájlokat, és láthatja, hogy a módosítások mind megjelennek. Mivel a GitHub tartalmazza az egyes fájlok módosításainak teljes listáját, a Visual Studio Code-ban végzett munka során is megtekintheti a fájlok előzményeit.