Упражнение. Получение примера приложения

  • 10 мин

Подготовьтесь к созданию конвейера CI с помощью Microsoft Azure Pipelines. Первым шагом является создание и запуск веб-приложения Space Game . Общие сведения о том, как создавать программное обеспечение вручную, подготавливает вас к повтору процесса в конвейере.

Именно это сделает Мара, и, следуя инструкциям, вы сможете это повторить.

Создание личного маркера доступа Azure DevOps

  1. Войдите в свою организацию (https://dev.azure.com/{yourorganization}). Если у вас еще нет организации Azure DevOps, создайте бесплатную организацию перед началом работы. После входа в систему, если у вас несколько организаций, выберите Azure DevOps и перейдите в организацию, которую вы планируете использовать для выполнения этого модуля. В этом примере используется fabrikamимя организации.

    Screenshot of choosing your Azure DevOps organization.Снимок экрана: выбор организации Azure DevOps.

  2. На домашней странице откройте параметры пользователя и выберите личные маркеры доступа.

  3. Выберите +Создать маркер.

  4. Присвойте маркеру имя, которое вы предпочитаете. Маркер используется при регистрации агента в организации Azure DevOps, чтобы сохранить срок действия по умолчанию.

  5. Выберите "Настраиваемый" и выберите "Показать все области".

    Screenshot of viewing all scopes for a personal access token.Снимок экрана: просмотр всех областей для личного маркера доступа.

  6. Выберите следующую область: пулы агентов (чтение и управление) и нажмите кнопку "Создать".

    Screenshot of selecting agent pool permissions for a personal access token.Снимок экрана: выбор разрешений пула агентов для личного маркера доступа.

  7. После завершения скопируйте маркер и сохраните его в безопасном расположении. Для вашей безопасности он не будет отображаться снова.

Предупреждение

Обработайте и используйте PAT, например пароль, и сохраните его в секрете.

Создание вилки

В первую очередь, для работы с проектом в Git нужно создать вилку, чтобы можно было работать с исходными файлами и менять их. Вилка — это копия репозитория GitHub. Копия существует в вашей учетной записи и позволяет вносить изменения, не затрагивая исходный проект.

Хотя вы можете предложить изменения исходного проекта, на этом занятии вы работаете с веб-проектом Space Game , как будто это был исходный проект, принадлежащий Маре и команде.

Примечание.

Если вы ранее вилировали этот репозиторий, например, если вы ранее выполнили этот модуль или другой модуль обучения Tailspin Toys, рекомендуется удалить вилку и создать новый вилку, выполнив следующие действия. Если вы не хотите удалить вилку, убедитесь, что вы синхронизируете вилку.

Давайте создадим вилку веб-проекта Space Game в вашей учетной записи GitHub.

  1. В веб-браузере перейдите в GitHub и войдите в систему.

  2. Перейдите в веб-проект Space Game .

  3. Выберите Создать вилку:

    Screenshot of GitHub showing the location of the Fork button.Снимок экрана GitHub с расположением кнопки Fork.

  4. Чтобы вставить репозиторий в учетную запись, следуйте инструкциям.

Настройка секретов для локального агента

Перед созданием пространства codespace вы создадите несколько секретов, которые помогают запустить локально размещенный агент Azure DevOps. В рабочей среде вы не хотите использовать автономный агент в GitHub Codespaces. Тем не менее, так как ваша команда использует codespaces для тестирования, это хорошее временное решение для его использования при создании конвейеров.

  1. Перейдите в вилку репозитория GitHub и выберите "Параметры секретов>и переменных>Codespaces".

    Screenshot of GitHub Codespaces secrets. Снимок экрана: секреты GitHub Codespaces.

  2. Создайте следующие секреты репозитория Codespaces.

    Имя. Значение
    ADO_ORG Имя организации Azure DevOps, которую вы используете для выполнения этого модуля. В этом примере fabrikam — имя организации. Это имя организации должно совпадать с именем организации, используемой при создании PAT на предыдущем шаге.
    ADO_PAT Личный маркер доступа, созданный на предыдущем шаге.

    Совет

    В этом модуле обучения агент назначается пулу агентов Default . Если вы не хотите запускать агент в Default пуле (например, вы запускаете этот модуль обучения с помощью рабочей среды Azure DevOps и у вас есть другие агенты в Default пуле), можно создать секрет с именем ADO_POOL_NAME и указать имя используемого пула агентов. Если этот секрет не указан, Default используется пул.

Настройка пространств кода

Затем вы настроите пространства Кода, чтобы создать веб-сайт, работать с исходными файлами и запускать конвейер с помощью локального агента.

  1. В вилке репозитория GitHub выберите "Код", снова выберите "Код", перейдите на вкладку "Пространства кода" и создайте + новое пространство Codespace.

    Screenshot of create a new Codespace with options. Снимок экрана: создание пространства кода с параметрами.

  2. Дождитесь сборки пространства Codespace. Эта сборка может занять несколько минут, но это необходимо сделать только один раз на этом шаге модуля обучения.

    По завершении сборки вы будете перенаправлены в онлайн-версию Visual Studio Code. Пространство Codespace поставляется с новой установкой Visual Studio Code, аналогичной новой установке Visual Studio Code на локальном компьютере. При первом запуске Codespace Visual Studio Code в Интернете может предложить вам предоставить определенные конфигурации или попросить вас о параметрах. Вы можете выбрать настройки, которые соответствуют стилю использования Visual Studio Code.

Настройка вышестоящего удаленного репозитория

Удаленный репозиторий — это репозиторий Git, в котором члены команды работают совместно (как в репозитории GitHub). Давайте выведем список удаленных репозиториев и добавим удаленный репозиторий, указывающий на копию репозитория Майкрософт, чтобы вы могли получить актуальный пример кода.

  1. В редакторе Visual Studio Code в Интернете перейдите в окно терминала и выберите bash с правой стороны.

    Screenshot of terminal window in Visual Studio Code online editor. Снимок экрана: окно терминала в редакторе Visual Studio Code в Интернете.

  2. Чтобы получить список удаленных репозиториев, выполните команду git remote:

    git remote -v

    У вас есть доступ для получения (скачивания) и отправки (передачи) репозитория.

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

    Источник указывает репозиторий на сайте GitHub. Когда вы создаете вилку кода из другого репозитория, исходный удаленный репозиторий (из которого создается вилка) обычно называется вышестоящим.

  3. Чтобы создать удаленный репозиторий с именем upstream, указывающий на репозиторий Майкрософт, выполните эту команду git remote add:

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

  4. Запустите git remote второй раз, чтобы увидеть изменения:

    git remote -v

    Вы видите, что у вас все еще есть доступ для получения (загрузки) и отправки (передачи) репозитория. Кроме того, теперь у вас есть доступ на получение из репозитория Майкрософт и отправку в него:

    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)

