Мы продолжим наш пример hello world из Firebase Project Hosting и расширим его до публикации нашего сайта на firebase с помощью CI/CD. Последний пример хостинга создаст сайт в папке начального проекта (в моем случае ajonp-lesson-1).

• Ценообразование репозиториев исходного кода

• Создать репозиторий Github

• Создать репозиторий исходного кода Google Cloud

• Создайте Dockerfile для загрузки в Firebase

• Создайте cloudbuil.yaml для Google Cloud Build для запуска сборки

• Настройка триггеров

• Выполните коммит, чтобы вызвать запуск триггера

• Обновление содержимого для изменения Hello World

Почему я использую Google Source Repositories?

Потому что это дешевле! (а я разрабатываю с ограниченным бюджетом) Минус в том, что он не так прост в использовании, как git clone.

Github

Не поймите меня неправильно, я считаю, что $7 в месяц — это отличная цена, но вам придется заплатить ее, как только вы захотите начать использовать частные репозитории.

Google Cloud Source Repositories

В основном бесплатны, пока вы не перейдете на большой уровень.

Создайте репозиторий

Выберите новый

Создайте имя для репозитория

Клонируем наш существующий проект «Hello World»

«простой текст
git clone https://github.com/AJONPLLC/lesson-1-firebase-project.git cd lesson-1-firebase-project/

## Remove remote references

When you are cloning an existing repository you need to cleanup the remote reference to store this into a new repository.

Lets look at the remotes currently

This should show something like



```javascript
origin [https://github.com/AJONPLLC/lesson-1-firebase-project.git](https://github.com/AJONPLLC/lesson-1-firebase-project.git) (fetch) 
origin [https://github.com/AJONPLLC/lesson-1-firebase-project.git](https://github.com/AJONPLLC/lesson-1-firebase-project.git) (push)

Давайте удалим этот пульт

git remote rm origin

Добавить вновь созданное репо

git remote add origin https://github.com/AJONPLLC/lesson-2-firebase-ci.git git push -u origin master

Облако Google

По состоянию на 3 декабря 2018 года Google имеет следующее сообщение: Эта версия Cloud Source Repositories будет постоянно перенаправлять на новую версию Cloud Source Repositories начиная с 3 декабря. Попробуйте новую версию уже сегодня для быстрого поиска кода, улучшенного браузера кода и многого другого.

Репозитории Google Cloud Source Repositories

Облачные репозитории открытых источников. Теперь вы можете выбрать «Добавить репозиторий».

Добавить облачный репозиторий Google (отдельный)

Выберите опцию «Создать новый репозиторий».

Из первого урока у вас должен быть проект, который был создан на firebase, вы можете использовать выпадающий список под «Project» для выбора. Затем нажмите «Создать» (не «Создать проект», если вы не хотите, чтобы это было разделено).

Добавление кода в репозиторий Google Cloud

Обычно на свежем репозитории вы клонируете его и начинаете работать.

Для этого примера мы выберем «Push code from a local Git repository», потому что у нас есть пример, с которым мы уже работаем.

Первую команду можно пропустить (если вы не пропустили Урок 1 и хостинг в GitHub).

Сначала убедитесь, что у нас правильное происхождение вашего проекта (моим должен быть урок-2, а не урок-1).

origin [https://github.com/AJONPLLC/lesson-2-firebase-ci.git](https://github.com/AJONPLLC/lesson-2-firebase-ci.git) (fetch) origin [https://github.com/AJONPLLC/lesson-2-firebase-ci.git](https://github.com/AJONPLLC/lesson-2-firebase-ci.git) (push)

Теперь добавьте Google Source Repository в качестве дополнительного удаленного местоположения

git remote add google https://source.developers.google.com/p/ajonp-ajonp-com/r/ajonp-lesson-2

Посмотрите на свои пульты еще раз и вы должны увидеть два.

google https://source.developers.google.com/p/ajonp-ajonp-com/r/ajonp-lesson-2 (fetch) google https://source.developers.google.com/p/ajonp-ajonp-com/r/ajonp-lesson-2 (push) origin https://github.com/AJONPLLC/lesson-2-firebase-ci.git (fetch) origin https://github.com/AJONPLLC/lesson-2-firebase-ci.git (push)

Полезная подсказка для нескольких пультов в VSCode, вы можете перейти на вкладку git, затем «…», затем «Push to…». Это покажет вам удаленные ресурсы.

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

«plain text
git remote remove origin

## Create Dockerfile

I like to create a folder for all of my dockerfiles, this allows you to easily locate and access them all. There are many references in the [Official Guide](https://cloud.google.com/cloud-build/docs/configuring-builds/build-test-deploy-artifacts#deploying_artifacts), but they always seem to place this file alongside your cloudbuild.yaml file (in my opinion this confuses things).

![](https://media.codingcat.dev/image/upload/v1657636659/main-codingcatdev-photo/f220f3e8-f536-4590-8fcf-85eabb131e46.png)

This Dockerfile is utilizing a prebuilt node image from node. dockerfiles/firebase/Dockerfile

We need to make sure that billing and the cloud build API are setup. You can follow a great guide [Enable Billing](https://cloud.google.com/cloud-build/docs/quickstart-docker).

Again we are doing this on the cheap, other places will charge you a monthly fee for this. Google allows for 120 build minutes a day!!

![](https://media.codingcat.dev/image/upload/v1657636659/main-codingcatdev-photo/fee9bf8a-ea9a-428c-83e7-544d50b0b75d.png)

## Create Cloudbuild

This cloudbuild.yaml file will leverage the gcloud trigger. [https://cloud.google.com/cloud-build/docs/cloud-builders](https://cloud.google.com/cloud-build/docs/cloud-builders)

cloudbuild.yaml (place in root directory)



```yaml
steps:
# Build the firebase image
- name: 'gcr.io/cloud-builders/docker' args: [ 'build', '-t', 'gcr.io/$PROJECT_ID/firebase', './dockerfiles/firebase' ]
# Deploy to firebase
- name: 'gcr.io/$PROJECT_ID/firebase' args: ['deploy', '--token', '${_FIREBASE_TOKEN}']
# Optionally you can keep the build images
# images: ['gcr.io/$PROJECT_ID/hugo', 'gcr.io/$PROJECT_ID/firebase']

