Обзор развертывания приложения JavaScript в Azure

Чтобы развернуть приложение на основе JavaScript в Azure, вы перемещаете файл или набор файлов в Azure, которые будут обслуживаться через конечную точку HTTP. Процесс перемещения файлов называется развертыванием.

Необходимые условия

• Подписка Azure— создать ее бесплатно.
• Node.js LTS.
• Учетная запись GitHub, если вы планируете развертывание из репозитория GitHub.

Средства развертывания

Azure предлагает различные средства развертывания в соответствии с различными потребностями. Ниже приведены некоторые распространенные методы.

Другие средства развертывания существуют на основе конкретной службы. Например, служба приложений Azure поддерживает широкий спектр средств развертывания:

• ИЗ ZIP-файла
• с FTP
• Dropbox или OneDrive
• Локальный Git
• cURL
• SSH

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

Службы размещения Azure для приложений JavaScript

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

Дополнительные сведения о выборе правильной службы размещения см. в статье "Размещение приложений в Azure".

Методы развертывания с помощью инструментов

Выбрав службу размещения, выберите метод развертывания, соответствующий работе.

• сборку перед развертыванием: для сложных или длительных сборок упаковайте приложение в ZIP-файл и разверните его. Пакет развертывания позволяет контролировать и тестировать сборку перед развертыванием.
• Сборка во время развертывания: Для упрощенных процессов сборки используйте переменную среды, предоставляемую Azure, SCM_DO_BUILD_DURING_DEPLOYMENT=true, чтобы выполнять сборку вашего приложения во время развертывания.

При развертывании в Службе приложений также доступны другие методы развертывания:

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

Не используйте слоты развертывания для смешивания целей развертывания. Все слоты развертывания совместно используют службу приложений, поэтому необходимо убедиться, что шаблоны трафика и предполагаемое использование всех слотов одинаковы. Если вам нужна размещённая тестовая или стендинг-среда, её следует организовать как отдельную службу приложений.

Развертывание с помощью Интерфейса командной строки разработчика Azure

Чтобы максимально быстро пройти весь процесс подготовки ресурсов Azure и развертывания приложения, начните с Azure Developer CLI (azd).

Интерфейс командной строки разработчика Azure упрощает процесс развертывания приложения в Azure. Выполните следующие действия.

1. Установить Azure Developer CLI.

2. Найдите существующий проект , использующий множество ресурсов, которые используются в проекте.

3. Инициализировать локальную версию проекта для использования в качестве шаблона инфраструктуры для собственного проекта.

4. Создайте ресурсы и разверните код в Azure.

   azd auth login
   azd init --template <template-name>
   azd up
   

Используйте этот путь, если требуется один рабочий процесс для инфраструктуры, развертывания и повторяющихся сред.

Развертывание с помощью Visual Studio Code

Если в редакторе требуется интерактивный поток развертывания, используйте расширения Azure для Visual Studio Code.

Чтобы развернуть или повторно развернуть приложение службы приложений с помощью Visual Studio Code, выполните следующие действия.

1. Установите связанные расширения Azure, например Служба приложений Azure или Функции Azure.

2. Откройте обозреватель Azure. Выберите значок Azure на основной боковой панели или используйте сочетание клавиш (SHIFT + ALT + A).

3. В группе ресурсов выберите подписку и службу.

4. Щелкните правой кнопкой мыши службу и выберите Развернуть в веб-приложении....

   

Дальнейшие действия для конкретной службы

Выбрав службу размещения и метод развертывания, перейдите по пути, соответствующему приложению.

Развертывание в статических веб-приложениях Azure

Статические веб-приложения Azure идеально подходят для современных веб-приложений, созданных с помощью платформ JavaScript. Чтобы развернуть:

1. Установите расширение статических веб-приложений Azure для Visual Studio Code.
2. Создайте приложение локально, чтобы убедиться, что он работает должным образом.
3. В Visual Studio Code откройте обозреватель Azure и найдите Статические веб-приложения Azure.
4. Щелкните правой кнопкой мыши подписку и выберите "Создать статическое веб-приложение".
5. Следуйте инструкциям по подключению репозитория GitHub. Azure автоматически создает рабочий процесс GitHub Actions.
6. Отправьте изменения в репозиторий, чтобы активировать автоматическое развертывание.

Дополнительные сведения см. в статье "Развертывание веб-приложения в статических веб-приложениях Azure".

Развертывание в Службе приложений Azure

Служба приложений Azure хорошо подходит, если требуется управляемое размещение для веб-приложения или API. Вы можете выполнить развертывание с помощью azd, Visual Studio Code, Azure CLI или GitHub Actions.

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

Для пути развертывания для конкретной службы начните с одного из следующих руководств:

• Развертывание веб-приложения Node.js и MongoDB для Служба приложений Azure
• Развертывание в службе приложений с помощью GitHub Actions
• Развертывание в службе приложений из ZIP-пакетов

Развертывание с помощью Azure CLI

Чтобы развернуть приложение JavaScript с помощью Azure CLI, выполните следующие действия.

1. Установите Azure CLI, если у вас его еще нет.

2. Войдите в свою учетную запись Azure.

   az login
   

3. Создайте или используйте существующий план службы приложений и службу приложений.

   az appservice plan create --name <plan-name> --resource-group <resource-group> --sku B1 --is-linux
   az webapp create --resource-group <resource-group> --plan <plan-name> --name <app-name> --runtime "NODE|20-lts"
   

