Упражнение. Отправка изменений через конвейер

19 мин

В этом уроке вы опробуете на практике полный рабочий процесс работы с кодом, отправив небольшое изменение на веб-сайт игры Space Game в GitHub.

Мара получила задачу изменения текста на домашней странице веб-сайта Index.cshtml. В этом уроке вы будете следовать вместе.

Давайте кратко рассмотрим шаги, которые необходимо выполнить для выполнения задачи:

Синхронизация локального репозитория с последней main ветвью на GitHub
Создание ветви для хранения изменений
Внесите необходимые изменения кода и проверьте их локально.
Отправка ветви в GitHub
Слияние последних изменений из main ветви на GitHub в локальную рабочую ветвь и убедитесь, что изменения по-прежнему работают.
Отправка оставшихся изменений, просмотр azure Pipelines сборки приложения и отправка запроса на вытягивание

Получение последней главной ветви

В предыдущем уроке вы создали запрос на вытягивание и объединили ветвь code-workflow в main ветвь на GitHub. Теперь необходимо вернуть изменения main в локальную ветвь.

Команда git pull извлекает последний код из удаленный репозиторий и объединяет его в локальный репозиторий. Так вы будете знать, что работаете с последней версией базы кода.

У себя в терминале выполните команду git checkout main, чтобы перейти к ветви main:
```
git checkout main
```
Чтобы извлечь последние изменения, выполните следующую git pull команду:
```
git pull origin main
```
Список измененных файлов можно просмотреть. В качестве дополнительного шага можно открыть файл azure-pipelines.yml , чтобы убедиться, что он содержит полную конфигурацию сборки.

Помните, что репозиторий Git, в котором участники группы совместно работают (например, на GitHub) называются удаленным. origin здесь указывает ваш репозиторий на GitHub.

Позже вы получите начальный код из репозитория Microsoft GitHub, известного как вышестоящий.

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

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

В Visual Studio Code перейдите в окно терминала и выполните следующую dotnet build команду, чтобы создать приложение:
```
dotnet build --configuration Release
```
Выполните следующую dotnet run команду, чтобы запустить приложение:
```
dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web
```
Совет

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

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

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

Убедитесь, что приложение запущено

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

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

Вы увидите следующее:

Screenshot of the Space Game website running in a web browser.

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

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

Создание ветвь компонента

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

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

Перед созданием ветви рекомендуется придерживаться соглашения об именовании. Например, если ваша ветвь работает над новой функцией, можно использовать feature/<branch-name>. Для исправления ошибок можно использовать bugfix/<bug-number>. В этом примере имя ветви будет feature/home-page-text.

В терминале выполните следующую git checkout команду:

git checkout -B feature/home-page-text

Как и раньше, ветвь feature/home-page-text основана на main.

Внесите изменения и протестируйте его локально

В Visual Studio Code откройте index.cshtml в каталоге Tailspin.SpaceGame.Web/Views/Home .
Найдите этот текст в верхней части страницы:
```
<p>An example site for learning</p>
```
Совет

Visual Studio Code также предоставляет простой способ поиска текста в файлах. Чтобы получить доступ к области поиска, выберите значок лупы в боковой области.
Замените текст на предыдущем шаге следующим "неправильным" текстом, а затем сохраните файл:
```
<p>Welcome to the oficial Space Game site!</p>
```
Обратите внимание, что слово "oficial" намеренно неправильно введено. Далее в этом модуле мы рассмотрим эту ошибку.
В терминале выполните следующую dotnet build команду, чтобы создать приложение:
```
dotnet build --configuration Release
```
Выполните следующую dotnet run команду, чтобы запустить приложение:
```
dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web
```
На новой вкладке браузера перейдите к http://localhost:5000 просмотру работающего приложения.

Вы увидите, что домашняя страница содержит обновленный текст.

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

Фиксация и отправка ветви

Здесь вы настроите изменения в Index.cshtml, зафиксируйте изменение в ветви и отправьте ветвь до GitHub.

