Итак, вы создали потрясающий веб-сайт на Angular и теперь хотите поделиться им со всем миром? Не смотрите дальше! В этом сообщении блога мы познакомим вас с различными методами развертывания вашего сайта Angular на Firebase, мощной платформе, которая предоставляет хостинг, услуги баз данных и многое другое. Мы рассмотрим различные варианты развертывания и предоставим пошаговые инструкции, которые помогут быстро запустить ваш сайт.

Метод 1: Firebase CLI
Интерфейс командной строки Firebase (CLI) — это популярный и эффективный способ развертывания сайта Angular в Firebase. Вот как это можно сделать:

Шаг 1. Установите Firebase Tools
Сначала убедитесь, что на вашем компьютере установлен Node.js. Затем откройте терминал и установите Firebase CLI глобально, выполнив следующую команду:

npm install -g firebase-tools

Шаг 2. Настройте Firebase
Далее перейдите в корневой каталог вашего проекта Angular в терминале и выполните следующую команду для инициализации Firebase:

firebase init

Эта команда проведет вас через ряд подсказок. Выберите функции Firebase, которые вы хотите использовать, включая хостинг.

Шаг 3. Создайте проект Angular
Перед развертыванием вам необходимо создать проект Angular. Используйте следующую команду, чтобы создать готовую к работе сборку:

ng build --prod

Эта команда создаст оптимизированные файлы в папке «dist» вашего проекта.

Шаг 4. Развертывание в Firebase
Наконец, используйте интерфейс командной строки Firebase для развертывания сайта Angular:

firebase deploy

После успешного развертывания Firebase предоставит вам URL-адрес, по которому размещен ваш сайт.

Метод 2: действия GitHub
Если ваш проект Angular размещен на GitHub, вы можете использовать действия GitHub для автоматического развертывания в Firebase. Вот как:

Шаг 1. Настройте хостинг Firebase
Убедитесь, что для вашего проекта Firebase включен хостинг Firebase. Это можно сделать через консоль Firebase.

Шаг 2. Создайте рабочий процесс действий GitHub
В корневом каталоге вашего проекта Angular создайте папку .github/workflows, если она не существует. Затем создайте файл рабочего процесса (например, firebase.yml) и настройте его с помощью следующего кода:

name: Deploy to Firebase
on:
  push:
    branches:
      - main
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: 14
      - name: Install dependencies
        run: npm ci
      - name: Build project
        run: ng build --prod
      - name: Deploy to Firebase
        run: npm run firebase-deploy
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

Шаг 3. Получите токен Firebase
Для развертывания с помощью действий GitHub вам понадобится токен Firebase. Чтобы получить его, выполните следующие действия:

• Установите Firebase CLI локально, запустив npm install -g firebase-tools.
• Аутентифицируйтесь с помощью Firebase, запустив firebase login:ci, и следуйте инструкциям для входа.

Шаг 4. Настройте секреты GitHub
В настройках репозитория GitHub перейдите в раздел «Секреты» и добавьте новый секрет с именем FIREBASE_TOKEN. Вставьте токен Firebase, полученный на предыдущем шаге.

Вот и все! Каждый раз, когда вы вносите изменения в ветку main, GitHub Actions автоматически создает и развертывает ваш сайт Angular в Firebase.

В этой статье мы рассмотрели два популярных метода развертывания сайта Angular на Firebase. Первый метод заключался в использовании Firebase CLI для настройки и развертывания вашего сайта вручную. Второй метод использовал действия GitHub для автоматического развертывания. Выберите метод, который лучше всего соответствует вашему рабочему процессу, и опубликуйте свой сайт Angular в Интернете с помощью Firebase уже сегодня!