Развертывание приложения Vue.js в качестве службы приложений Azure из Visual Studio Code
У меня есть приложение Vue.js. Это приложение было создано с использованием Vue-Cli. В настоящее время это простое приложение «Hello World». У меня это приложение работает на моей локальной машине. Я запускаю его с помощью npm run serve из окна терминала в Visual Studio Code. Сейчас я пытаюсь развернуть это приложение из кода Visual Studio в службу приложений Azure.
У меня создана служба приложений Azure. Я также установил файл Расширение кода Visual Studio службы приложений Azure. В окне «Терминал» в Visual Studio Code я ввел «npm run build». Это создало каталог с именем «dist». Затем я щелкаю правой кнопкой мыши по этому каталогу и выбираю «Развернуть в веб-приложении...». Затем я выбираю свою подписку и имя службы приложений и выбираю «Развернуть». Я вижу подсказку с надписью «Развертывание на». Затем я нажимаю кнопку «Обзор веб-сайта». Это запускает окно браузера. В браузере я вижу заставку с надписью «Привет, разработчики Node!» Однако я ожидал чтобы увидеть мое приложение Node.js. Что мне не хватает?
Пытаясь развернуть это приложение, я запустил npm run build из окна «Терминал». Это создало каталог «dist».
@BryanTrach-MSFT Когда я посещаю sitename.scm.azurewebsites.net, у меня нет опции консоли отладки> cmd. Вместо этого у меня есть «Окружающая среда», «SSH» и «Bash». Я подозреваю, что вы имеете в виду службу приложений в Windows, однако, по-видимому, это и служба приложений в Linux. Когда я использую оболочку Bash, я вижу каталог с именем «сайт». Внутри «сайта» я вижу каталог с именем «wwwroot». Внутри «wwwroot» я вижу свои файлы.
Ответы 2
См. Локальное развертывание Git в соответствии с Microsoft Docs.
В противном случае вы можете попробовать выполнить развертывание вручную через FTP. Вы можете сделать это, перейдя на портал Azure:
App Service => Deployment Center => FTP => Dashboard
Затем вы найдете некоторые учетные данные FTPS на этой странице, и все, что вам нужно сделать, это развернуть папку dist до /site/wwwroot, см. подробнее здесь.
Официальная документация была не такой ясной, и многие руководства перестали работать, так как Azure обновил некоторые из своих функций. Я попытался напрямую развернуть папку dist под /site/wwwroot, потому что мой API-запросы не работал должным образом.
Немного покопавшись, я успешно развернул свое приложение vue.js в службе приложений Azure с работающими маршрутизация и API-запросы.
Ключевым моментом здесь является развертывание SPA в службе приложений Azure как Статический сайт. Поскольку Azure определяет статический веб-сайт как
"A static site is typically a single-page application (or SPA) written with Angular, React or Vue. However you design the app, you host and serve these files directly from storage rather than using a web server. Hosting in storage is simpler and less expensive than maintaining a web server."
Перейдя по этой ссылке ниже и используя Хранилище Azure и VSCode, вы должны выполнить свою работу.
https://docs.microsoft.com/en-us/azure/developer/javascript/tutorial-vscode-static-website-node-01?tabs=bash
Azure Storage — это другой продукт. И хотя он будет обслуживать ваш статический SPA (поскольку у него есть веб-сервер), проблема в том, что вы не можете указать на него собственный домен.
Здесь из официального документа говорится, что вы можете сопоставить пользовательский домен с хранилищем блогов Azure. docs.microsoft.com/en-us/azure/storage/blobs/…
Я столкнулся с другими проблемами при развертывании Vue в Azure с помощью хранилища блогов. Поэтому позже я перешел на использование Azure Devops, настроил конвейер/выпуск CI/CD и подключился к службе приложений Azure.
Не могли бы вы перейти к имя_сайта.scm.azurewebsites.net и перейти к консоли отладки> cmd. Здесь отображаются файлы вашего сайта?