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

Завершено

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

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

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

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

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

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

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

1. У себя в терминале выполните команду git checkout main, чтобы перейти к ветви main:

   git checkout main
   

2. Чтобы извлечь последние изменения, выполните следующую git pull команду:

   git pull origin main
   

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

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

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

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

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

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

   dotnet build --configuration Release
   

2. Выполните следующую 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 просмотру работающего приложения.

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

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

По завершении вернитесь в окно терминала и выберите 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.

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

1. В Visual Studio Code откройте index.cshtml в каталоге Tailspin.SpaceGame.Web/Views/Home .

2. Найдите этот текст в верхней части страницы:

   <p>An example site for learning</p>
   

   Совет

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

3. Замените текст на предыдущем шаге следующим "неправильным" текстом, а затем сохраните файл:

   <p>Welcome to the oficial Space Game site!</p>
   

   Обратите внимание, что слово "oficial" намеренно неправильно введено. Далее в этом модуле мы рассмотрим эту ошибку.

4. В терминале выполните следующую dotnet build команду, чтобы создать приложение:

   dotnet build --configuration Release
   

5. Выполните следующую dotnet run команду, чтобы запустить приложение:

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

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

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

   

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

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

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

1. Выполните команду git status, чтобы проверить наличие незафиксированных изменений в вашей ветви:

   git status
   

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

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

   git add Tailspin.SpaceGame.Web/Views/Home/Index.cshtml
   

3. Выполните следующую команду git commit, чтобы зафиксировать промежуточный файл в ветви feature/home-page-text:

   git commit -m "Improve the text at the top of the home page"
   

4. Выполните следующую команду git push, чтобы отправить (загрузить) ветвь feature/home-page-text в свой репозиторий на GitHub:

   git push origin feature/home-page-text
   

5. Вы также можете выбрать ветвь в GitHub из раскрывающегося списка "Ветвь".

   

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

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

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

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

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

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

Затем ознакомьтесь с ветвью функций, а затем объедините ветвь функций с main ветвью.

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

1. В терминале выполните следующую git checkout команду, чтобы проверить main ветвь:

   git checkout main
   

2. Чтобы скачать последние изменения в удаленной 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.
   

3. Чтобы проверить ветвь компонента, выполните следующую командуgit checkout:

   git checkout feature/home-page-text
   

4. Слияние ветвь компонента с mainпомощью:

   git merge main
   

   Опять же, потому что никто на самом деле не внес никаких изменений в свою main ветвь, вы видите, что все еще актуально.

   Already up to date.
   

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

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

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

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

1. Выполните следующую git push команду, чтобы отправить изменения в GitHub:

   git push origin feature/home-page-text
   

   И вновь в ответе говорится, что все уже актуально, так как изменений не вносилось.

   Everything up-to-date
   

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

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

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

2. Перейдите в репозиторий mslearn-tailspin-spacegame-web .

3. В раскрывающемся списке выберите ветвь feature/home-page-text .

4. Чтобы запустить запрос на вытягивание, выберите пункт Участие и щелкните Открыть запрос на вытягивание.

5. Убедитесь, что базовый раскрывающийся список указывает репозиторий, а не репозиторий Майкрософт.

   

   Внимание

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

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

6. Введите название и описание запроса на вытягивание.

   • Заголовок: улучшение текста в верхней части домашней страницы
   • Описание. Получено последнее текст домашней страницы от группы продуктов.

7. Чтобы завершить запрос на вытягивание, нажмите кнопку "Создать запрос на вытягивание".

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

   Отображается окно запроса на вытягивание. Как и раньше, запрос на вытягивание активирует Azure Pipelines для создания приложения по умолчанию.

8. При необходимости выберите ссылку "Сведения" или перейдите в проект в Azure DevOps и просмотрите запуск конвейера.

9. По завершении сборки вернитесь к запросу на вытягивание на GitHub.

10. Выберите запрос на вытягивание слиянием и нажмите кнопку "Подтвердить слияние".

11. Чтобы удалить ветвь из GitHub, выберите feature/home-page-text (Удалить ветвь).