Поделиться через

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

  • Статья

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

Необходимые компоненты

Для работы с этим учебником необходимы указанные ниже компоненты.

Ресурс Description
Подписка Azure Если ее нет, можно создать учетную запись бесплатно.
Node.js Установите версию 20.0 или более позднюю.
Azure CLI Установите версию 2.6x или более позднюю.

Вам также нужен текстовый редактор. Для работы с Azure рекомендуется Visual Studio Code .

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

Создание веб-приложения

  1. Откройте окно терминала.

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

    npm create vite@latest swa-vanilla-demo -- --template=vanilla
cd swa-vanilla-demo
npm install
npm run dev

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

    Снимок экрана созданного веб-приложения ванили.

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

    npx --package @angular/cli@latest ng new swa-angular-demo --ssr=false --defaults
cd swa-angular-demo
npm start

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

    Снимок экрана созданного веб-приложения angular.

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

    npm create vite@latest swa-react-demo -- --template react
cd swa-react-demo
npm install
npm run dev

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

    Снимок экрана созданного веб-приложения React.

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

    npm create vite@latest swa-vue-demo -- --template vue
cd swa-vue-demo
npm install
npm run dev

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

    Снимок экрана созданного веб-приложения Vue.

  1. Выберите Cmd/CTRL+C , чтобы остановить сервер разработки.

Создание статического веб-приложения в Azure

Вы можете создать статическое веб-приложение с помощью портал Azure, Azure CLI, Azure PowerShell или Visual Studio Code (с расширением Статические веб-приложения Azure). В этом руководстве используется Azure CLI.

  1. Войдите в Azure CLI:

    az login

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

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

    az account show

    Чтобы выбрать подписку, можно выполнить az account set команду.

    az account set --subscription "<SUBSCRIPTION_NAME_OR_ID>"

  3. Создать группу ресурсов.

    Группы ресурсов используются для группирования ресурсов Azure вместе.

    az group create -n swa-tutorial -l centralus --query "properties.provisioningState"

    Параметр -n ссылается на имя сайта, а -l параметр — имя расположения Azure. Команда завершается так --query "properties.provisioningState" , что команда возвращает только сообщение об успешном выполнении или ошибке.

  4. Создайте статическое веб-приложение в созданной группе ресурсов.

    az staticwebapp create -n swa-demo-site -g swa-tutorial --query "defaultHostname"

    Параметр -n ссылается на имя сайта, а -g параметр ссылается на имя группы ресурсов Azure. Убедитесь, что вы указали то же имя группы ресурсов, что и на предыдущем шаге. Статическое веб-приложение глобально распределено, поэтому расположение не важно для развертывания приложения.

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

Настройка для развертывания

  1. Добавьте файл в staticwebapp.config.json код приложения со следующим содержимым:

    {
    "navigationFallback": {
        "rewrite": "/index.html"
    }
}

    Определение резервного маршрута позволяет сайту серверировать index.html файл для любых запросов, сделанных в домене.

    Проверьте этот файл в системе управления исходным кодом (например, git), если вы используете его.

  2. Установите интерфейс командной строки Статические веб-приложения Azure (SWA) в проекте.

    npm install -D @azure/static-web-apps-cli

    Интерфейс командной строки SWA помогает разрабатывать и тестировать сайт локально перед развертыванием в облаке.

  3. Создайте новый файл для проекта и назовите его swa-cli.config.json.

    В swa-cli.config.json файле описывается создание и развертывание сайта.

    После создания этого файла можно создать его содержимое npx swa init с помощью команды.

    npx swa init --yes

  4. Создайте приложение для распространения.

    npx swa build

  5. Используйте интерфейс командной строки SWA для входа в Azure.

    npx swa login --resource-group swa-tutorial --app-name swa-demo-site

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

Предупреждение

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

Найдите созданный файл index.html в проекте в папке dist/swa-angular-demo/browser .

  1. SWA_CLI_OUTPUT_LOCATION Задайте переменную среды в каталог, содержащий файл index.html:

    export SWA_CLI_OUTPUT_LOCATION="dist/swa-angular-demo/browser"

Развертывание сайта в Azure

Разверните код в статическом веб-приложении:

npx swa deploy --env production

Развертывание приложения может занять несколько минут. После завершения отобразится URL-адрес вашего сайта.

Снимок экрана: команда развертывания.

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

Очистка ресурсов (необязательно)

Если вы не продолжаете работу с другими руководствами, удалите группу ресурсов и ресурсы Azure:

az group delete -n swa-tutorial

При удалении группы ресурсов удалите все содержащиеся в ней ресурсы. Отменить это действие невозможно.

Следующие шаги

Добавление проверки подлинности

Связанный контент