CircleCIでFirebaseへ自動デプロイする

はじめてCircleCIを使えて嬉しかったので、やり方をメモしておきたいと思います！

はじめてcircleci/config書いた🙌

masterにマージされたとき、自動的にテスト→Firebaseへデプロイするってやつできた、、！😭💓

circle ciわけわからんと思ってたから一歩前進だ、、！ pic.twitter.com/7D7fYAyQV6

— sumi (@su_mi1228) January 4, 2020

CircleCIとは？？

開発の自動化を実現するツールです。例えば、Githubのコードが修正されるたびにビルドとテストが自動で実行されたり、masterブランチのコードが変更されたら自動でデプロイするなどが出来ます。

今回実現させたいこと

上から下の処理を自動で行い、途中でエラーが出たら処理は停止します。

・masterブランチの変更を検知（push, merge）
・テストの実行
・ビルドの実行
・Firebaseへログイン
・Firebaseへデプロイ

デプロイさせたいプロジェクトを作成

今回はVueCLIで作成したプロジェクトをFirebaseへデプロイしたいと思います。自分は使ったことのあるツールなので選択しましたが、使ったことがない方は一度手動でfirebase deployしてからのほうが理解しやすいと思います。

Githubと連携させて使うので、新規リポジトリを作成し、作ったプロジェクトをmasterへpushしておきます。

CircleCIにプロジェクトを追加

Add Projectsから先ほどgithubで作成したリポジトリを選択します。

Continuous Integration and Delivery

Set Up Projectを選択し、Languageは「Other」を選択します。

すると、手順を教えてくれます。

・.circleciディレクトリにconfig.ymlを作る
・ymlファイルのサンプルを参考に自分の設定へアップデート
・GitHubへpush

circleciと連携がうまくいっているかどうか確認するには、下記のサンプルymlをコピペしてgithubへpushしてみたら良いと思います。

自分はこんな感じで確認できました🎉

Configファイルへの理解を深める

configファイルの書き方が分からなかったので、こちらをまずは着手しました。

設定の概要 - CircleCI

パート1~3まで着手したら、なんとなくconfigファイルの挙動がつかめたのでオススメです。

パート 1：すべてはシェルから始まる
パート 2：ビルドのための情報と準備
パート 3：処理の追加

個人的にハマったのが、インデントがずれているとエラーになりジョブが実行されないこと・・。ネストするときは注意が必要です😞

Configファイルに自身の設定を追記

最終的に完成したconfig.ymlファイルはこちらです。

version: 2
jobs:
 deploy_app:
   working_directory: ~/sample
   docker:
     - image: circleci/node:10-browsers
   steps:
     - checkout
     - run:
         name: node_modulesのインストール
         command: |
           yarn
     - run:
         name: テスト
         command: |
           yarn lint
     - run:
         name: ビルド
         command: |
           yarn run build
     - run:
         name: firebase-toolsのインストール
         command: |
           yarn add --dev firebase-tools
     - run:
         name: firebaseへデプロイ
         command: |
           ./node_modules/.bin/firebase deploy --token=$FIREBASE_TOKEN
workflows:
 version: 2
 build-deploy:
   jobs:
     - deploy_app:
         filters:
           branches:
             only: master

書き方が分かれば特に難しいものではありません。・・が、公式のサンプルymlファイルは設定がたくさんあって読み解くのが大変でした💦最終的にはここまでシンプルにできた！

業務で使えるような設定ではないですが、入門としてやりたかったことは実現できるので一旦満足😊

Firebaseのトークンを設定

configファイルの「firebaseへデプロイ」で --token=$FIREBASE_TOKEN とトークンを渡しています。これは設定が必要なので簡単に明記します。

まず、手元のコマンドで下記を実行

$ firebase login:ci

するとブラウザが立ち上がります。このようにSuccessfulとなれば成功！

ターミナルにはこのようにトークンが表示されるのでコピーしておきます。（オレンジで隠している下の部分に表示されているハズ）

次に、CircleCIの設定画面にいき、BUILD SETTINGS からEnvironment Variables → Add Variable を選択します。

Name: FIREBASE_TOKEN
Value: 先ほどコピーしたトークンを入力

このように登録します。

これで設定は完了！😊

詳しくは下記をご覧ください。

Configuring Deploys - CircleCI

注意なのは、firebase-toolsのインストールはyarn global addではなく、yarn --dev add しないといけないことです！

CircleCI で firebase-tools をグローバルにインストールすることはできません。このため、firebase-tools はプロジェクトの devDependencies に追加します。

ここ、ちょっと分かりにくかった〜😣

実際にデプロイされるか検証

masterブランチへの変更を検知して実行されるはずなので、３通り試してみます。

１： developブランチへ修正したコードをpush
２： developブランチをmasterブランチへmerge
３： masterブランチへ直接push

この場合、１のときはCircleCIは動きませんが、２のときは動作しているのがわかります。

無事に３のmasterへpushしただけでもデプロイされました！よかったよかった〜🌟

Firebaseについてちゃんと知りたい方はこちらがおすすめです！

サーバーレス開発プラットフォーム Firebase入門