Автоматичне розгортання безкоштовної презентаційної сторінки на Angular на вашому домені за допомогою GitHub та Azure - javascript.org.ua

В сучасному цифровому середовищі створення професійної онлайн присутності є важливим для будь-якого бізнесу. Розгортання презентаційної сторінки може значно підвищити видимість вашого бренду та його авторитет. Найкраща частина? Ви можете досягти цього безкоштовно, використовуючи GitHub та Azure Static Web Apps. Цей посібник проведе вас крок за кроком через процес, гарантуючи, що ви зможете без зусиль розгорнути та підтримувати свою бізнес-сторінку з мінімальними витратами часу та зусиль.

Передумови

Перед тим як розпочати процес розгортання, переконайтеся, що у вас є наступне:

GitHub Репозиторій: Репозиторій на GitHub, який містить вашу Angular програму.
Visual Studio: Встановлене на вашому комп'ютері для розробки.
Обліковий запис Azure: Активний обліковий запис Azure. Якщо у вас його немає, ви можете зареєструватися безкоштовно.
Доменне ім'я: Придбане у реєстратора доменів, як-от OVH.

Крок 1: Створення Azure Static Web App

Azure Static Web Apps забезпечує зручний спосіб розгортання повноцінних веб-додатків безпосередньо з вашого GitHub репозиторію. Виконайте наступні кроки, щоб налаштувати свій Static Web App:

Встановлення Azure Extension:

Відкрийте Visual Studio.
Перейдіть на маркетплейс розширень та встановіть розширення Azure Tools.

Azure Tools

Створення ресурсу Static Web App:

Клацніть правою кнопкою миші на іконці інструмента Azure в Visual Studio та виберіть Create Static Web App.
Введіть наступні деталі:
- Назва: appName (або ваша обрана назва).
- Регіон: Виберіть West US 2 або найближчий до вашої цільової аудиторії.
- Конфігурація Build Preset: Виберіть Angular.
- Розташування коду: / (коренева директорія вашого проєкту).
- Назва проєкту: Введіть назву вашого проєкту.
Завершіть створення:
- Клацніть Create. Azure підготує необхідні ресурси та зв'яже їх з вашим GitHub репозиторієм.

Крок 2: Налаштування робочого процесу GitHub Actions

Автоматизація процесу розгортання гарантує, що кожного разу, коли ви вносите зміни у ваш GitHub репозиторій, Azure автоматично збирає та розгортає вашу програму. Ось як налаштувати робочий процес GitHub Actions:

1. Перейдіть до вашого GitHub репозиторію:

Перейдіть до вашого репозиторію на GitHub.

2. Створіть робочий процес GitHub Actions:

Клацніть на вкладку Actions.
Виберіть New workflow і оберіть шаблон для Azure Static Web Apps.

3. Визначте конфігурацію робочого процесу:

Замініть вміст за замовчуванням на наступну YAML конфігурацію:

name: Azure Static Web Apps CI/CD  

on:  
 push:  
 branches:  
 - main  
 pull_request:  
 types: [opened, synchronize, reopened, closed]  
 branches:  
 - main  

jobs:  
 build_and_deploy_job:  
 if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')  
 runs-on: ubuntu-latest  
 name: Build and Deploy Job  
 steps:  
 - uses: actions/checkout@v3  
 with:  
 submodules: true  
 lfs: false  
 - name: Build And Deploy  
 id: builddeploy  
 uses: Azure/static-web-apps-deploy@v1  
 with:  
 azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ORANGE_BUSH_0D9D3751E }}  
 repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)  
 action: "upload"  
 ###### Repository/Build Configurations - These values can be configured to match your app requirements.

######  
 # Для отримання додаткової інформації щодо конфігурацій робочих процесів Static Web App, будь ласка, відвідайте: https://aka.ms/swaworkflowconfig  
 app_location: "/" # Шлях до вихідного коду програми  
 api_location: "api" # Шлях до вихідного коду API - необов'язково  
 output_location: "dist/{REPLACE_WITH_PROJECT_NAME}/browser" # Каталог зібраного контенту програми - необов'язково  
 ###### Кінець конфігурацій репозиторію/зборки ######  

 close_pull_request_job:  
 if: github.event_name == 'pull_request' && github.event.action == 'closed'  
 runs-on: ubuntu-latest  
 name: Завершення роботи з Pull Request  
 steps:  
 - name: Закрити Pull Request  
 id: closepullrequest  
 uses: Azure/static-web-apps-deploy@v1  
 with:  
 azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ORANGE_BUSH_0D9D3751E }}  
 action: "close"

У рядку outputlocation замініть {REPLACEWITHPROJECTNAME} на назву вашого додатка.

