우리는 Firebase Project Hosting의 hello world 예제를 계속해서 CI/CD를 사용하여 firebase에 사이트를 게시하도록 확장할 것입니다. 최종 호스팅 예제는 초기 프로젝트 폴더에 사이트를 생성합니다(제 경우에는 ajonp-lesson-1).

소스 코드 리포지토리 가격 책정

Github 리포지토리 생성

Google Cloud 소스 저장소 생성

Firebase에 업로드하기 위한 Dockerfile 만들기

Google Cloud Build용 cloudbuil.yaml을 만들어 빌드를 트리거합니다

.

설정 트리거

트리거가 실행되도록 커밋

Hello World를 변경하는 콘텐츠 업데이트

Google 소스 저장소를 사용하는 이유는 무엇입니까?

Because it is cheaper! (and I develop on a shoestring budget) The negative is that it is not as straight forward to use as git clone

Github

오해하지 마세요. 한 달에 7달러는 큰 거래라고 생각하지만 개인 리포지토리를 사용하기 시작하려는 순간에 지불해야 합니다.

Google Cloud 소스 저장소

큰 수준으로 확장할 때까지 기본적으로 무료입니다.

저장소 생성

새로 선택



저장소 이름 만들기



기존 "Hello World"프로젝트 복제

```일반 텍스트
자식 클론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

구글 클라우드

As of right now December 3, 2018 Google has this message: This version of Cloud Source Repositories will permanently redirect to the new version of Cloud Source Repositories starting December 3rd. Try the new version today for fast code search, an improved code browser, and much more.

Google Cloud 소스 저장소

열기Source Cloud Repositories . 이제 "리포지토리 추가"를 선택할 수 있습니다.

Google Cloud Repository 추가(독립형)

"새 저장소 만들기"옵션을 선택합니다.



첫 번째 강의부터 Firebase에서 만든 프로젝트가 있어야 합니다. 'Project' 아래의 드롭다운을 사용하여 선택할 수 있습니다. 그런 다음 "만들기"를 클릭합니다(분리하지 않으려면 프로젝트를 만들지 않음).

Google Cloud Repository에 코드 추가

일반적으로 새 리포지토리에서 이제 이것을 복제하고 작업을 시작합니다.



이 예제에서는 이미 작업 중인 예제가 있으므로 "로컬 Git 리포지토리에서 코드 푸시"를 선택합니다.



첫 번째 명령을 건너뛸 수 있습니다(단원 1과 GitHub에서 호스팅을 모두 건너뛰지 않은 경우).

먼저 프로젝트에 대한 올바른 원본이 있는지 확인합니다(제 1과가 아니라 2과여야 함).

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 소스 저장소를 추가하십시오.

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 기반 원격을 제거하려면 실행할 수 있지만 두 리포지토리에 코드 푸시를 테스트하고 싶기 때문에 지금은 이 작업을 수행하지 않습니다.

```일반 텍스트
자식 원격 제거 원점

## 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']

You may have noticed an interesting line here, this allows for an argument called _FIREBASE_TOKEN to be setup in our cloud deploy, so it doesn't leak out in our GitHub/GCP Repositories. args: ['deploy', '--token', '${_FIREBASE_TOKEN}']

이 다음 Patterson을 위해 Firebase의 토큰이 필요합니다.

이것은 프로세스를 안내합니다(이전의 로그인과 동일). 이 작업이 터미널에서 다시 완료되면 1/8V_izvEco3KY8EXAMPLEONLYpnLGpGLPAvofC_0YX3qx2NE_Zxs Along with a message Example: firebase deploy --token "$FIREBASE_TOKEN"와 같은 토큰을 받아야 합니다.

이 토큰을 캡처하거나 트리거 설정을 위해 터미널을 열어 두어야 합니다.

설정 트리거

Google Cloud PlatformConsole으로 돌아갑니다. 햄버거 탐색 Cloud Build > Triggers 사용 .

Github 트리거

Github를 소스로 선택한 다음 인증합니다.



리포지토리 선택



트리거 설정 설정

Pay close attention to add the Firebase Token from the steps above.

트리거에 대한 GitHub 커밋

이제 명령을 실행하여 dockerfile 및 cloudbuild.yaml 변경 사항을 추가할 수 있습니다.

이제 이러한 변경 사항을 로컬에서 커밋했음을 기억하고 여전히 이를 원본(GitHub 원격)으로 푸시해야 합니다.

이제 Google Cloud Platform - Cloud Build History로 이동하여 트리거가 실패하지 않았는지 확인할 수 있습니다.

Google 소스 저장소 트리거

이것은 동일한 설정이 될 것입니다.





이제 다른 리모컨(Google Cloud Repository)에 푸시하기만 하면 됩니다.

콘텐츠 업데이트 - 작동 중인 CI/CD 참조

변경된 내용을 표시하려면 색인 파일을 업데이트하세요.

공개/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