Рубрики
Uncategorized

Развертывание приложений SVELTE к Firebase с действиями GitHub

Используйте действия GitHub для автоматизации развертывания приложений SVELTE на хостинг Firebase. Вступление… Теги от Firebase, Svelte, Github, Devops.

Firebase + Svelte (2 часть серии)

Используйте действия GitHub для автоматизации развертывания приложений SVELTE на хостинг Firebase.

В этом руководстве мы будем развертывать приложение Svelte для хостинга FireBase. Мы также будем автоматизировать процесс развертывания, используя действия GitHub, чтобы он разворачивал каждый раз, когда мы нажимаем изменения в GitHub. Для тех из вас, что вы не знакомы с Svelte, я уже написал руководство для начинающих на Свелте, что вы можете проверить здесь Отказ Это довольно легко узнать основные основы, поэтому обязательно пройдите через это сначала.

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

Даже если ваш корпус использования отличается, и вы заинтересованы только в автоматизации процесса развертывания для хостинга FireBase, вы все еще можете выполнить и изменять шаги в соответствии с выбором Frontend Framework. В качестве альтернативы вы также можете пропустить в разделе «Непрерывный развертывание» ниже.

Реконструировать

В последней части мы создали функцию Backend FireBase, которая принимает изображение вместе с несколькими другими параметрами, чтобы преобразовать это изображение в ASCII ART и отправляет его обратно в виде строки.

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

0. Начальная настройка-

Если вы приедете сюда из предыдущей части, вы можете пропустить шаг 0, в противном случае сначала выполните следующие действия:

  1. Создать проект FireBase- Перейдите на консоль Firebase и создайте новый проект. Вы можете настроить Google Analytics для проекта, но это не очень важно для этого приложения.

  2. Настройте FireBase CLI- Вам нужно будет установить Node.js уже в вашей системе. Установите CLI через NPM, запустив NPM Установить -G Firebase-Tools

  3. Инициализировать FireBase SDK- RUN Firebase Вход Чтобы войти в CLI через браузер, используя учетную запись, на ваш новый проект связан.

1. Проверьте свой каталог-

Перейдите в корневой каталог вашего проекта FireBase.

2. Запустите FireBase Init-

Один раз в корневом каталоге запустите Инитация Firebase , Если вы следили с предыдущей статьей, она скажет вам, что вы уже в проекте FireBase Но это нормально, настройка хостинга не повлияет на созданную вами функцию. При предложении, для каких функций вы хотите настроить, выберите Хостинг Отказ

3. Опции конфигурации-

Что вы хотите использовать в качестве вашего публичного каталога? Оставьте по умолчанию (публично). Настройте как одностраничное приложение? , да

Мы будем использовать инструмент под названием дегит Чтобы получить базовый шаблон для нашего приложения SVELTE, поэтому сначала установите, что если у вас его еще не установлено.

npm install -g degit

Создайте приложение SVELTE в каталоге проекта FireBase

npx degit sveltejs/template client
cd client
npm i

Запустить dev server запустить

npm run dev

Если вы посетите http://localhost: 5000 Должна быть отображена страница запуска по умолчанию, и это означает, что ваша настройка была успешной.

Настроить Svelte

Чтобы развернуть SVELTE, чтобы хостинг Firebase нам нужно сначала внести некоторые изменения.

Если вы посмотрите на свою структуру файлов, вы должны увидеть два публичный Папки, которые помещают что-то вроде этого.

|--client/
| |--public/
|
|--public/

Общественная папка, созданная хостингом Firebase, должна быть заменена тем, что сгенерирована SVELTE. Это означает заменить ./public с ./Client/public . Это сделано, потому что ./public Папка — это один развернутый для хостинга Firebase И мы хотим, чтобы это был наш сборник Svelte Code.

Просто копирование папки не будет делать, мы должны настроить Сценарий свертывания Клиент/клиент/Rollup.config.js Так что SVELTE компилирует 0UR Frestend к новому Публичный/сборка/ папка. Для этого заменить этот раздел файла конфигурации

..
export default {
    ...
    ...
}
..

С этим-

export default {
    input: 'src/main.js',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
    // Change Js bundle location
        file: '../public/build/bundle.js'
    },
    plugins: [
        svelte({
            dev: !production,
            // Change css bundle location
            css: css => {
                css.write('../public/build/bundle.css');
            }
        }),
        resolve({
            browser: true,
            dedupe: ['svelte']
        }),
        commonjs(),
        !production && serve(),

        // Watch the new `public` directory and refresh
        // the browser on changes
        !production && livereload('../public'),

        production && terser()
    ],
    watch: {
        clearScreen: false
    }
};

