Использование Firestore для создания Hugo Conten

В этом учебнике мы рассмотрим некоторые довольно сложные триггеры и практики Git.

Демонстрация:
Angular Admin Site
Основной сайт Hugo

Содержание
  1. Шаги
  2. Напоминание о лимите биллинга
  3. Форк/клонирование lesson-8-hugo
  4. Клонируйте свой форк
  5. Тестирование локального использования hugo
  6. Создайте хостинг Hugo firebase
  7. Создайте проект firebase
  8. Обновление локальных файлов firebase
  9. Создание триггера сборки облачного сервиса Google Hugo Content
  10. Проект Google Cloud
  11. Включить триггер Google Cloud Trigger
  12. Создание облачного триггера Google
  13. Тестирование триггера облачной сборки
  14. Локальный git push
  15. История триггера
  16. Автоматическое развертывание на Firebase
  17. Обслуживание локально
  18. Обновить конфигурацию firebase
  19. Аутентификация
  20. База данных Firestore
  21. Обновления хостинга Firebase
  22. Обновите имя проекта везде
  23. Сборка проекта Angular
  24. Развертывание хостинга Firebase из CLI
  25. Создайте новый сайт
  26. Обновление авторизованных доменов
  27. Обновите триггер Firestore, чтобы он соответствовал вашему репозиторию GitHub
  28. Создание персонального токена Github
  29. Добавление персонального токена GitHub в функции Firebase
  30. Развертывание функций Firebase из CLI
  31. Добавьте книгу, смотрите, как она отображается на сайте Hugo
  32. Удалить книгу

Шаги

  • Напоминание о лимите биллинга

  • Форк/клонирование урок-8-hugo

  • Создайте сайт Hugo на хостинге firebase

  • Создайте триггер облачной сборки Google Hugo Content

  • Триггер сборки тестового облака

  • Fork/Clone урок-8-firestore-functions

  • Сборка проекта Angular

  • Развертывание хостинга Firebase из CLI

  • Обновите триггер Firestore, чтобы он соответствовал вашему репо на GitHub

  • Развертывание функций Firebase из CLI

  • Добавьте книгу, посмотрите, как она отображается на сайте Hugo

Дополнительно

  • Облачная сборка для CI/CD

Напоминание о лимите биллинга

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

Если вы хотите установить жесткий лимит на сборки, проверьте Capping API Usage.

Для конкретного API сборки вы можете перейти к разделу Cloud Build API Quotas.

Для обновления проверьте IAM & Admin->Quotas

Форк/клонирование lesson-8-hugo

Вы можете просто клонировать lesson-8-hugo с GitHub, но если вы хотите создать какие-либо триггеры для сборки в Google Cloud, я бы посоветовал сделать форк в собственном репозитории.

Клонируйте свой форк

Я проведу наш пример, сделав форк на мой аккаунт ajonp, вы должны увидеть его «forked from AJONPLLC/lesson-8-hugo».

Вы можете сделать это, заменив в этой команде ваше_имя.

git clone https://github.com/<your_name>/lesson-8-hugo.git && cd lesson-8-hugo
Вход в полноэкранный режим Выход из полноэкранного режима

Тестирование локального использования hugo

Папка вашей темы будет пустой, так как она ссылается на подмодуль git. Сначала убедитесь, что все ваши подмодули клонированы локально.

git submodule init && git submodule update --remote
Войдите в полноэкранный режим Выйдите из полноэкранного режима

Теперь выполним команду hugo serve. Это указывает hugo обслуживать, используя тему ajonp-hugo-ionic и используя файл config.toml.

hugo server -t ajonp-hugo-ionic --config config.toml
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь вы должны увидеть главную страницу со списком последних книг по адресу http://localhost:1313/.

Вы также можете просмотреть все книги в виде списка по адресу http://localhost:1313/books/.

Это будет основано на последнем содержимом AJONPLLC/lesson-8-hugo, если вам не нужно ничего из этого, не стесняйтесь очистить все файлы в content/books.

