Как запустить и развернуть Vue с серверной частью NodeJS в службах приложений Azure

Пример проекта со средой выполнения NodeJS и методом локального развертывания Git

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

В этом посте мы собираемся развернуть приложение Vue с серверной частью nodejs во время выполнения NodeJS. Сначала мы упаковываем наше приложение и отправляем это локальное репозиторий git в службы приложений Azure.

• Предварительные требования
• Пример проекта
• Создание службы приложений с помощью среды выполнения NodeJS
• Упакуйте проект
• Развертывание с помощью локального Git в службе приложений
• Демо
• Как просмотреть журналы
• Как клонировать и обновить репо
• Резюме
• Заключение

Предпосылки

• Если вы новичок в Vue, перейдите по приведенной ниже ссылке о том, как разработать и собрать проект Vue с помощью серверной части NodeJS.

Как разработать и собрать приложение Vue.js с помощью NodeJS

Другие предварительные требования к этой публикации — это то, как упаковать ваш Vue с помощью NodeJS Backend для развертывания. Вот ссылка, по которой можно пройти и лучше понять.

Упаковка вашего приложения Vue.js с помощью серверной части NodeJS для производства

Учетная запись Microsoft Azure

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

• Учетная запись Azure

Вам необходимо создать подписку для своей учетной записи. Самая распространенная — подписка Pay As You Go.

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

Пример проекта

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

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

Вот ссылка на этот проект на Github. Вы можете клонировать его и запустить на своем компьютере.

// clone the project
git clone https://github.com/bbachi/vuejs-nodejs-example.git
// strat the api
cd api
npm install
npm run dev
// start the react app
cd my-app
npm install
npm run serve

Создание службы приложений с помощью среды выполнения NodeJS

Вам необходимо создать службу веб-приложения перед развертыванием нашего приложения с помощью Local git. Давайте сделаем это с порталом. Вам нужно перейти в службы приложений и создать веб-приложение со средой выполнения NodeJS, как показано ниже. Убедитесь, что вы выбрали правильную группу ресурсов.

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

Наконец, просмотрите и создайте службу приложений.

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

Нажмите кнопку «Перейти к ресурсу» и найдите приведенный ниже URL-адрес.

Упаковать проект

Нам не нужно упаковывать проект для этого развертывания. Если вы поддерживаете два файла package.json для Vue и NodeJS соответственно, как показано ниже, вам необходимо создать проект Vue.

Vue

Сначала выполните следующую команду, перейдя в каталог my-app, чтобы построить проект Vue.

npm run build

Он компилирует проект и помещает все ресурсы сборки в папку с именем dist.

Сервер NodeJS

Мы развертываем весь проект во время выполнения nodejs, и когда дело доходит до сервера NodeJS, вы должны работать на порту 8080, и вам нужно обслуживать ресурсы Vue из сборки, которую мы создали на предыдущем шаге.

Нам нужно использовать express.static для обслуживания статических ресурсов Vue, как указано выше. Убедитесь, что у вас есть команда запуска в package.json, как показано ниже. По умолчанию службы приложений запускают команду npm start.

Развертывание с помощью локального Git в службе приложений

Мы создали сервисы приложения и разобрались со структурой проекта. Пришло время развернуть это с помощью локального сервера git. Если вы перейдете в центр развертывания службы приложений, которую мы создали выше. у нас есть три варианта, один из них — локальный git.

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

az webapp deployment user set --user-name <username> --password <password>

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

az webapp deployment source config-local-git --name vue-nodejs-runtime --resource-group rg-appservices-demo

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

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

git remote add azure <url>

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

git push azure master

После вышеуказанных шагов вы можете увидеть локальный Git, настроенный в Центре развертывания, как показано ниже.

Демо

После того, как вы отправите код с помощью указанной выше команды git push azure master, вы перейдете на страницу обзора, получите URL-адрес и нажмите его в браузере.

Вы можете нажать на URL-адрес в браузере, и вы увидите, что приложение работает по адресу https://vue-nodejs-runtime.azurewebsites.net

Как посмотреть журналы

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

Помните, что когда вы вводите код с помощью этой команды git push azure master, он выводит много журналов, и вы можете найти URL-адрес журнала в конце журналов, как показано ниже.

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

Вот поток журнала.

Вы также можете проверить файлы журналов, щелкнув Диспетчер файлов слева, как вы можете видеть на экране ниже.

Как клонировать и обновлять репо

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

Вы можете клонировать его, обновлять и нажимать как обычное репо

Резюме

• Если вы хотите развернуть приложение на управляемой платформе, выбрав среду выполнения, служба приложений — правильный выбор.
• Когда дело доходит до Vue с серверной частью NodeJS, вы можете создавать и развертывать несколькими способами, и служба приложений Azure является одним из них.
• Вам необходимо создать службу веб-приложения перед развертыванием нашего приложения с помощью Local git.
• Если вы поддерживаете два файла package.json для Vue и NodeJS соответственно, как показано ниже, вам необходимо создать проект Vue.
• Когда дело доходит до сервера NodeJS, вы должны работать на порту 8080, и вам нужно обслуживать ресурсы Vue из сборки, которую мы создали на предыдущем шаге.
• Если вы перейдете в центр развертывания службы приложений, которую мы создали выше. у нас есть три варианта, один из них — локальный git.
• когда вы вводите код с помощью этой команды git push azure master, он выводит много журналов, и вы можете найти URL-адрес журнала в конце журналов.

Вывод

Это один из способов развертывания приложения Vue со средой выполнения NodeJS в службах приложений вместе со средой выполнения Docker и другими. В будущих публикациях мы увидим аутентификацию, конфигурацию и т. Д.