Развертывайте Next.js с Azure Static Web App Service и Действия GitHub (Видео и учебное пособие)

Недавно я сделал новое видео на использовании прохладной новой функции, выпущенной в Microsoft Build 2020, статическими веб-приложениями. В прошлый раз мы использовали Уго, и это было довольно дарн легко. На этот раз мы сосредоточимся на React Pracy Next.js.

Требования

• Счет GitHub
• Azure Account — Проверьте 200 долларов в бесплатное кредитное испытание Отказ
• NPM — не менее 10
• NPX.

Смотри, я новый к этому.

Без проблем! Статический сайт больше похоже на коллекцию HTML-страниц, а не динамически отображаемые страницы в браузере. Мы не будем доступ к базе данных, чтобы предоставить информацию на нашем сайте. В этом случае мы будем создавать .js Файлы, содержащие CSS и HTML, которые могут легко сплющены в простое HTML. Как только эта страница HTML построен, вы можете развернуть вывод на свой веб-хост.

В прошлом обслуживание этих файлов требуется, чтобы вы предоставляли некоторую форму простого веб-сервера вместе с поддерживающим хранилищем для размещения файлов. Перед облаком эти типы статических страниц действительно потребуют виртуальных хостов на серверах Apache или IIS. Это означало дополнительное системное управление, методы развертывания и обслуживание оборудования. Развертывание не было автоматическим. Большую часть времени новые развертывания, использующие эти более старые методы, будут отправлены основными сценариями или даже через FTP.

Что такое next.js?

Next.js это структура поколения статического сайта. Вы создаете RECT RACT Pages, а не динамически сгенерированные, позволяя вам быстро обслуживать ваш сайт. Конфигурация возле минимальной, что делает его таким мощным. Просто создайте сайт, добавьте страницы Adtitional, используйте HTML/CSS и отреагируйте на настройку его потребностей.

Тонны крупных компаний используют Frameworks Next.js, как Hulu, Docker, Jet и многие другие. Это простота создания и развертывания, которые действительно помогают организациям, как этот корабль быстрее и проще.

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

Метод развертывания

Действия GitHub Это API для причины и влияния на GitHub: Orchestrate любой рабочий процесс, основанный на любом событии, в то время как GitHub управляет выполнением, обеспечивает богатую обратную связь и обеспечивает каждый шаг вперед. С действиями GitHub, рабочие процессы и шаги — это просто код в репозитории, поэтому вы можете создавать, общитывать, повторно использовать и вилку практику развития программного обеспечения.

• Получите быстрый CI/CD — любой язык или платформа.
• Ямл сборки
• Живая регистрация
• Рабочие процессы многоразовые — как код! ( Здравствуйте, товарищец Stackoverflow Devs!)

Если вы хотите следовать с этим руководством, убедитесь, что у вас есть учетная запись GitHub!

Azure Static Web Apps

Ускорить разработку вашего приложения со статическим передним концом и динамическим задним концом, питающимся без помощью APIS. Испытайте высокую производительность с помощью индивидуального опыта местного развития, нативные рабочие процессы GitHub для создания и развертывания вашего приложения и унифицированного хостинга и управления в облаке.

• Производительность от местного развития на родных рабочих процессах GitHub для CI/CD
• Управляемая глобальная доступность для статического контента
• Динамическая шкала для бессвезвенных API
• Оптимизированное управление, включая пользовательскую настройку домена и аутентификацию и авторизацию

Azure Static Web Apps обеспечивает внутреннюю интеграцию GitHub, чтобы при этом, когда вы развертываете, ваш файл Workflow будет сгенерирован для вас, позволяя вам строить и развернуть направо на Azure.

Если у вас еще нет аккаунта Azure, и вы хотели бы следовать вместе с этим постом, Проверьте 200 долларов в бесплатное кредитное испытание Отказ

Начиная

Вилка этого репозитория в ваш аккаунт GitHub. Это просто глупый статический сайт, посвященный моему мопсу Рико.

Jaydestro/Ricoinfojs

Это шаблон стартера для Узнайте Next.js Отказ

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

Начните локально с NPN dev. Начните

Экспорт страниц, используя NPX Далее Build && NPX Следующий экспорт и найдите свой статический контент в из каталог.

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

git clone https://github.com/jaydestro/riconext.git
cd riconext
npm install
npm run dev

Теперь у вас должен быть сервер для разработки, работающий в Localhost на Port 3000, чтобы проверить свой веб-сайт:

Вы можете изменить сайт никак или просто следуйте за Next.js Документация На создании своего собственного пример сайта.

Когда вы завершили дизайн и готовы строить статические страницы

Создайте свой статический веб-сервис

Создание службы просто занимает несколько шагов, вот как начать работу в Azure Portal.

1. Перейти к вашему порталу Azure