Зробіть коміт і запуште зміни в гілку main.

Крок 3: Налаштування вашого Angular додатка

Щоб ваш Angular додаток збірно працював і безперешкодно інтегрувався з Azure, можливо, вам буде потрібно налаштувати файл index.html.

Змініть index.html:

Відкрийте файл index.html у вашому Angular проєкті.
Переконайтесь, що джерела скриптів правильно вказані. Наприклад:

2. Зберіть ваш Angular додаток:

Переконайтесь, що каталог зібраних файлів відповідає значенню output_location, вказаному у вашому робочому процесі GitHub Actions (dist/project_name/browser).
Зберіть додаток.

Крок 4: Розгортання та перевірка

Коли ваш робочий процес GitHub Actions налаштовано, розгортання буде автоматизовано. Ось як перевірити, чи все працює правильно:

Запуште зміни в GitHub:

Зробіть коміт всіх змін у вашому Angular додатку та запуште їх у гілку main.
Це викличе робочий процес GitHub Actions, який збере і розгорне ваш додаток в Azure.

2. Моніторинг розгортання:

Перейдіть на вкладку Actions у вашому GitHub репозиторії, щоб відслідковувати прогрес робочого процесу.
Переконайтесь, що всі кроки завершились успішно без помилок.

3. Перевірка розгортання в Azure:

Увійдіть в Azure.
Перейдіть до ресурсу ваших Static Web Apps.
Знайдіть URL вашого розгорнутого додатку і клікніть на нього, щоб переглянути вашу живу презентаційну сторінку.

Крок 5: Налаштування власного домену з OVH

Щоб брендувати вашу презентаційну сторінку власним доменним ім'ям, виконайте наступні кроки, щоб зв'язати ваш домен з OVH до Azure Static Web Apps:

Перейдіть до налаштувань Azure Static Web Apps:

У порталі Azure перейдіть до вашого ресурсу Static Web Apps.
Перейдіть до налаштувань > Custom domains.

2. Додайте власний домен:

Додавання власного домену

Клацніть Add custom domain і виберіть Add custom domain на іншому DNS.
Введіть доменне ім'я: наприклад, www.yourdomain.com.

Важливо вказувати префікс www при зв'язуванні з OVH, оскільки OVH зазвичай краще керує субдоменами, як-от www, що забезпечує належне резолювання DNS та сумісність з вимогами CNAME Azure.

Виберіть тип запису: Оберіть CNAME.
Скопіюйте значення CNAME, надане Azure.

**3.

Налаштування DNS на OVH:

Увійдіть до вашої панелі управління OVH.
Перейдіть до розділу Domains і виберіть ваш домен.
Перейдіть до DNS Zone.

Додавання запису в OVH

Додайте запис CNAME:
Піддомен: www (це зробить його www.yourdomain.com)..)
Тип: CNAME.
Мета: Вставте значення CNAME, яке ви скопіювали з Azure.
Збережіть зміни.

4. Перевірка домену в Azure:

Поверніться до порталу Azure і натисніть Validate.
Azure перевірить налаштування DNS. Цей процес може зайняти до 24 годин, але зазвичай він завершується набагато швидше.

5. Завершення налаштування домену:

Після валідації ваш власний домен буде прив'язано до вашого Azure Static Web App.
Тепер ви можете отримати доступ до вашої презентаційної сторінки за адресою www.yourdomain.com.

Висновок

Вітаємо! 🎉 Ви тільки що розкрили секрет створення стильного, професійного сайту для вашого бізнесу — і все це без витрат. Завдяки GitHub та Azure Static Web Apps ви автоматизували процес розгортання, гарантуючи, що ваш сайт залишатиметься актуальним після кожного оновлення. Крім того, за допомогою вашого власного домену від OVH ваш бренд тепер сяє яскравіше і вирізняється серед інших у цифровому середовищі.

Покінчено з виснажливими розгортаннями та великими витратами на хостинг. Цей спрощений підхід не лише економить ваш час і гроші, але й дає вам змогу зосередитись на найважливішому: зростанні вашого бізнесу та залученні клієнтів. Незалежно від того, чи ви досвідчений розробник, чи тільки починаєте, цей посібник дає вам інструменти для створення потужної онлайн присутності без зайвих зусиль.

Тож не зволікайте — виводьте свій бізнес в онлайн, вражайте клієнтів і спостерігайте, як ваш бренд процвітає. З GitHub та Azure поруч, обмеження немає. Успішного розгортання, і нехай ваш онлайн-успіх сяє! 🚀✨

Перекладено з: Automatically deploy a free angular presentation page on your domain using GitHub and Azure