Автор оригинала: DhananjayKumar.
Статические сайты — это код для клиента, означающий HTML, CSS и JavaScript без сторон сервера. В наши дни большинство статических сайтов являются некоторой формой приложения одной страницы, построенные с угловым, реагированным или VUE. Есть несколько способов размещения этих приложений, и я поделись несколькими экономически эффективными вариантами, которые стоит менее 1000 рупий в месяц.
Вариант 1: Хранение Azure Blob
Самым простым способом для работы сайта является хранение Azure Blob, поскольку он специально предназначен для обслуживания файлов как можно быстрее, а статические сайты являются просто файлами. Я не пробовал настроить пользовательский домен и привязку SSL-сертификата, но на основе недавнего обновления и документации он, кажется, поддерживается. Я поделился еще одним постом на эту тему, если я получу некоторое время.
Чтобы начать хостинг вашего веб-приложения на Azure Storage, создайте учетную запись GPV2 в Portal Azure или используйте существующую учетную запись GPV2 и нажмите на Статический сайт и Нажмите Включен Отказ
$ web и $ log Контейнер будет создан.
Загрузите свои веб-активы в $ web Контейнер, созданный как часть статического веб-сайта. Вы можете сделать это непосредственно в портале Azure, или вы можете воспользоваться Explorer Microsoft Azure Storage. А также Если вам нужно настроить непрерывный развертывание, вы можете использовать задачу Azure File Copy, как показано ниже —
Как это работает?
Когда вы включаете статические веб-сайты на вашей учетной записи хранилища, создан новая конечная точка веб-сервиса.
<имя учетной записи>. <зона имя> .web.core.windows.net.
Конечная точка Web Service всегда позволяет Anonymous Access Read, возвращает отформатированные HTML-страницы в ответ на сервисные ошибки и допускают только операции чтения объекта. Конечная точка веб-службы возвращает документ индекса в запрошенном каталоге как для корня, так и для всех подкаталогов. Когда служба хранения возвращает ошибку 404, веб-точка веб-конечной точки возвращает пользовательский документ об ошибке, если вы настроили его.
Вариант 2: Служить приложение Node Server (сервис приложений на Linux)
Мы создадим сервер узла, и этот сервер узла будет отвечать за то, чтобы запустить наше приложение raction, используя команду «Node Server.js». Теперь вы можете иметь такое же плана обслуживания приложений для размещения как приложение Backend, так и Frontend, размещенное в качестве приложения узла в Linux. Вы можете размещать до 8-10 веб-приложения в одном плане обслуживания приложений и на Linux это будет стоить 1000 рупий в месяц. Я предпочитаю этот подход, чем хостинг в Windows, поскольку план службы приложений в Windows будет стоить вам где-то рупии 5000 в месяц.
Создать файл «server.js» В каталоге «root» и напишите следующий код:
const express = require('express');
const app = express();
const path = require('path');
const port = process.env.PORT
app.use(express.static(path.join(__dirname, '')));
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, '', 'index.html'))
});
var server = app.listen(port, () =\> console.log('Api listening on ', server.address().port));
module.exports = server
Express_package.json.
{
"scripts": {
"start": "node server.js"
}
}
Структура файла будет выглядеть так.
Писать CI/CD трубопровод интересно, если это одностраничное приложение, скажем, реагируют. Action App уже содержит Package.json с поддержкой скрипта для запуска, сборки, тестирования. И нам нужен другой Package.json, необходимый для хостинга приложений узла. Хитрость вот — мы сохраняем файл пакета как Express_package.json в корневой папке. Во-первых, мы строим приложение React. Тогда мы копируем server.js и Express_package.json. как Package.json в папку сборки, созданную во время сценария сборки. Еще раз мы выполняем NPM Run Consustry к приложению NPM-узла, содержащее приложение React в качестве развертываемого компонента.
CI/CD-трубопровод:
Вариант 3: Услуги приложений на Linux с использованием пакета обслуживания
Когда вы настроили новый экземпляр службы приложений, вы можете выбрать базовую службу приложения OS, развертывание в Windows прямо вперед из-за сборки в IIS (поддержка веб-сервера). Но становится сложным, вы выбираете, чтобы опубликовать ваш статический сайт в Linux, так как он не поставляется с запеченным веб-сервером. Таким образом, вы не можете просто скопировать свой статический сайт там. Чтобы исправить это, нам нужно отправить веб-сервер с нашими файлами. Простой способ сделать это — использовать Подавать Пакет из NPM Отказ
Мы можем использовать тот факт, что Azure Baits PM2 в каждое приложение Nodejs в приложении. PM2 — это менеджер процессов для узла, и вы можете запустить приложения с ним. Это означает, что если мы включаем правильный тип файла в нашем проекте, Azure увидит его и использовать PM2, чтобы начать наш проект. Файл PM2 ищет называется Ecoysystem.config.js Отказ В этом файле сообщите PM2, чтобы начать «подавать». Передача флагов -s делает «подавать» маршрут каждый запрос, он не может найти обратно к index.html. Мы хотим, потому что у нас есть спа, и мы обрабатываем все маршрутизацию на клиенте.
module.exports = {
apps: [
{
script: "npx serve -s"
}
]
};
Возможность службы приложений для создания вашего проекта для вас экономит время и усилия, когда развертывание «Kudu» будет использовать встроенные изображения работников. Запрос попадает в переднюю роль, которая рассчитывает подходящий работник (Docker Host).
Веб-приложения на Linux построены сверху Docker Technology, два разных контейнера (контейнер приложения и KUDU) на приложение, которое разделяет тот же объем хранения.
Запрос направляется на контейнер приложений, который использует PM2 для Manager Nodejs
Оригинал: «https://www.codementor.io/@dhananjaykumar/static-site-hosting-options-in-azure-1alakaxivy»