Создание и запуск веб-приложения

  1. В редакторе Visual Studio Code в Интернете перейдите в окно терминала и выполните следующую dotnet build команду:

    dotnet build --configuration Release

  2. Чтобы запустить приложение, в окне терминала выполните эту команду dotnet run:

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

    Файлы решения .NET могут содержать несколько проектов. Аргумент --project указывает проект для веб-приложения Space Game.

Убедитесь, что приложение выполняется

В режиме разработки веб-сайт Space Game настроен для запуска через порт 5000.

В редакторе Visual Studio появится новое сообщение. Приложение, работающее через порт 5000, доступно. Выберите "Открыть в браузере" , чтобы перейти к работающему приложению.

Screenshot of port forwarding Codespaces message. Снимок экрана: сообщение о перенаправлении портов Codespaces.

В новом окне браузера появится веб-сайт Space Game:

Screenshot of a web browser showing the Space Game web site.Снимок экрана веб-браузера с веб-сайтом Space Game.

Вы можете взаимодействовать со страницей, включая список лидеров. При выборе имени игрока вы увидите сведения об этом игроке:

Screenshot of a web browser showing the Space Game leaderboard.Снимок экрана веб-браузера со списком лидеров Space Game.

По завершении вернитесь в окно терминала и остановите работающее приложение, нажмите клавиши CTRL + C.

Подготовка Visual Studio Code

Сначала настройте Visual Studio Code, чтобы создать веб-сайт локально и работать с исходными файлами.