Svelte использует СИРВ Чтобы провести заявку на ваш localhost, и нам придется изменить целевую папку, которую СИРВ служит новым публичный папка. Для этого перейти к Скрипты Раздел клиент/package.json и искать «Начать» скрипт Заменить его следующим

"scripts": {
    ...
    "start": "sirv ../public"
    ...
}

Теперь, если вы запустите NPM запустить Dev Чтобы обслуживать ваше приложение снова, вы должны увидеть ту же страницу начала по умолчанию при посещении http://localhost: 5000 Если все настроено правильно.

Код Frontend

Я не буду подробно объяснить код для Frontend, поскольку основной целью этого поста — показать вам, как настроить и развернуть приложение. Frontend в основном является многократной формой, в которой пользователь должен загрузить изображение, указать количество символов, используемых для представления одной строки результирующегося изображения ASCII (ширина) и выберите набор символов, которые будут сделаны ASCII ART из (Charset ).

Как только вся эта информация была представлена пользователем, запрос AJAX отправляется в облачную функцию в https://US-Central1- .Cloudfunctions.net/ascii И полученный арт-строка ASCII в ответ напечатан на экране.

Вы можете увидеть демонстрацию этого в действии в Pix2ascii или проверить код на Github Отказ Вы можете очень легко реализовать эту функциональность, используя другую структуру или свой собственный пользовательский интерфейс.

Это заканчивается частью SVELTE этого урока.

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

  1. В вашем репозитории GitHub перейдите на вкладку «Действия» и выберите Установите рабочий процесс самостоятельно . Это приведет вас к редактору с базовым рабочим процессом, который вы можете заменить с рабочим процессом, который мы будем создавать ниже.

  2. Если он еще не существует, в вашем каталоге репозитория создайте ..gitub папка, а затем папка называется рабочие процессы в этом. Создайте файл рабочего процесса там под ..Github/Workflows/ и назвать это Deploy.yml Отказ

Чтобы аутентифицировать наше развертывание в Firebase, нам сначала понадобится токен авторизации от Firebase. Чтобы получить токен, запустить Firebase Login: CI В вашем терминале и скопируйте токен, который он возвращается. Затем добавьте этот токен в свой репозиторий, перейдя на Настройки> Секреты> Новый секрет Отказ Назовите токен Firebase_token. и вставьте токен, который вы скопировали с терминала.

В .yml.yml. Файл Мы укажем шаги для нашего рабочего процесса.

name: CI/CD

# When the workflow will run, in this case
# on push or pull request to the master branch
on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

# Jobs are a sequence of steps
jobs:
  # This workflow has only one Job, build
  build:
    # The type of container the workflow will run on 
    runs-on: ubuntu-latest

    # The sequence of steps for this job
    steps:
    # Checks-out your repository so your job can access it
    - uses: actions/checkout@v2

    # First install dependencies for the front end and then 
    # for the cloud function. If you only have frontend remove the lines 
    # from after "npm run build" till the next step i.e. "Firebase Deploy"
    - name: Build
      run: |
        cd client
        npm i
        npm run build
        cd ..
        cd functions
        npm i

    # Install firebase tools and deploy to firebase
    # using the token we created earlier
    - name: Firebase Deploy
      run: |
        sudo npm install -g firebase-tools
        firebase deploy --token ${{ secrets.FIREBASE_TOKEN }}

Теперь каждый раз, когда вы нажимаете изменения в ваш репозиторий GitHUB, новая работа будет запущена для развертывания вашего приложения в Firebase. Хотя этот пример предназначен для облачных функций и хостинга, вы можете использовать ту же логику для автоматического развертывания изменений в других услугах FireBase.

Веб-сайт будет размещен в <Ваше-проектное имя> .Web.app После того, как он успешно развернут, и вы можете просмотреть окончательный результат там.

Avek-Saha/pix2ascii.

Преобразуйте изображение в Ascii Art

Проверьте живую демонстрацию здесь — Pix2ascii Отказ

Прочитайте предыдущую часть здесь: Начало работы с функциями FireBase

Firebase + Svelte (2 часть серии)

Оригинал: «https://dev.to/aveeksaha/deploying-svelte-apps-to-firebase-with-github-actions-745»

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