Часть 14. Развертывание в Azure

Разверните свой проект в Azure в этом заключительном руководстве и узнайте, как работает развертывание в Svelte.

Я пытался развернуть этот проект много-много раз, думая, что обычный адаптер сработает. Залил на Github, отладил, пытался исправить ошибки, менял файл .YAML, ничего не работало.

Я думал, что предустановки Azure для Svelte будет достаточно для его запуска. Но я не совсем понял, как это все работает.

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

Как развертывание работает в Svelte

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

В чем разница между статическим и динамическим веб-приложением?

Статическое веб-приложение – это веб-приложение, которое предоставляет пользователю статические HTML-страницы. Это означает, что содержимое веб-страниц не изменится, если веб-разработчик вручную не обновит HTML-код. Динамическое веб-приложение — это веб-приложение, которое использует сценарии на стороне сервера для создания динамических веб-страниц для пользователя. Это означает, что содержимое веб-страницы создается «на лету» и изменяется в зависимости от ввода пользователя или других источников данных.

— «интернет-источник»

Я думал, что, поскольку Svelte создает динамическое веб-приложение, ему не нужно ничего создавать. Тем не менее, он генерировал целую кучу файлов, и они были размещены где-то, где к ним можно было получить доступ на внешнем интерфейсе.

Однако Svelte создает эти статические файлы. Они создаются там, где вы создаете свое приложение, и находятся в папке .svelte-kit, которая является скрытой папкой.

Теперь Azure не нравится такая установка. Нет, это не так. Он хочет, чтобы файлы размещались другим способом, способом, который мы можем изменить с помощью svelte-adapter-azure-swa, и это адаптер, который немного упрощает развертывание в Azure.

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

svelte-adapter : адаптер, который svelte использует для сборки. Вы хотите использовать адаптер Svelte, потому что, если бы вы использовали адаптер React, он не знал бы, что делать со всеми вашими файлами *.svelte, и немного запутался бы. Это svelte-adapter, а не React.

azure-swa: Azure — это служба, которую вы будете использовать для развертывания. Вам не нужно думать об этом. swa — тип развертывания, который вы будете выполнять. SWA означает Static Web App.

Теперь, запомнив эти две группы, просто помните, что они заканчиваются на swa, и все будет хорошо.

Таким образом, чтобы развертывание Svelte работало, оно генерирует файлы в папку, а затем запускает скрипт, который запускает все файлы на переднем и заднем концах. Это означает, что ваши созданные файлы помещаются в папку, где их может обслуживать Node.

Итак, представьте это так: у вас есть файлы, которые нужно обслуживать с помощью узла, помеченного .svelte. Node обслуживает не файлы .svelte, а файлы html/js/css. Узел должен переварить файлы и выплюнуть их, чтобы его можно было обслуживать через обычный сервер.

Загрузите его на Github

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

Разверните свое приложение

Чтобы развернуть приложение, вам нужно прикрепить svelte-adapter-azure-swa, установив его как пакет.

npm i -D svelte-adapter-azure-swa

Теперь в svelte.config.js вставьте этот код:

import azure from 'svelte-adapter-azure-swa';

export default {
 kit: {
  ...
  adapter: azure()
 }
};

Затем создайте статическое веб-приложение в Azure и подключитесь, заполнив следующие свойства:

Значение свойстваapp_location./api_locationbuild/serveroutput_locationbuild/static

Если вы не знаете, как это сделать, следуйте здесь инструкции для лучшего объяснения этого шага.

Создайте проект и запустите

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

И это обертка!

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

Но до тех пор не прекращайте взламывать!