Выполните команду git status, чтобы проверить наличие незафиксированных изменений в вашей ветви:
```
git status
```
Вы увидите, что есть изменения в Index.cshtml. Как и раньше, следующий шаг — убедиться, что Git отслеживает этот файл, что называется помещением на промежуточное хранение и обработку.
Чтобы поместить Index.cshtml на промежуточное хранение и обработку, выполните следующую команду git add:
```
git add Tailspin.SpaceGame.Web/Views/Home/Index.cshtml
```
Выполните следующую команду git commit, чтобы зафиксировать промежуточный файл в ветви feature/home-page-text:
```
git commit -m "Improve the text at the top of the home page"
```
Выполните следующую команду git push, чтобы отправить (загрузить) ветвь feature/home-page-text в свой репозиторий на GitHub:
```
git push origin feature/home-page-text
```
Вы также можете выбрать ветвь в GitHub из раскрывающегося списка "Ветвь".

Посмотрите, как Azure Pipelines выполняет сборку приложения

Как и ранее, Azure Pipelines автоматически помещает сборку в очередь при отправке изменений в GitHub.

В качестве дополнительного шага трассировка сборки по мере перемещения по конвейеру и проверка успешности сборки.

Синхронизация всех изменений в главной ветви

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

Для этого сначала проверка или переключиться main на ветвь, а затем объединить удаленную main ветвь с локальной main ветвью.

Затем проверка ветвь компонента, а затем объединить ветвь компонента с main ветвью.

Давайте рассмотрим этот процесс.

В терминале выполните следующую git checkout команду, чтобы проверка из main ветви:
```
git checkout main
```
Чтобы скачать последние изменения в удаленной main ветви и объединить эти изменения в локальную main ветвь, выполните следующую git pull команду:
```
git pull origin main
```
Так как в вашу ветвь main никто изменений не вносил, следующая команда сообщит, что все уже актуально.
```
From https://github.com/username/mslearn-tailspin-spacegame-web
 * branch            main     -> FETCH_HEAD
Already up to date.
```
Чтобы проверка ветвь компонента, выполните следующую командуgit checkout:
```
git checkout feature/home-page-text
```
Слияние ветвь компонента с mainпомощью:
```
git merge main
```
Опять же, потому что никто на самом деле не внес никаких изменений в свою main ветвь, вы видите, что все еще актуально.
```
Already up to date.
```
Если же вы включили какие-либо изменения, необходимо еще раз протестировать приложение, чтобы убедиться в том, что все по-прежнему работает.

Снова отправьте локальную ветвь

При включении изменений из удаленный репозиторий в локальный ветвь компонента необходимо отправить локальную ветвь в удаленный репозиторий второй раз.

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

Выполните следующую git push команду, чтобы отправить изменения в GitHub:
```
git push origin feature/home-page-text
```
И вновь в ответе говорится, что все уже актуально, так как изменений не вносилось.
```
Everything up-to-date
```

Отправка запроса на вытягивание

В этом разделе вы отправляете запрос на вытягивание так же, как и ранее.

В браузере войдите в GitHub.
Перейдите в репозиторий mslearn-tailspin-spacegame-web .
В раскрывающемся списке выберите ветвь feature/home-page-text .
Чтобы запустить запрос на вытягивание, выберите пункт Участие и щелкните Открыть запрос на вытягивание.
Убедитесь, что базовый раскрывающийся список указывает репозиторий, а не репозиторий Майкрософт.

Важно!

Опять же, этот шаг важен, так как вы не можете объединить изменения в репозиторий Майкрософт.

При работе непосредственно с вашим репозиторием, а не вилкой, ветвь main выбирается по умолчанию.
Введите название и описание запроса на вытягивание.
- Заголовок: улучшение текста в верхней части домашней страницы
- Описание. Получено последнее текст домашней страницы от группы продуктов.
Чтобы завершить запрос на вытягивание, нажмите кнопку "Создать запрос на вытягивание".

Этот шаг не объединяет код. Он сообщает другим пользователям, что у вас есть изменения, которые вы предлагаете объединить.

Отображается окно запроса на вытягивание. Как и раньше, запрос на вытягивание активирует Azure Pipelines для создания приложения по умолчанию.
При необходимости выберите ссылку "Сведения" или перейдите в проект в Azure DevOps и просмотрите запуск конвейера.
По завершении сборки вернитесь к запросу на вытягивание на GitHub.
Выберите запрос на вытягивание слиянием и нажмите кнопку "Подтвердить слияние".
Чтобы удалить ветвь feature/home-page-text из GitHub, выберите Delete branch (Удалить ветвь).

Продолжить