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

  • 10 мин

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

Именно это сделает Мара, и, следуя инструкциям, вы сможете это повторить. Все участники команды, включая Мару, используют Visual Studio Code для сборки и запуска приложений. Тем не менее команда использует централизованную систему управления версиями для кода, и Маре больше нравится использовать GitHub, поэтому она выбирает его. Если вы раньше не использовали GitHub, не беспокойтесь. Просто повторяйте. Все объяснения приводятся здесь и в последующих модулях.

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

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

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

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

  2. В меню View (Вид) выберите Terminal (Терминал).

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

    Снимок экрана выбора оболочки 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. Выберите Fork (Вилка).

    Снимок экрана GitHub с расположением кнопки Fork.

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

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

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

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

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

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

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

    Снимок экрана расположения 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)

    Origin указывает ваш репозиторий на сайте 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)

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

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

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

    code -r .

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

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

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

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

  2. В палитре команд введите Shell Command: Install 'code' command in 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, чтобы увидеть работающее приложение.

Вы увидите примерно такой результат.

Снимок экрана веб-браузера с веб-сайтом Space Game.

Совет

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

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

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

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

Снимок экрана веб-браузера со списком лидеров Space Game.

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