В Visual Studio Code есть встроенный терминал, поэтому вы можете редактировать файлы и работать с командной строкой в одном расположении.

  1. Запустите Visual Studio Code.

  2. В меню "Вид" выберите терминал.

  3. В раскрывающемся списке выберите bash:

    Screenshot of selecting the Bash shell in Visual Studio Code.Снимок экрана выбора оболочки Bash в Visual Studio Code.

    Окно терминала позволяет выбрать любую оболочку, установленную в системе, например Bash, Zsh и PowerShell.

    Здесь вы используете Bash. Git для Windows предоставляет Git Bash, который позволяет легко выполнять команды Git.

    Примечание.

    В Windows, если вы не видите Git Bash в списке в качестве параметра, убедитесь, что вы установили Git, а затем перезапустите Visual Studio Code.

  4. Чтобы перейти к каталогу, из которого требуется работать, например в домашнем cd каталоге (~), выполните команду. Чтобы выбрать другой каталог, можно выбрать другой каталог.

    cd ~

Настройка Git

Если вы не знакомы с Git и GitHub, сначала необходимо выполнить несколько команд, чтобы связать удостоверение с Git и пройти проверку подлинности с помощью GitHub.

В разделе Настройка Git этот процесс объясняется более подробно.

Как минимум, необходимо выполнить следующие действия. В интегрированном терминале Visual Studio Code выполните следующие команды.

  1. Задайте имя пользователя.
  2. Задайте адрес электронной почты фиксации.
  3. Кэшируйте пароль GitHub.

Примечание.

Если вы уже используете двухфакторную проверку подлинности с GitHub, создайте личный маркер доступа и используйте маркер вместо пароля при появлении запроса позже.

Обратитесь к маркеру доступа, как и к паролю. Держите его в безопасном месте.

Получение исходного кода

Теперь вы получите исходный код из GitHub и настроите Visual Studio Code, чтобы запустить приложение и работать с файлами исходного кода.

Создание вилки

В первую очередь, для работы с проектом в Git нужно создать вилку, чтобы можно было работать с исходными файлами и менять их. Вилка — это копия репозитория GitHub. Копия существует в вашей учетной записи и позволяет вносить изменения, не затрагивая исходный проект.

Хотя вы можете предложить изменения исходного проекта, на этом занятии вы работаете с веб-проектом Space Game , как будто это был исходный проект, принадлежащий Маре и команде.

Давайте создадим вилку веб-проекта Space Game в вашей учетной записи GitHub.

  1. В веб-браузере перейдите в GitHub и войдите в систему.

  2. Перейдите в веб-проект Space Game .

  3. Выберите Создать вилку:

    Screenshot of GitHub showing the location of the Fork button.Снимок экрана GitHub с расположением кнопки Fork.

  4. Чтобы вставить репозиторий в учетную запись, следуйте инструкциям.

Клонирование вилки локально

Теперь у вас есть копия веб-проекта Space Game в вашей учетной записи GitHub, и вы можете скачать или клонировать ее на компьютер, чтобы работать с ней локально.

Клон, как и вилка, является копией репозитория. Когда вы клонируете репозиторий, вы можете вносить изменения, проверять, что они работают, как ожидается, а затем отправлять эти изменения обратно на GitHub. Вы также можете синхронизировать локальную копию с изменениями, внесенными другими пользователями, прошедшими проверку подлинности, с копией репозитория GitHub.

Чтобы клонировать веб-проект Space Game на компьютер:

  1. Перейдите в вилку веб-проекта Space Game на сайте GitHub.

  2. На панели команд выберите элемент Code (Код). Отобразится панель с параметром "Клонировать" и вкладками для разных типов клонирования. На вкладке HTTPS нажмите значок копирования рядом с URL-адресом, чтобы скопировать URL-адрес в буфер обмена.

    Screenshot of locating the URL and copy button from the GitHub repository.Снимок экрана расположения URL-адреса и кнопки копирования для репозитория GitHub.

  3. В Visual Studio Code перейдите в окно терминала и введите git clone, а затем вставьте URL-адрес из буфера обмена. Это должно выглядеть примерно так:

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

  4. Когда операция Cloning 'mslearn-tailspin-spacegame-web'... завершится, введите приведенную ниже команду, чтобы перейти в каталог mslearn-tailspin-spacegame-web. Корневой каталог репозитория.

    cd mslearn-tailspin-spacegame-web

