Рубрики
Uncategorized

Автоматизация развертывания веб -развертываний Flutter для NetLify с использованием действий GitHub

В последнее время было много суеты из -за трепета. Некоторые люди называют это будущим, а некоторые говорят … Tagged Flutter, Linux, Dart, DevOps.

В последнее время было много суеты из -за трепета. Некоторые люди называют это будущим, в то время как некоторые говорят, что это переоценено. Но я думаю, что это хорошая основа для изучения. Огромное количество вещей, которые можно сделать с помощью трепета, невероятно, включая Android, iOS, настольный компьютер и веб -программирование.

Здесь, в этом уроке, я собираюсь поделиться тем, как реализовать ваши развертывания Flutter Web, используя действия GitHub. Кроме того, мы собираемся использовать NetLify. Почему NetLify? Потому что, честно говоря, NetLify очень прост в использовании. Теперь, без лишних слов, давайте доберемся до этого.

Создание сайта NetLify

В этом разделе будет обсуждаться, как вы можете создать пустой сайт NetLify, используя CLI NetLify. Мы будем использовать NPM, чтобы установить его для нас. В моем случае я использую Ubuntu 18.04 в качестве хоста ОС для установки NPM.

1. Установите CLI NetLify

Чтобы установить CLI NetLify, вам просто нужно запустить:

npm install netlify-cli -g

После завершения установки проверьте, правильно ли она установлена с помощью этой команды:

netlify

2. Войдите в NetLify из CLI

Прежде чем вы сможете начать использовать CLI, NetLify требует вас для аутентификации.

netlify login

Затем откроется окно браузера:

3. Создание пустого сайта

После завершения вашего входа создайте пустой сайт, используя эту команду:

netlify sites:create --name __

4. Получение идентификатора вашего сайта и токена личного доступа

Чтобы непрерывное разработку удаленно, вам нужен как идентификатор вашего сайта, так и ваш личный токен доступа, чтобы помочь вам.

Получите идентификатор вашего сайта по:

  1. Вход в настройки сайта.
  2. Скопируйте значение идентификатора API.

Следующим шагом будет получение токена личного доступа.

Перейдите в настройки пользователя.

Чтобы получить токен доступа, вы должны сделать новый:

  1. Перейдите на вкладку «Приложения».
  2. Нажмите «Новый токен доступа».

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

Установить секреты репозитория

После того, как мы получили токены доступа и идентификатор сайта, мы сохраним их в секрете хранилища.

Примечание: Зачем нам использовать секреты репозитория? Чтобы предотвратить ток -репозиторие в репозиторий, чтобы не допустить чувствительных идентификаторов или токенов.

Чтобы создать секрет:

  1. Перейдите в настройки репозитория.
  2. Нажмите «Секреты» на левой вкладке.
  3. Нажмите «Новый секрет хранилища».

На странице «Новый секрет» вводит секретное имя и значение. Когда закончите, нажмите кнопку «Добавить секрет».

В целом, мы добавили около трех секретов: токен личного доступа GitHub, токен личного доступа NetLify и идентификатор сайта NetLify.

Получение доступа GitHub Токен

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

После открытия страницы настроек разработчика:

  1. Откройте страницу личных токенов доступа.
  2. Создайте новый токен для действий GitHub.

Следующие шаги будут:

  1. Введите имя для вашего токена.
  2. Проверьте рабочий процесс, чтобы дать доступ к действиям GitHub.
  3. Прокрутите в нижней части страницы.
  4. Нажмите кнопку «Создать токен».

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

Создание рабочего процесса CI/CD

CI/CD с использованием действий GitHub довольно прост. Это требует, чтобы мы сделали файл YAML. Этот файл yaml называется Рабочий процесс В действиях GitHub, потому что он определяет шаги, необходимые для формирования CI/CD.

name: Flutter-CI
on:
  push:
    branches: [master]
  pull_request:
    branches: [master]
  workflow_dispatch:

Чтобы начать наш рабочий процесс, мы должны включить сборки после запросов на толкание/вытягивание в главную филиал, предполагая, что все развертывания будут от мастера.

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - uses: subosito/flutter-action@v1
      with:
        channel: beta
    - run: flutter config --enable-web
    - run: flutter build web

Для процесса построения трепета я использовал действие, предпринимаемое Subosito. Вы можете проверить Флаторские действия детали здесь Анкет Для Flutter Web мы сначала должны инициализировать конфигурации, чтобы включить веб -сборки. Таким образом, мы бежали:

flutter config --enable-web

затем Если вы хотите добавить тесты в рабочий процесс, вы можете добавить команду:

flutter test

Наконец, создайте приложение, используя:

flutter build web

Результаты сборки будут в Построение/Интернет папка.

    - name: Deploy to Netlify
      uses: nwtgck/actions-netlify@v1.1
      with:
        publish-dir: './build/web'
        production-branch: master
        github-token: $
        deploy-message: "Deploy from GitHub Actions"
        enable-pull-request-comment: false
        enable-commit-comment: true
        overwrites-pull-request-comment: true
      env:
        NETLIFY_AUTH_TOKEN: $
        NETLIFY_SITE_ID: $
      timeout-minutes: 1

После успешной сборки разверните файлы для NetLify вручную. Вот фрагмент, который я использовал NWTGCK. Я изменил несколько переменных, чтобы иметь возможность публиковать приложения Flutter, но вы можете проверить NetLify Действия здесь Анкет

В этом последнем рабочем процессе вы получите доступ к секретам, которые мы ранее хранили в наших настройках репозитория. Весь рабочий процесс может быть скопирован из этой сутки ниже:

name: CI

on:
  push:
    branches: [master]
  pull_request:
    branches: [master]
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - uses: subosito/flutter-action@v1
      with:
        channel: beta
    - run: flutter config --enable-web
    - run: flutter build web

    - name: Deploy to Netlify
      uses: nwtgck/actions-netlify@v1.1
      with:
        publish-dir: './build/web'
        production-branch: master
        github-token: $
        deploy-message: "Deploy from GitHub Actions"
        enable-pull-request-comment: false
        enable-commit-comment: true
        overwrites-pull-request-comment: true
      env:
        NETLIFY_AUTH_TOKEN: $
        NETLIFY_SITE_ID: $
      timeout-minutes: 1

Ваш рабочий процесс CI/CD должен быть закончен. Сохраните рабочий процесс внутри .github/Workflows и попробуй запустить его сами! Вы можете проверить фиктивный сайт, который я развернул Здесь Анкет

Резюме

Мы успешно создали конвейер CI/CD для Flutter Web, используя действия GitHub. Суммировать наши шаги:

  1. Создайте пустой сайт NetLify.
  2. Получите токен личного доступа из NetLify и идентификатор сайта.
  3. Получить личный токен доступа от GitHub.
  4. Установите секреты в настройках репозитория.
  5. Создайте действие GitHub YAML внутри .github/Workflows Анкет

Вуаля! Мы закончили наш учебник. Теперь у вас есть открытая книжка для развертывания ваших будущих веб -приложений Flutter, используя действия GitHub.

Оригинал: «https://dev.to/agustinustheo/automating-flutter-web-deployments-to-netlify-using-github-actions-2g71»

Читайте ещё по теме: