見出し画像

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

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

CircleCIとは??

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

スクリーンショット 2020-01-05 0.33.44

今回実現させたいこと

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

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

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

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

スクリーンショット 2020-01-05 0.40.05

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

CircleCIにプロジェクトを追加

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

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

スクリーンショット 2020-01-04 21.18.09

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

スクリーンショット 2020-01-04 21.20.58

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

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

スクリーンショット 2020-01-04 21.18.14

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

スクリーンショット 2020-01-04 21.23.59

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

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

パート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となれば成功!

スクリーンショット 2020-01-04 23.10.47

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

スクリーンショット 2020-01-04 23.10.37

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

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

このように登録します。

スクリーンショット 2020-01-04 23.12.35

これで設定は完了!😊

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

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

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

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

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

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

1: developブランチへ修正したコードをpush
2: developブランチをmasterブランチへmerge
3: masterブランチへ直接push

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

スクリーンショット 2020-01-04 23.26.23

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

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

息抜きのコーヒー代にさせて頂きます!!♡

ありがとうございます〜!
14
フロントエンドエンジニアです。 日々勉強しながらがんばってます₍ ᐢ. ̫ .ᐢ ₎
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。