Возможно, вы заметили интересную строку, которая позволяет установить аргумент _FIREBASE_TOKEN в нашем облачном развертывании, чтобы он не просочился в наши репозитории GitHub/GCP. args: [‘deploy’, ‘—token’, ‘${_FIREBASE_TOKEN}’].

Для следующего паттерна нам понадобится токен от firebase.

Это проведет вас через весь процесс (так же, как и вход в систему до этого). После завершения процесса в терминале вы должны получить токен вида 1/8V_izvEco3KY8EXAMPLEONLYpnLGpGLPAvofC_0YX3qx2NE_Zxs вместе с сообщением Пример: firebase deploy --token "$FIREBASE_TOKEN".

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

Настройка триггера

Вернитесь в Google Cloud Platform Console. С помощью гамбургерной навигации Cloud Build > Triggers.

Триггер Github

Выберите Github в качестве источника, затем авторизуйтесь.

Выберите репозиторий

Настройте параметры триггера

Уделите особое внимание добавлению Firebase Token из шагов выше.

Коммит GitHub для триггера

Теперь вы можете выполнить команды для добавления изменений dockerfile и cloudbuild.yaml.

Теперь помните, что мы закоммитили эти изменения локально, нам все еще нужно отправить их в origin (который является нашим удаленным GitHub).

Теперь вы можете проверить, что ваш триггер не сработал, перейдя в Google Cloud Platform — Cloud Build History

Триггер репозитория Google Source Repository Trigger

Это будет идентичная настройка.

Теперь нам просто нужно отправить триггер на другое удаленное хранилище (Google Cloud Repository)

Обновление содержимого — см. CI/CD в действии

Обновите индексный файл, чтобы показать, что что-то изменилось.

public/index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Welcome to Firebase Hosting</title>
</head>

<body> Firebase is not building everytime I commit, just from following<a
        href="https://ajonp.com/lessons/2-firebase-ci/">Google Cloud Repositories CI/CD</a> <img
        src="https://res.cloudinary.com/ajonp/image/upload/q_auto/v1543793005/ajonp-ajonp-com/2-lesson-gcp-cloud-build/aj_on_firebaseCI.webp"
        alt="Hero Image"> </body>

</html>

Добавление, фиксация, перемещение файлов

git add . git commit -m "CI/CD" git push --set-upstream google master