Помните, что Hugo динамически создает файлы, поэтому если вы удалите все файлы в content/books, вы получите 404 на http://localhost:1313/books/.

Создайте хостинг Hugo firebase

Создайте проект firebase

Начните с добавления нового проекта

Дайте проекту хорошее имя.

Затем вы можете следовать разделу «Начало работы» в разделе «Хостинг» или обновить локальные файлы firebase.

Обновление локальных файлов firebase

Есть несколько команд firebase, которые вы можете использовать, чтобы вручную добавить правильную настройку хостинга firebase use ajonp-lesson-8 и firebase target:apply hosting ajonp-lesson-8-hugo ajonp-lesson-8-hugo. Однако я считаю, что проще просто обновить два файла.

.firebaserc

{
  "projects": {
    "default": "ajonp-lesson-8"
  },
  "targets": {
    "ajonp-lesson-8": {
      "hosting": {
        "ajonp-lesson-8-hugo": [
          "ajonp-lesson-8-hugo"
        ]
      }
    }
  }
}

Вход в полноэкранный режим Выход из полноэкранного режима

Обновить .firebaserc

{
  "projects": {
    "default": "your-project"
  },
  "targets": {
    "your-project": {
      "hosting": {
        "your-hosting-name": [
          "your-hosting-name"
        ]
      }
    }
  }
}

Войти в полноэкранный режим Выйти из полноэкранного режима

В приведенном выше примере замените проект по умолчанию на ваш проект. Для целей это сопоставление вашего проекта с именами ваших хостингов, мы определим имя хостинга в файле firebase.json как цель.

firebase.json

