Рубрики
Uncategorized

Рабочий процесс непрерывной интеграции и развертывания с Vercel, Firebase и Circleci

Я недавно настроил весь рабочий процесс CI / CD для проекта на работе, это был первый раз … Теги с серверуми, DevOps, Firebase, Tutorial.

Недавно я создал весь рабочий процесс CI/CD для проекта на работе, это был первый раз, когда я действительно давал конфигурацию CI и автоматическое развертывание с этим стеком. С комбинацией инструментов ниже я чувствую, что достигли правильного сочетания доверия/автоматизации для наших текущих потребностей.

Инструменты и их обязанности

  • Кабинета : Мы используем Circleci Для проведения всех наших тестов/проверка линтирования/типа как для переднего конца, так и для бэкинда. Это также оркестровое развертывание бэкэнда для функции FireBase
  • Vercel : Мы используем Vercel Развернуть наш передний конец. Это связано с нашим репо GitHub, чтобы автоматически развернуть интерфейс.
  • Firebase : Мы используем Firebase Для бэкэнда (безвесочных функций, а также база данных и аутентификация). Как правило, мы будем использовать один проект для разработки и один проект для Prod.

Обзор

Внешний интерфейс

Наш клиент в основном Nextjs Ract app. Он очень хорошо с Vercel с Vercel так как они позади Neardjs, интеграция/инструментарий действительно жидкости.

Чтобы начать, вам нужно:

Это должно быть достаточно, чтобы вы начали и могли автоматически развернуть, когда вы объединяете на настроенный ветвь на Vercel.

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

Переменная среды

Все ваши переменные среды можно настроить непосредственно на Vercel

Если вам нужно предоставить разные значения в вашей кодовой базе на основе ветви, которую вы находитесь на (и, следовательно, вы нацеливаете вашу постановку или продку), вы можете полагаться на Система Env Переменные

export const getEnvVar = (key: string): string => {
    const isProd = process.env.NEXT_PUBLIC_VERCEL_GITHUB_COMMIT_REF === 'master';

    switch (key) {
        case 'NEXT_PUBLIC_FIREBASE_API_KEY':
            return isProd
                ? process.env.NEXT_PUBLIC_PROD_FIREBASE_API_KEY
                : process.env.NEXT_PUBLIC_FIREBASE_API_KEY;
        default:
            throw new Error(`key ${key} is not recognized `);
    }
}

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

Если вы хотите использовать хостинг FireBase, вы будете ограничены функцией в US-Central1. . Это Известное ограничение А пока, если вы хотите служить динамическому контенту, вам придется настроить Google Cloud Run вместо

Задний конец — Firebase Fearbase Функции

Эта часть немного сложнее между местными и продуктами. За этим наблюдается несколько концепций ключа Firebase.

  • Проект Firebase Обычно вы используете проект FireBase для вашего продукта, и один для вашей постановки. Это означает, что вам нужно будет переключаться между проектом, когда вы хотите развернуть код на постановке или на PROD. Это будет автоматизировано через CI.
  • Сервисная учетная запись : Это один из способов аутентификации самостоятельно в качестве администратора проекта FireBase. Ваша учетная запись услуг может быть сгенерирована на консоли Firebase
  • Runtimeconfig: Это конфиг, который вы можете настроить через Firebase Cli Обычно добавлять переменные ENV, связанные с вашим проектом FireBase.
  • Firebase CLI: Инструмент командной строки, который позволяет выполнять несколько задач на Firebase, как:
  • Войдите в свой проект FireBase.
  • Добавление/выбор проекта, на котором вы сейчас работаете
  • Добавление переменной env в ваш проект
  • генерировать FirebAsetoken, необходимый для развертывания через CI

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

Настройка общих для местных, так и для постановки/Prod

Конфигурация проекта Firebase:

  • Поэтому вы сначала нуждаетесь в доступе к одной или двум проектам FireBase. Эта установка будет в основном прохождение, имеющую 2 проекта Firebase (постановка и профзарнита) с каждой собственной аутентификацией и базой данных. Просто войдите на Firebase и следуйте шагам
  • Установите Firebase-CLI
npm install -g firebase-tools
  • Войдите через Firebase-Cli. Это позволяет следующим шагам
firebase login
  • Как только вы вошли в систему, вы сможете добавить различные проекты Firebase в текущую конфигурацию:
firebase use --add

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

Переменная среды:

Для ваших переменных ENV вы можете добавить их непосредственно на ваш проект FireBase через Firebase CLI:

firebase functions:config:set someservice.id="THE CLIENT ID"

Вы можете позже получить доступ через:

const functions = require('firebase-functions');
...
const id = functions.config().someservice.id,

