편하게하는 것은 좋은 일입니다.

라는 것으로, 지난번의 계속입니다.
이번에는 GitHub에 리포지토리를 만들고 CircleCI와 연계하여 GitHub에 푸시할 때마다 Firebase에 자동 배포되도록 한다는 내용입니다.

환경

OSX Catalina
npm version6.14.6
node.js v12.18.4

건설

먼저 GitHub에 리포지토리를 만들고,



마지막으로 Nuxt.js로 만든 샘플 프로젝트를 GitHub에 푸시합니다.



이것으로 일단 GitHub에 대한 설정이 끝납니다.

이제 GitHub과 CircleCI, 그리고 CircleCI와 Firebase를 연결해 보겠습니다.

우선은 CircleCI 의 등록을 하지 말아 주세요.
지금부터 GitHub와의 제휴를 하기 때문에 GitHub의 계정으로 로그인하면 좋을 것입니다.
그러면 제휴를 할지 묻는 것이므로 제휴해, 이번 프로젝트, 방금전 GitHub에 푸시한 리포지토리(이상의 예에서는)를 제휴해 주세요.

그런 다음 CircleCI와 Firebase를 연결하기 위해 액세스하기 위한 토큰을 Firebase에 생성하고 받으려면 다음 명령을 터미널에서 실행하십시오.

$ firebase login:ci

그러면 콘솔 참조용 URL과 토큰이 표시되므로 CircleCI의 Pipeline을 열고 오른쪽 상단의 Project Settings를 클릭합니다.



그러면 환경 변수를 등록하는 Environment Variables라는 란이 있으므로 이전에 손에 넣은 토큰을 FIREBASE_TOKEN라는 이름으로 다음과 같이 설정해 주세요.



그런 다음 프로젝트 바로 아래에 .circleci/config.yml을 만들고 다음과 같이 만듭니다.

.circleci/config.yaml

version: 2
jobs:
  deploy_main:
    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_TOKEN # --project [your-project-id] 仮にこのままプッシュしてfailedになってしまう場合はこのコメントアウトを外してあなたのFirebaseプロジェクトのIDを記入してプッシュしてみてください。

workflows:
  version: 2
  build_and_deploy:
    jobs:
      - deploy_main:
          filters:
            branches:
              only: main

그리고 시험에 GitHub에 밀어 보면 ...



안전하게 성공했습니다!

일단 이상과 같이 설정하는 것으로 푸시할 때마다 자동적으로 배포 됩니다.

시간이 있으면 자동 테스트를 추가한 것도 투고하고 싶네요.
그럼 이 기사는 일단 여기까지. 수고하셨습니다.