firebase에서의 개발을 효율화하기 위해 circleCI에서의 배포 자동화를 구축해 보았다.

요약(목차)

nuxt.js 프로젝트 만들기

firebase에 프로젝트를 두 개 세운다 (개발/프로덕션)

firebase init 수동으로 초기 설정

CircleCI에서 자동 배포 설정

1. nuxt.js 프로젝트 생성

nuxt-create-app 에서 nuxt.js 프로젝트를 창조. 패키지 관리자는 npm, 렌더링 모드는 SPA를 선택하십시오.
github에 리포지토리를 등록.
git-flow에서 develop 브랜치를 창조합니다.

2. firebase에 프로젝트를 두 개 세운다 (개발 / 프로덕션)

여기에서 본제
1. firebase 콘솔에서 프로젝트 추가를 클릭하여 프로젝트를 추가합니다.
2. 「앱을 추가」하면 API_KEY등이 발행된다. 이 중 projectId를 나중에 CircleCI에 등록합니다.
3. 1,2를 다시 실행하여 개발 프로젝트를 구축한다. 프로젝트 이름 등에 _dev 등으로 넣어 두면 알기 쉽다.

3. firebase init 수타로 초기 설정

초기 배포는 초기 설정 등이 있으므로 수동으로 수행합니다.
1. firebase-tools를 설치하고 firebase init

$ npm install -g firebase-tools
$ firebase init

2.호스팅을 선택합니다.
3. 방금 만든 프로덕션 firebase 프로젝트를 선택.
4. 공개 폴더는 dist를 지정합니다.

? What do you want to use as your public directory? dist

5.SPA 여부를 듣고, y를 입력

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y

6.index.html가 존재하는 경우에 그것을 덮어쓸지 묻는다. 필자의 환경에서는 기존 프로젝트에서 이미 있으므로 N을 입력.

? File dist/index.html already exists. Overwrite? (y/N) N

이것으로 호스팅 설정은 완료. 확인을 위해 배포합시다.

$ npm run build
$ firebase deploy

7. 그런 다음 개발 프로젝트에 배포합니다. firebase use --add 에서 개발 프로젝트와 연결

$ firebase use --add
? Which project do you want to add? 

firebase 설정은 이제 완료됩니다.

4. CircleCI에서 자동 배포 설정

1. "ADD PROJECT"에서 CircleCI 프로젝트 만들기

2. CI용 firebase 토큰 발행

$ firebase login:ci

Visit this URL on any device to log in:
(認証用のURL)

Waiting for authentication...

+  Success! Use this token to login on a CI server:

(トークンが表示されるので控える)

Example: firebase deploy --token "$FIREBASE_TOKEN"

3.CircleCI 환경 변수 등록


4. CircleCI 설정 파일 생성
루트 디렉토리에 .circleci/config.yml 만들기

circleci/config.yml

version: 2
jobs:
  deploy_master:
    docker:
      - image: circleci/node:latest
    steps:
      - checkout
      - run:
          name: install firebase-tools
          command: sudo npm install -g firebase-tools
      - run:
          name: install nuxt
          command: npm install nuxt
      - run:
          name: build project
          command: npm run build
      - run:
          name: Deploy Firebase Hosting
          command: firebase deploy --token $FIREBASE_CI_TOKEN --project $PROD_PROJECT_ID

  deploy_dev:
    docker:
      - image: circleci/node:latest
    steps:
      - checkout
      - run:
          name: install firebase-tools
          command: sudo npm install -g firebase-tools
      - run:
          name: install nuxt
          command: npm install nuxt
      - run:
          name: build project
          command: npm run build
      - run:
          name: Deploy Firebase Hosting
          command: firebase deploy --token $FIREBASE_CI_TOKEN --project $DEV_PROJECT_ID

workflows:
  version: 2
  build_and_deploy: # ワークフローの名前
    jobs:
      - deploy_dev: # 上で定義したジョブを指定します
          filters:
            branches:
              only: develop # developブランチのみを実行対象とします
      - deploy_master:
          filters:
            branches:
              only: master # masterブランチのみを実行対象とします

이제 develop 브랜치에 push 또는 merge하면 개발용 firebase 프로젝트에, master 브랜치라면 프로덕션 프로젝트에 배포됩니다.