Примечание: Эти переменные среды хранятся непосредственно в вашем проекте на Firebase и как таковые вам не нужны их локально. Обычно вы загружаете их локально, чтобы проверить значение вручную. Может быть, хорошая идея для гитигнала, на всякий случай.

Инициализировать администратор SDK:

Чтобы настроить и добавить свой FireBase-admin SDK, вам нужно Добавить учетную запись услуг .

Это приведет к локальному файлу .json, который вы будете размещать под определенной папкой Gitignore на вашем компьютере.

Затем Firebase рекомендует поставить путь к файлу в переменной среды (предыдущий раздел) — вы можете обратиться к Документы Firebase, если это необходимо

import * as admin from 'firebase-admin';
...
const config = functions.config();

const app = admin.initializeApp({
            credential: admin.credential.cert(config.credentials.google_application),
            databaseURL: `https://${config.credentials.project_id}.firebaseio.com`
        });

Местная настройка

Чтобы разработать локально, обычно я в конечном итоге использую промежуточный проект для базы данных/AUTH и SERVERLENLE. Это может быть достигнуто:

  • Выберите свой проект FireBase вручную через Firebase CLI с Firebase --use xxx.

Примечание: Обратите внимание на какой проект, который вы используете в настоящее время, иногда вы хотите запустить скрипт против PROD, и вы в конечном итоге используете Firebase --use Master Какой будет выбранный проект, пока вы повторете постановку постановки/Ваш тест ENV

Мы хотим избегать развертывания функций без сервеса вручную на данном этапе и захотите передать эту ответственность перед CI

Настройка CI

CI будет отвечать за развертывание наших функций для FireBase.

Очевидно, некоторые ограничения:

  • Вы не хотите разоблачить ваш сервопривод в вашем репо
  • Вам необходимо переключить проект, используемый для развертывания на основе ветви

Для достижения этих целей мы должны настроить несколько вещей:

  • Возьмите путь к тому, где должна храниться учетная запись вашей службы, и сохраняет ее как переменную ENV на CIRCLECI.
  • Возьмите свой местный сервис и кодировать его на Base64 Чтобы сохранить его как переменную env на circleci. Это позволяет Circleci хранить сложную структуру как строку.
  • Хорошая практика — это добавить Base_64 В конце вашего имени переменной. Обычно я в конечном итоге 2 var в circleci, что-то вроде: Function_prod_service_account_base64 и Function_staging_service_account_base64.
  • Возьмите VerviceAccount от CircleCi и декодируйте/скопируйте его через CI в папку Build:
command: echo << parameters.key_env_name >> | base64 -di > ./keys/<< parameters.key_path >>
  • Теперь ваш код должен быть готов к развернутую, но вам все равно нужно убедиться, что у вас есть токен, чтобы позволить вашему CI обрабатывать развертывание. Это можно сделать с токен Firebase. Это делается только один раз — вам не нужно делать это каждый раз, когда вы переключаете проект, который вы используете.
  • Оттуда вы должны быть в состоянии развернуть функции без серверов, основанные на вашей ветке, как так:
command: ./node_modules/.bin/firebase deploy --token "$FIREBASE_TOKEN" -P << parameters.environment >> --only functions:hubspot,functions:users

Это может быть вызвано только основанным на ветви, против слияния. Вот так

- functions_deploy:
    requires:
      - functions-build
    environment: staging
    key_path: $STAGING_SERVICE_ACCOUNT_PATH
    key_env_name: $FUNCTION_STAGING_SERVICE_ACCOUNT_BASE64
    filters:
      branches:
        only: develop

- functions_deploy:
    requires:
      - functions-build
    environment: prod
    key_path: $PROD_SERVICE_ACCOUNT_PATH
    key_env_name: $FUNCTION_PROD_SERVICE_ACCOUNT_BASE64
    filters:
      branches:
        only: master

functions_deploy:
  executor: node
  parameters:
    environment:
      type: string
    key_path:
      type: string
    key_env_name:
      type: string
  working_directory: ~/project/app/functions
  steps:
  - checkout:
      path: ~/project
  - attach_workspace:
      at: ~/project
  - run:
      name: add service account
      command: echo << parameters.key_env_name >> | base64 -di > ./keys/<< parameters.key_path >>
  - run:
      name: Firebase Deploy
      command: ./node_modules/.bin/firebase deploy --token "$FIREBASE_TOKEN" -P << parameters.environment >> --only functions:hubspot,functions:users

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

Я надеюсь, что это было полезно для вас, и что вы узнали несколько вещей по пути, я обязательно сделал!

Оригинал: «https://dev.to/matthieuveillon/continuous-integration-and-deployment-workflow-with-vercel-firebase-and-circleci-20n8»

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