2. В верхнем левом углу вашего портала нажмите на три тире, нажмите «Создать ресурс»

1. В режиме поиска «Поиск на рынке» введите «Статическое веб-приложение (превью)» — Нажмите Enter, и вы будете доставлены в шаблон менеджера ресурсов Azure, чтобы создать сайт.

2. Нажмите кнопку «Создать» на описании Azure Marketplace

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

2. Предоставить ему имя, чтобы определить ваше приложение (Это не будет именем хоста)

3. Выберите один из регионов Azure, в которой доступно услугу.

4. Выберите SKU бесплатно! (Это верно, бесплатно!)

5. Нажмите «Войти с GitHub» для своего исходного управления — аутентифицировать свой аккаунт GitHub (вам понадобится!)

1. Выберите свою организацию, в моем случае это Jaydestro Выберите свой репозиторий Riconext И, наконец, филиал мастер

2. Нажмите кнопку сборки внизу, чтобы выбрать детали сборки

3. Обновите детали сборки следующим:

   1. Расположение приложений: / Это местоположение вашего приложенного кода. Например, ‘/’ представляет собой корню вашего приложения, а «/приложение» представляет каталог, называемое «приложение».
   2. API Расположение: Оставить пустые, удалить API Расположение вашего кода функций Azure. Например, ‘/API’ представляет собой папку, называемую «API».
   3. App Artifact Расположение: публичный Путь вашего построения выхода относительно вашего местоположения приложений. Например, установка значения построить Когда ваше местоположение приложения установлено на /приложение вызвало содержание в /app/build чтобы Ему служили.

4. Нажмите «Обзор и создать»

5. Просмотрите свое резюме и нажмите «Создать!

Построить с действиями GitHub

Поскольку вы создали доверие между GitHub и Azure, вы Azure отбросит файл рабочего процесса в ваш репозиторий, расположенный в .Github/Workflows Отказ Azure создаст файл YAML в каталоге для вас с указаниями о том, как создать и развернуть ваше приложение. Файл yaml будет иметь имя, которое будет похоже на рандомизированное имя хоста, в конечном итоге созданного для вас.

Вот пример:

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
    - master
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
    - master

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
    - uses: actions/checkout@v2
    - name: Build And Deploy
      id: builddeploy
      uses: Azure/static-web-apps-deploy@v0.0.1-preview
      with:
        azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_GREEN_MUD_0FB62DF0F }}
        repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
        action: 'upload'
        ###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
        # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig 
        app_location: '/' # App source code path
        api_location: 'api' # Api source code path - optional
        app_artifact_location: 'public' # Built app content directory - optional
        ###### End of Repository/Build Configurations ######

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
    - name: Close Pull Request
      id: closepullrequest
      uses: Azure/static-web-apps-deploy@v0.0.1-preview
      with:
        azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_GREEN_MUD_0FB62DF0F }}
        action: 'close'

Теперь всякий раз, когда мы преодолеваем действия Master GitHub, будут следовать инструкциям в файле рабочего процесса GitHub Actions. Если мы хотели добавить тесты, вносить изменения или что-нибудь еще, все мастера развертывания будут автоматически создавать и развернуть. Давайте посмотрим на то, что сделали действия GitHub.

Действия GitHub были вызваны фиксацией файла yaml в мой репозиторий. Это вызванное действие рассказывает действия GitHub на основе файла рабочего процесса в .gitub \ Workflows Чтобы построить наше статическое веб-приложение, затем разверните его в приложению. Действия предоставит вам журналы вашей сборки и развертывания, чтобы вы могли устранить неполадки, когда возникают проблемы.

После завершения сборки вы получите краткое изложение того, что произошло во время развертывания.

После завершения нашего развертывания вы теперь можете вернуться к порталу Azure и просмотрите детали и имя хоста вашего нового развертывания:

Если я нажму на имя хоста, я теперь могу увидеть мой новый веб-сайт!

У нас есть варианты интеграции Функции Azure Добавьте пользовательское имя хоста или даже устанавливайте обстановку постановки, которые автоматически создаются при создании запроса на тягу и продвигаются в производство после объединения запроса на тягу.

Ссылки, чтобы помочь вам!

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

Учебник должен помочь вам отлично начать использование этой услуги с помощью вашей службы Azure Static Web App. Использование ресурсов, таких как действия GitHub, может помочь вам в вашем путешествии, чтобы стать Microsoft DevOps Certified Expert Отказ

• Microsoft Узнать: Лазурные основы
• Microsoft Узнать: Развернуть статическое веб-приложение
• Microsoft Docs: Документация приложений
• Действия GitHub Документация
• Получите 12 месяцев бесплатного обслуживания и $ 200 для Microsoft Azure

Оригинал: «https://dev.to/azure/deploy-next-js-with-azure-static-web-app-service-and-github-actions-32j0»