4. Разверните код приложения в виде ZIP-файла или из локального репозитория Git.

   Для развертывания ZIP:

   az webapp deployment source config-zip --resource-group <resource-group> --name <app-name> --src <path-to-zip>
   

   Для локального развертывания Git:

   az webapp deployment source config-local-git --resource-group <resource-group> --name <app-name>
   az webapp config appsettings set --resource-group <resource-group> --name <app-name> --settings DEPLOYMENT_BRANCH='main'
   git remote add azure <git-url>
   git push azure main
   

Развертывание с помощью GitHub Actions

GitHub Actions автоматизирует процесс развертывания при отправке изменений в репозиторий GitHub. Чтобы настроить GitHub Actions для развертывания Azure:

1. В репозитории GitHub создайте каталог .github/workflows/, если его ещё нет.

2. Создайте файл рабочего процесса (например, azure-deploy.yml), который определяет шаги развертывания.

3. Используйте действие входа Azure для проверки подлинности с помощью Azure. Рекомендуется: Используйте OpenID Connect (OIDC) для повышения безопасности вместо хранения учетных данных в качестве секретов.

   Вариант A: OpenID Connect (рекомендуется)

   permissions:
     id-token: write
     contents: read
   
   - name: Azure Login
     uses: azure/login@v2
     with:
       client-id: ${{ secrets.AZURE_CLIENT_ID }}
       tenant-id: ${{ secrets.AZURE_TENANT_ID }}
       subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
   
   - name: Deploy to Azure Web App
     uses: azure/webapps-deploy@v3
     with:
       app-name: <app-name>
       package: '.'
   

   Инструкции по настройке см. в разделе "Настройка OpenID Connect с помощью GitHub Actions".

   Вариант B. Проверка подлинности на основе учетных данных (устаревшая версия)

   - name: Azure Login
     uses: azure/login@v2
     with:
       creds: ${{ secrets.AZURE_CREDENTIALS }}
   
   - name: Deploy to Azure Web App
     uses: azure/webapps-deploy@v3
     with:
       app-name: <app-name>
       package: '.'
   

4. Добавьте шаги развертывания, соответствующие службе размещения (служба приложений, Статические веб-приложения или приложения контейнеров).

5. Зафиксируйте и отправьте файл рабочего процесса в репозиторий для активации автоматических развертываний.

Дополнительные сведения см. в разделе "Развертывание с помощью GitHub Actions".

Развертывание на платформе Функции Azure

Функции Azure хорошо подходит для приложений JavaScript на основе событий и бессерверных API.

Чтобы выполнить развертывание из Visual Studio Code:

1. Установите расширение Функции Azure.
2. Откройте обозреватель Azure и выберите подписку Azure.
3. Создайте или выберите приложение-функцию.
4. Используйте команды расширения для публикации локального проекта.

Сведения о работе со службой см. в документации по Функции Azure и обзоре Functions.

Развертывание в приложениях контейнеров Azure

Приложения контейнеров Azure предоставляют бессерверное размещение контейнеров для приложений JavaScript. Чтобы развернуть:

1. Контейнеризация приложения с помощью Docker. Создайте Dockerfile в корневом каталоге проекта.
2. Выполните сборку и тестирование контейнера локально.
3. Отправьте образ контейнера в реестр контейнеров Azure.
4. Используйте расширение "Приложения контейнеров Azure" или Azure CLI для создания и развертывания приложения контейнера.

Полное руководство см. в обзоре JavaScript в приложениях контейнеров Azure.

Шаги сборки

После выбора пути к службе и развертыванию определите, когда должна произойти сборка.

В зависимости от сложности и развертывания приложения можно создать приложение JavaScript до или во время развертывания:

• сборку перед развертыванием: для сложных или длительных сборок упаковайте приложение в ZIP-файл и разверните его. Пакет развертывания обеспечивает контроль над процессом сборки и позволяет протестировать его перед развертыванием.
• Сборка во время развертывания. Для более простых сборок используйте переменную SCM_DO_BUILD_DURING_DEPLOYMENT=true среды, предоставляемую Azure, для создания приложения во время развертывания.

Слоты развертывания

Используйте слоты развертывания, если у вас уже есть работающее приложение App Service и вам нужен более безопасный процесс выпуска обновлений.

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

Не используйте слоты развертывания для смешивания целей развертывания. Все слоты развертывания совместно используют службу приложений, поэтому необходимо убедиться, что шаблоны трафика и предполагаемое использование всех слотов одинаковы. Если вам нужна размещённая тестовая или промежуточная среда, используйте отдельный App Service.

Подключитесь к размещенной в Azure среде

• Сведения о ручном или нерегулярном доступе к размещённым средам см. в статье о том, как просмотреть файлы в вашей среде размещения Azure.
• Для автоматизированного или согласованного доступа рассмотрите настройку одного из методов развертывания.

Просмотр файлов в размещенной среде Azure

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

• Просмотрите файлы на портале Azure — выберите Консоль в разделе "Средства разработки" для вашего ресурса размещения.

• Просмотр файлов в расширении VS Code — выберите значок Azure на панели действий. В разделе "Ресурсы" выберите подписку и службу. Узел файлов предоставляет представление удаленных файлов.

  • Служба приложений Azure и Функции Azure расширения предоставляют представление удаленных файлов.

  

Просмотр конечной точки HTTP на портале Azure

Просмотрите HTTP-эндпоинт на странице обзора службы на портале Azure.

Связанное содержимое

• Руководства по развертыванию с помощью Visual Studio Code
• размещение приложений в Azure
• Документация по статическим веб-приложениям Azure
• Документация по приложениям контейнеров Azure
• Документация по службе приложений Azure
• Документация по функциям Azure