Vercel, Firebase 및 Circleci와의 지속적인 통합 및 배포 워크플로우

나는 최근에 작업 중인 프로젝트를 위해 전체 CI/CD 작업 흐름을 설정했다. 이것은 내가 처음으로 CI 설정과 이 창고의 자동 배치를 깊이 있게 연구한 것이다.다음 도구의 조합을 통해 우리는 현재의 수요를 만족시키는 자신감/자동화의 정확한 조합을 실현했다고 생각합니다.

도구 및 책임

CI: CircleCI을 사용하여 프런트엔드 및 백엔드의 모든 테스트/필터링/유형 검사를 실행합니다.Firebase 기능

의 백엔드 배포도 조정

Vercel: Vercel을 사용하여 프런트엔드를 배포합니다.이것은 전방을 자동으로 배치하기 위해 Googlegithub repo에 연결됩니다.

Firebase: Firebase을 백엔드(서버 기능 및 데이터베이스 및 인증 없음)로 사용합니다.일반적으로 우리는 하나의 프로젝트를 사용하여 개발을 진행할 것이며, 하나의 프로젝트는

을 생산하는 데 쓰일 것이다

개술

프런트엔드

Dell 고객은 기본적으로 NextJs React 애플리케이션입니다.Vercel은 NextJs의 배후 조종자이기 때문에 통합/도구가 매우 원활하다.
시작하려면 다음이 필요합니다.

은github에 두 개의 지점이 있다(보통 개발자와 마스터를 선택한다)

Register your prod and dev domains on Vercel

Link your 2 domains to the right github branch

이것은vercel의 설정 지점을 통합할 때 자동으로 배치할 수 있도록 시작할 수 있을 것입니다.
사용자 정의 구축 절차가 필요하고 명령이나 출력 폴더라면 그들의 documentation에 따라 조작할 수 있다
환경 변수
모든 환경 변수 can be set up directly on Vercel
코드 라이브러리에 있는 지점에 따라 다른 값을 제공해야 한다면 (따라서 목표가 Staging역이든prod역이든) System Env Variables에 의존할 수 있습니다

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의 함수 하나만 사용할 수 있습니다.이것은 known limitation입니다. 동시에 동적 내용을 제공하려면 Google Cloud Run을 설정해야 합니다

백엔드 -firebase 서버 기능 없음

이 부분은 로컬과 제품 설정 사이에서 좀 까다롭다.그것의 배후에는 몇 개의 Firebase 관건적인 개념이 있다.

Firebase 프로젝트: 일반적으로 제품은 Firebase 프로젝트를 사용하고 스테이지는 Firebase 프로젝트를 사용합니다.이것은 언제든지 Staging이나 프로젝트에 코드를 배치하려면 프로젝트 사이를 전환해야 한다는 것을 의미합니다. 이것은 CI를 통해 자동화됩니다.

서비스 계정: Firebase 프로젝트 관리자인지 확인하는 방법 중 하나입니다.Firebase 콘솔

에서 서비스 계정을 생성할 수 있습니다.

RuntimeConfig: 이것은 firebase CLI을 통해 설정된 설정으로 Firebase 프로젝트와 관련된 환경 변수를 추가하는 데 사용됩니다.

Firebase CLI: 명령줄 도구로 Firebase에서 여러 작업을 수행할 수 있습니다. 예를 들어

Firebase 프로젝트에 로그인합니다.

현재 처리 중인 항목 추가/선택

프로젝트에 환경 변수 추가

CI

배포에 필요한 FirebaseToken 생성
우리는 아래의 설정에서 하나하나 소개할 것이니 걱정하지 마라. (나는 주로 나 자신에게 다음에 내가 그것을 설정해야 한다고 말할 때)😄)
commmon을 로컬로 설정하고 임시 저장/생산
Firebase 프로젝트 구성:

따라서 먼저 Firebase 프로젝트에 접근해야 합니다.이 설정은 주로 두 개의 Firebase 프로젝트(staging과prod)를 연습하고 각 프로젝트는 자신의 신분 검증과 데이터베이스를 가지고 있다.firebase and follow the steps에 로그인하면 됩니다.

설치 Firebase cli

npm install -g firebase-tools

