Travis CI で Angular + Firebase の CI/CD 環境を構築する

2019年08月30日
投稿者:若林 奨太
カテゴリ:Angular, CI/CD タグ:, ,

こんにちは。鈴木商店の若林 (@itigoore01) です。

AngularでつくってFirebase Hostingでホスティングするアプリを、Travis CIでCI/CDをまわしちゃいましょう。

前提

  • Angular CLIとfirebase-toolsをインストール済み
  • Firebaseプロジェクトを作成済み
  • Angularアプリを作成済み

firebase-toolsのインストール方法と、Firebaseプロジェクトの作成方法は Travis CI で Firebase の CI/CD 環境を構築する#Firebase
を御覧ください。

Angularアプリの作成については 公式ドキュメント を御覧ください。

Angular + Firebase セットアップ

公式ドキュメントにもありますが、@angular/fireを追加すると、同時にFirebase Hostingの設定もしてくれます。

以下のコマンドで追加しましょう。

Firebaseプロジェクトを選択します。

設定が完了するとfirebase.jsonなどのファイルが出来ているはずです。

また、Angular CLI 8.3.0からはng deployなるコマンドが追加されていて、これを使うとデプロイできます。
いったん手動でデプロイしてみましょう。

Angular CLI 8.3.0から変わった、イケてる初期テンプレートが見れました。

スクリーンショット 2019-08-30 15.34.29.png

ここからさらに設定を加えていきます。

以下のコマンドを実行します。

プロジェクトを聞かれるので先程と同じプロジェクトを選択します。

エイリアスをつけます。
production、staging、developmentなど環境を分けたい場合はここでエイリアスをつけて切り替えられるようになります。
今回はproductionオンリーでいくのでproductionにします。

以上です。

なお、Firebase Hosting以外の機能も利用する場合は追加で設定が必要です。
詳しくは Travis CI で Firebase の CI/CD 環境を構築する#firebase-toolsでプロジェクトを用意するを御覧ください。

Travis CI

.travis.yml

.travis.ymlをプロジェクトフォルダ直下に作成します。

内容は以下のとおりです。
Unit test、E2E testを行うかどうかで少し変わってきます。

  • Unit test、 E2E testを行う場合 → こちら
  • Unit test、 E2E testを行わない場合 → こちら

Unit test, E2E testを行う場合

.travis.ymlは以下の通りになります。

このままではCI環境でテストを実施できないので、テストの設定を変更します。
このあたりは 公式ドキュメントに詳しく書いてあります。

karma.conf.jsのbrowsersの下に、customLaunchersを追加します。

E2Eテストプロジェクトのフォルダ直下にprotractor-ci.conf.jsを作成します。

Unit test, E2E testを行わない場合

テストを行わない場合は.travis.ymlだけでOKです。
.travis.ymlの内容もよりシンプルになっています。

FIREBASE_TOKENを設定する

FirebaseのトークンをTravis CIに設定する必要があります。

Travis CI で Firebase の CI/CD 環境を構築する#Travis CIにFirebaseのTokenを設定するをご参照ください。

確認

GitHubにプッシュしてCIが走るか確認してみましょう。

まず対象のリポジトリのCIが有効になっているか確認します。
有効になっていなければ有効にしましょう。

スクリーンショット 2019-08-30 15.44.42.png

次にGitHubにプッシュします。

するとこんな感じでTravis CIが動き出します。

スクリーンショット 2019-08-30 15.47.05.png

成功すると緑になります。

スクリーンショット 2019-08-30 16.13.37.png

以上です。

トラブルシューティング

Q. 以下のエラーが出てデプロイに失敗する

A. firebase use --addをしていない可能性があります。
こちらを参照してください。

さいごに

今回の例のソースコードは以下にあります。

https://github.com/itigoore01/angular-firebase-travis-ci-example


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です