Настройка вышестоящего удаленного репозитория

Удаленный репозиторий — это репозиторий Git, в котором члены команды работают совместно (как в репозитории GitHub). Давайте выведем список удаленных репозиториев и добавим удаленный репозиторий, указывающий на копию репозитория Майкрософт, чтобы вы могли получить актуальный пример кода.

  1. Чтобы получить список удаленных репозиториев, выполните команду git remote:

    git remote -v

    У вас есть доступ для получения (скачивания) и отправки (передачи) репозитория.

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

    Источник указывает репозиторий на сайте GitHub. Когда вы создаете вилку кода из другого репозитория, исходный удаленный репозиторий (из которого создается вилка) обычно называется вышестоящим.

  2. Чтобы создать удаленный репозиторий с именем upstream, указывающий на репозиторий Майкрософт, выполните эту команду git remote add:

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

  3. Запустите git remote второй раз, чтобы увидеть изменения:

    git remote -v

    Вы видите, что у вас все еще есть доступ для получения (загрузки) и отправки (передачи) репозитория. Кроме того, теперь у вас есть доступ на получение из репозитория Майкрософт и отправку в него:

    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)

Откройте проект в обозревателе файлов

В Visual Studio Code окно терминала указывает на корневой каталог веб-проекта Space Game. Давайте откроем проект, чтобы просмотреть его структуру и приступить к работе с файлами.

  1. Самый простой способ открыть проект заключается в повторном открытии Visual Studio Code в текущем каталоге. Для этого во встроенном терминале выполните следующую команду.

    code -r .

    В обозревателе вы увидите каталог и дерево файлов.

  2. Откройте интегрированный терминал. Вы будете перемещены в корень веб-проекта.

Если выполнение команды code завершается неудачно, необходимо добавить Visual Studio Code в системную переменную PATH. Для этого:

  1. В Visual Studio Code выберите F1 или Представление>Палитра команд для доступа к палитре команд.

  2. В палитре команд введите команду shell: установите команду "code" в PATH.

  3. Повторите предыдущую процедуру, чтобы открыть проект в проводнике.

Создание и запуск веб-приложения

Теперь, когда у вас есть веб-приложение, вы можете создать и запустить его локально.

  1. В Visual Studio Code перейдите в окно терминала и выполните следующую команду dotnet build для сборки приложения:

    dotnet build --configuration Release

    Примечание.

    Если команда dotnet не найдена, проверьте выполнение требований, приведенных в начале этого модуля. Возможно, необходимо установить пакет SDK для .NET.

    Проекты .NET обычно имеют две конфигурации сборки: отладка и выпуск. Отладка сборок не оптимизирована для производительности. Они упрощают трассировку по программе и устраняют неполадки. Выберите здесь конфигурацию выпуска, чтобы увидеть веб-приложение в действии.

  2. Чтобы запустить приложение, в окне терминала выполните эту команду dotnet run:

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

    Файлы решения .NET могут содержать несколько проектов. Аргумент --project указывает проект для веб-приложения Space Game.

Убедитесь, что приложение выполняется

В режиме разработки веб-сайт Space Game настроен для запуска через порт 5000.

На новой вкладке браузера перейдите к http://localhost:5000 просмотру работающего приложения:

Screenshot of a web browser showing the Space Game web site.Снимок экрана веб-браузера с веб-сайтом Space Game.

Совет

Если вы видите ошибку в браузере, связанном с ошибкой конфиденциальности или сертификата, чтобы остановить работающее приложение, нажмите клавиши CTRL + C из терминала.

Затем выполните команду dotnet dev-certs https --trust и выберите Yes (Да) при появлении запроса. Дополнительные сведения см. в этой записи блога.

После того как компьютер доверяет локальному SSL-сертификату, чтобы увидеть запущенное приложение, запустите dotnet run команду во второй раз и перейдите http://localhost:5000 на новую вкладку браузера.

Вы можете взаимодействовать со страницей, включая список лидеров. При выборе имени игрока вы увидите сведения об этом игроке:

Screenshot of a web browser showing the Space Game leaderboard.Снимок экрана веб-браузера со списком лидеров Space Game.

Когда закончите, вернитесь в окно терминала и нажмите клавиши CTRL+C, чтобы остановить работающее приложение.