Azure Static Web Apps – це безсерверна служба веб-хостингу для статичного веб-контенту, такого як файли HTML, CSS та JavaScript, а також безсерверних API на основі функцій Azure. Це спрощує розгортання, CI/CD та керування сучасними веб-додатками. У цій статті ми створимо перший Azure Static Web App з використанням технологій Vue.js для фронтенду та C# для API.

Для початку впевніться що у вас є обліковий запис в Azure та GitHub. Зареєструватись в Azure можна на офіційному сайті: https://azure.microsoft.com, для реєстрації в GitHub необхідно перейти за посиланням: https://github.com/join.

Спочатку давайте створимо копію, вже підготовлений репозиторій з фронтендом,  в своєму обліковий запис GitHub. Для цього перейдіть за посиланням (https://github.com/ievgen-pavlenko/static-web-app-vue/generate) і ведіть назву для вашого нового репозиторію.

Після того як створили копію, ми можемо приступити до створення самого ресурсу в хмарі. Хочу звернути вашу увагу, що після створення ресурсу, в вашому репозиторії, створиться файл з налаштуванням GitHub Actions.

Для створення ресурсу виконайте наступні кроки:

1. Увійдіть Azure portal
2. Виберіть Create a Resource
3. В поле пошуку введіть  Static Web Apps
4. Виберіть Static Web Apps
5. Натисніть Create
6. На вкладці Basics заповніть наступні данні:

7. Натисніть Sign in with GitHub та автентифікація за допомогою GitHub.
8. Введіть натувні значення GitHub:.

9. У розділі Build Details виберіть Vue.js  зі  спадного списку Build Presets default values.
10. In the App location box, enter /.
11. Leave the Api location box, /api.
12. In the Output location box, enter dist.
13. Натисніть кнопку Review + Create,  щоб переконатися, що всі відомості правильні.
14. Натисніть кнопку Create, щоб почати створення Azure Static Web App і підготувати GitHub Actions для розгортання.
15. Після завершення розгортання натисніть на кнопку Go to resource.
16. На сторінці ресурсу виберіть URL-посилання, щоб відкрити розгорнутий Azure Static Web App. Можливо, вам доведеться зачекати хвилину або дві, поки GitHub Actions завершить працювати.

Після успішного розгортання, сколонуємо ваш репозиторій локально і додамо Azure Functions. Для створення і тестування Azure Function знадобиться  Azure Functions Core Tools та Azure Static Web Apps CLI

Щоб їх встановити необхідно виконати наступні команди

npm install -g azure-functions-core-tools@4
npm install -g @azure/static-web-apps-cli

після успішного встановлення в папці зі склонованим репозиторієм  треба створи dotnet проект в якому буде зберігатись код для Azure Functions. Для цього в папці з проектом необхідно виконати наступну команду

func init api --dotnet

для того щоб додати нову Azure Function в папці api треба виконати

func new --name hello --template "HTTP trigger" --authlevel "anonymous"

Тепер змініть контент файлу App.vue на наступний код

<script setup>
import HelloWorld from './components/HelloWorld.vue'

import { onBeforeMount, ref } from 'vue'

const text = ref('You did it!')
onBeforeMount(async () => {
  const response = await fetch('/api/hello');
  if (!response.ok) {
    throw new Error(`HTTP error! Status: ${response.status}`);
  }
  text.value = await response.text()
})

</script>


<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
    <div class="wrapper">
      <HelloWorld :msg="text" />
    </div>
  </header>
</template>

<style scoped>
header {
  line-height: 1.5;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  display: block;
  margin: 0;
}
</style>

Тепер для того щоб перевірити чи все вірно, в корні репозиторію виконайте наступні команди:

npm install
npm run build
swa start dist --api-location api

Після цього можна відкрити браузер та зайти на http://localhost:4280.

Сайт повинен виглядати наступним чином:

Якщо все працює можна комітити і пушити зміни в GitHub, що призведе до запуску GitHub Actions і інсталяцію нової версії сайту

У ході даної статті, я розглянув процес створення та розгортання Azure Static Web Apps з використанням Vue.js для фронтенду та C# для API.