{
  "hosting": {
    "target": "ajonp-lesson-8-hugo",
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Ваше обновление firebase.json

{
  "hosting": {
    "target": "your-hosting-name",
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь вы сможете развернуть свой сайт с помощью firebase CLI.

firebase deploy
Войти в полноэкранный режим Выйти из полноэкранного режима

Вы должны увидеть результат, содержащий около 53 файлов.

Если вы видите только несколько, проверьте, что вы запустили обновление субмодуля.

Создание триггера сборки облачного сервиса Google Hugo Content

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

Проект Google Cloud

Каждый проект Firebase на самом деле является проектом Google Platform. Чтобы использовать облачный конструктор, нам нужно включить биллинг, я предлагаю перейти на тарифный план Blaze, поскольку вам не придется ничего платить, если вы не превысите установленные лимиты.

Теперь перейдите в Google Cloud Console.

Вы должны увидеть выпадающий выбор проекта, выберите нужный проект.

Включить триггер Google Cloud Trigger

Если это новый проект, вам необходимо включить API облачной сборки.

Если вы получаете ошибку, убедитесь, что вы перешли на Blaze Plan в Firebase.

![](https://media.codingcat.dev/image/upload/v1657636767/main-codingcatdev-photo/9e748293-ca82-476e-b4c5-a11a321cf72e.png)
Войти в полноэкранный режим Выход из полноэкранного режима

Создание облачного триггера Google

Если вам нужна дополнительная помощь по этому уроку, ознакомьтесь с нашим руководством по Google Cloud Repositories CI/CD.

Выберите источник на GitHub и дайте согласие.

После авторизации на GitHub выберите свой проект и продолжите.

Настройки

  • Имя: Hugo CI/CD

  • Ветвь: master

  • Конфигурация сборки: cloudbuild.yaml

  • Подстановочные переменные: _FIREBASE_TOKEN = yourtoken.

Тестирование триггера облачной сборки

Прежде чем двигаться дальше, мы хотим убедиться, что ваш триггер работает. Поэтому загрузим файл примера в папку content/books. Либо скопируйте файл examplebook.md, переименовав его в testtrigger.md, либо создайте новый файл.

content/books/testtrigger.md

title = "Example Book"
date = 2018-11-26T14:45:13-05:00
images = ["https://res.cloudinary.com/ajonp/image/upload/w_500,q_auto/v1545282630/ajonp-ajonp-com/8-lesson-firestore-functions/bookExample.webp"]
+++

This is a commit test creating a book.

Вход в полноэкранный режим Выход из полноэкранного режима

Локальный git push

При необходимости добавьте новый файл.

Выполните локальную фиксацию

Затем сделайте push в удаленный репозиторий GitHub.

git push origin
Вход в полноэкранный режим Выход из полноэкранного режима

История триггера

Теперь вы должны увидеть историю этого триггера в списке Google Cloud Build History.

Автоматическое развертывание на Firebase

Последний шаг в cloudbuild.yaml выполняет развертывание на Firebase, вы должны увидеть сообщение об успешном развертывании в журналах облачной сборки.

«plain text
Начинаем шаг №5
Шаг #5: Уже есть изображение: gcr.io/ajonp-lesson-8/firebase
Шаг #5:
Шаг #5: === Развертывание на ‘ajonp-lesson-8’…
Шаг #5:
Шаг #5: i развертывание хостинга
Шаг #5: i хостинг[ajonp-lesson-8]: начало развертывания…
Шаг #5: i хостинг[ajonp-lesson-8]: найдено 54 файла в публичном доступе
Шаг #5: i hosting: загрузка новых файлов 2/48
Шаг #5: ✔ хостинг[ajonp-lesson-8]: загрузка файлов завершена
Шаг #5: i хостинг[ajonp-lesson-8]: доработка версии…
Шаг #5: ✔ хостинг[ajonp-lesson-8]: версия завершена
Шаг #5: i hosting[ajonp-lesson-8]: выпуск новой версии…
Шаг #5: ✔ hosting[ajonp-lesson-8]: выпуск завершен
Шаг #5:
Шаг #5: ✔ Развертывание завершено!
Шаг #5:
Шаг #5: Консоль проекта: https://console.firebase.google.com/project/ajonp-lesson-8/overview
Шаг #5: URL хостинга: https://ajonp-lesson-8.firebaseapp.com
Завершено Шаг #5




> Reminder if you don't see the new file it may be cached in the browser/service worker, you can force refresh the browser to see this.

# Fork/Clone lesson-8-firestore-functions

The [lesson-8-firestore-functions](https://github.com/AJONPLLC/lesson-8-firestore-functions) is setup to be the admin side of the site that will interact with [Firebase Firestore](https://firebase.google.com/docs/firestore/). I wrote this in Angular, but you could use any Web framework, iOS, Android, Unity...

## Install npm dependencies

Verify that you are in the base directory



```plain text
npm install
Вход в полноэкранный режим Выход из полноэкранного режима

Обслуживание локально

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

Обновить конфигурацию firebase

You only need one environment file, but I often have a dev and production setup with both.
Войдите в полноэкранный режим Выйдите из полноэкранного режима

В обзоре вашего проекта Firebase есть шестеренка Settings->Настройки проекта.

Затем выберите «Добавить Firebase в ваше веб-приложение» в разделе «Ваши приложения».

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

src/environments/environment.ts and src/environment/environment.prod.ts

{
    apiKey: "your-apiKey",
    authDomain: "your-project.firebaseapp.com",
    databaseURL: "https://your-project.firebaseio.com",
    projectId: "your-project",
    storageBucket: "your-project.appspot.com",
    messagingSenderId: "your-messagingSenderId"
}

Вход в полноэкранный режим Выход из полноэкранного режима

Аутентификация

Поскольку это новый проект, в который мы направляем это приложение, вы, скорее всего, увидите ошибку, если вернетесь к http://localhost:4200, поскольку мы еще не обновили настройки аутентификации.

Вы можете обновить их в разделе Аутентификация -> Метод входа. Отредактируйте провайдер Google Sign-in и включите его. Более подробную информацию вы можете найти в документации по аутентификации Firebase.

База данных Firestore

В проекте Firestore выберите Database->Create Database.

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

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

Обновления хостинга Firebase

Обновите имя проекта везде

Вы можете найти и заменить весь проект, ища ajonp-lesson-8-admin и заменить на ваше имя.

Например, я изменил свой проект с ajonp-lesson-8-admin на ajonp-lesson-8-admin2. Если вы используете VSCode, вы можете сделать это как показано ниже.

src/styles/ajonp-lesson-8-admin -> ваше_имя

Если вы получите ошибку, похожую на эту, то это потому, что файл стилей был изменен, и мы просто поменяли все ссылки в строке выше.

Я изменил свой с ajonp-lesson-8-admin-app-theme.scss на ajonp-lesson-8-admin2-app-theme.scss.

At this time you can test adding and deleting books from the database, but we still have plumbing to work on getting these to build the Hugo site.
Вход в полноэкранный режим Выход из полноэкранного режима

Сборка проекта Angular

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

Теперь ваш сайт готов к хостингу, вы можете попробовать его локально, запустив firebase serve.

Развертывание хостинга Firebase из CLI

Теперь, когда у нас есть производственная сборка Angular в dist/ajonp-lesson-8-admin2, мы можем развернуть ее на нашем Firebase Hosting, нам просто нужно создать новый сайт, который будет авторизован.

Создайте новый сайт

Hosting->Dashboard->Advanced выберите «Add another site».

Обновление авторизованных доменов

Поскольку мы обслуживаем сайт с другого домена, чем обычно, вам нужно добавить его в список авторизованных доменов. Вы можете найти это в разделе Аутентификация->Метод входа->Авторизованные домены, выберите «Добавить домен».

Это будет your-project-admin.firebaseapp.com

Теперь вы должны увидеть три сайта localhost, default (наш сайт Hugo), сайт your-project-admin.

Обновите триггер Firestore, чтобы он соответствовал вашему репозиторию GitHub

Теперь, когда у нас есть и сайт Hugo, и сайт администратора Angular, мы можем настроить функцию Firebase Function для срабатывания каждый раз, когда мы добавляем/удаляем книгу.

Создание персонального токена Github

Вам необходимо создать персональный токен Github, иначе вы будете отправлять свой пароль при каждом запросе. Вы можете найти его в settings->Developer Settings->Personal Access Tokens, выберите «Generate New Token». Это похоже на пароль, но вы можете ограничить доступ, который разрешен токену.

Для этого вы можете дать доступ repo и read:user, Назовите его как-нибудь осмысленно.

Добавление персонального токена GitHub в функции Firebase

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

Вы должны увидеть сообщение вроде этого.

Развертывание функций Firebase из CLI

Теперь разверните ваши функции, это позволит перекодировать typescript и поместить js-файлы в каталог lib. Я установил оба этих параметра для запуска на Node 8.

Вы должны увидеть сообщение об успехе

Добавьте книгу, смотрите, как она отображается на сайте Hugo

Предупреждение: у вас может возникнуть состояние гонки, когда ваш первый триггер для сборки произойдет после последнего. Есть несколько способов решения этой проблемы, которые я не рассматриваю в этом уроке. Помните, что при каждом сохранении сборки в Google Cloud Build происходит регенерация всего сайта Hugo.

В правом нижнем углу вы можете нажать кнопку + fab, это откроет форму для создания новой книги.

Когда вы нажмете кнопку сохранить, это вызовет облачную функцию gitBookCreateHugoCommit. Проверьте журналы

Следите за тем, как происходит сборка в истории Google Coud Builder.

Затем вы можете перейти на свой сайт Hugo (примерно через 2 минуты) и увидеть новую книгу.

Удалить книгу

Это делает то же самое, что и добавление, за исключением того, что будет запущена облачная функция gitBookDeleteHugoCommit.

Оцените статью
devanswers.ru
Добавить комментарий