Firebase cli를 통해 로그인합니다.이것은 다음 단계를 허용한다

firebase login

에 로그인하면 다음과 같은 방법으로 다른 Firebase 항목을 현재 구성에 추가할 수 있습니다.

firebase use --add

그러면 프로젝트 목록이 포함된 .firebaserc 파일이 프로젝트에 나타납니다.지점 배치에 기반한 정확한 프로젝트의 목표를 정하기 위해 이 별명에 의존하는 것이 중요하다.질문이 있으면 firebase-cli documentation을 참고하시면 됩니다.
환경 변수:
환경 변수의 경우 Firebase CLI를 사용하여 Firebase 프로젝트에 직접 추가할 수 있습니다.

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

나중에 다음과 같은 방법으로 액세스할 수 있습니다.

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

참고:
이 환경 변수는 Firebase의 프로젝트에 직접 저장되기 때문에 로컬에서 필요하지 않습니다.일반적으로 수동으로 값을 확인하기 위해 로컬에서 다운로드합니다.만일을 대비해서 그것들을 소홀히 하는 것은 좋은 생각일지도 모른다.
관리자 SDK 초기화:
Firebase 관리 sdk를 설정하고 추가하려면 add a service account이 필요합니다.
이것은 국지전을 야기할 것이다.json 파일은 기계의 특정한 gitignore 폴더 아래에 있습니다.
Firebase는 환경 변수에 파일 경로를 배치하는 것을 권장합니다(이전 섹션). - firebase docs if needed을 참조하십시오.

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와 서버 기능이 없는 staging 프로젝트를 사용합니다.다음과 같은 방법으로 수행할 수 있습니다.

firebase --use XXX을 사용하여 Firebase CLI를 통해 Firebase 항목 수동 선택

참고:
현재 사용하고 있는 항목을 주의하십시오.prod에 대한 스크립트를 실행하기를 원할 때가 있습니다. 최종적으로 사용하는 항목은 firebase --use master입니다. 이것은 선택한 항목입니다.staging/your test env를 다시 선택할 때까지.
이 단계에서 서버 기능이 없는 수동 배포를 피하고 CI에 책임을 넘기고자 합니다.

CI 설정

CI는 우리의 기능을 Firebase에 배치하는 것을 책임질 것이다.
분명히 몇 가지 제한이 있다.

귀하는 재구매 계약

에 귀하의 서비스 계정을 공개하고 싶지 않습니다.

배포용 프로젝트를 분기

으로 전환해야 합니다.
이러한 목표를 달성하려면 다음과 같은 몇 가지를 구성해야 합니다.

은 서비스 계정이 저장해야 할 경로를 선택하고Circleci의 env 변수로 저장합니다.

은 로컬 서비스Account를 사용하고 encode it to base64은circleCI의 환경 변수로 저장합니다.이렇게 하면 Circleci가 복잡한 구조를 문자열로 저장할 수 있습니다.

의 좋은 방법은 변수명의 끝에 BASE_64을 추가하는 것이다.보통 나는circleCI에서 2개의 변수를 얻는다. 예를 들어 FUNCTION_PROD_SERVICE_ACCOUNT_BASE64과 FUNCTION_STAGING_SERVICE_ACCOUNT_BASE64

은circleCI에서 서비스Account를 가져오고 CI를 통해 디코딩/복사 폴더를 만듭니다.

command: echo << parameters.key_env_name >> | base64 -di > ./keys/<< parameters.key_path >>

은 현재 코드가 배치될 준비가 되어 있어야 하지만, CI가 배치를 처리할 수 있는 영패를 가지고 있는지 확인해야 합니다.이것은 the firebase token.으로 완성할 수 있다. 이것은 한 번만 완성할 수 있다. 사용 중인 항목을 전환할 때마다 이렇게 할 필요가 없다.

은 다음과 같이 Spoke에 따라 서버 기능이 없는 배포를 수행할 수 있어야 합니다.

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

이렇게 된 것 같습니다. 이제 무대에 오르고prod 환경에서Vercel과Firebase를 사용하여 전단과 후단을 자동으로 배치할 수 있습니다.
나는 이것이 너에게 도움이 되기를 바란다. 네가 이 과정에서 약간의 것을 배웠으면 한다. 나는 당연히 해냈지.