Изучение различных методов размещения веб-приложения Flutter на Firebase

Flutter, набор инструментов пользовательского интерфейса Google для создания скомпилированных в собственном коде приложений, приобрел значительную популярность среди разработчиков благодаря своим кроссплатформенным возможностям. С помощью Flutter вы можете создавать потрясающие веб-приложения, которые легко работают в различных браузерах. В этой статье мы рассмотрим различные способы размещения веб-приложения Flutter на Firebase, мощной облачной платформе.

Метод 1. Развертывание с помощью интерфейса командной строки хостинга Firebase

Firebase предоставляет интерфейс командной строки (CLI), который упрощает процесс развертывания. Выполните следующие действия, чтобы разместить веб-приложение Flutter на хостинге Firebase:

Шаг 1. Установите Firebase CLI

npm install -g firebase-tools

Шаг 2. Создайте веб-приложение Flutter

flutter build web

Шаг 3. Инициализируйте Firebase в своем проекте

firebase init

Шаг 4. Разверните приложение на хостинге Firebase

firebase deploy

Метод 2: хостинг с консолью Firebase

Консоль Firebase предоставляет веб-интерфейс для управления вашими проектами Firebase. Вот как вы можете разместить свое веб-приложение Flutter с помощью Firebase Console:

Шаг 1. Создайте веб-приложение Flutter

flutter build web

Шаг 2. Создайте проект Firebase и настройте хостинг Firebase

  • Перейдите в консоль Firebase (console.firebase.google.com)
  • Создайте новый проект или выберите существующий.
  • Включить хостинг Firebase

Шаг 3. Разверните приложение на хостинге Firebase

  • Перейдите на вкладку «Хостинг».
  • Следуйте инструкциям по развертыванию приложения

Метод 3. Непрерывное развертывание с помощью действий GitHub

Если вы используете контроль версий с Git и GitHub, вы можете автоматизировать процесс развертывания с помощью действий GitHub. Вот пример рабочего процесса:

Шаг 1. Создайте новый файл с именем .github/workflows/firebase.ymlв репозитории вашего проекта Flutter.

Шаг 2. Добавьте в файл firebase.ymlследующее содержимое:

name: Deploy to Firebase Hosting
on:
  push:
    branches:
      - main
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v2
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'
      - name: Install Firebase CLI
        run: npm install -g firebase-tools
      - name: Build and deploy
        run: |
          flutter build web --release
          firebase deploy --token ${{ secrets.FIREBASE_TOKEN }}

Шаг 3. Создайте токен Firebase

  • Установить Firebase CLI локально
  • Запустите firebase login:ciи следуйте инструкциям, чтобы сгенерировать токен

Шаг 4. Добавьте токен Firebase в качестве секрета в свой репозиторий GitHub

  • Перейдите в «Настройки» вашего репозитория >«Секреты».
  • Добавьте новый секрет с именем FIREBASE_TOKENи вставьте сгенерированный токен

Шаг 5. Зафиксируйте и отправьте изменения в свой репозиторий

  • Рабочий процесс автоматически запустится, создаст и развернет ваше приложение на хостинге Firebase.