こんにちは。

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の設定もしてくれます。

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

bash

ng add @angular/fire

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

bash

? Please select a project: (Use arrow keys or type to search)
❯ ngx-firebase-travis-ci-example (ngx-firebase-travis-ci-example)

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

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

bash

ng deploy

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

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

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

bash

firebase use --add

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

bash

? Which project do you want to add? (Use arrow keys)
❯ ngx-firebase-travis-ci-example

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

bash

? What alias do you want to use for this project? (e.g. staging) 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は以下の通りになります。

.travis.yml

language: node_js
node_js:
  - "10"
dist: trusty
addons:
  apt:
    sources:
      - google-chrome
    packages:
      - google-chrome-stable

script:
  - npm run lint
  - npm run test -- --no-watch --no-progress --browsers=ChromeHeadlessCI
  - npm run e2e -- --protractor-config=e2e/protractor-ci.conf.js
  - npm run build -- --prod

deploy:
  skip_cleanup: true
  provider: firebase
  token:
    secure: $FIREBASE_TOKEN
  project: production # Firebaseのエイリアスを指定する

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

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

karma.conf.js

browsers: ['Chrome'],
customLaunchers: {
  ChromeHeadlessCI: {
    base: 'ChromeHeadless',
    flags: ['--no-sandbox']
  }
},

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

protractor-ci.conf.js

const config = require('./protractor.conf').config;

config.capabilities = {
  browserName: 'chrome',
  chromeOptions: {
    args: ['--headless', '--no-sandbox']
  }
};

exports.config = config;

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

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

.travis.yml

language: node_js
node_js:
  - "10"
dist: trusty

script:
  - npm run lint
  - npm run build -- --prod

deploy:
  skip_cleanup: true
  provider: firebase
  token:
    secure: $FIREBASE_TOKEN
  project: production # Firebaseのエイリアスを指定する

FIREBASE_TOKENを設定する

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

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

確認

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

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

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

bash

git push

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

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

以上です。

トラブルシューティング

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

Error: No project active. Run with --project <projectId> or define an alias by
running firebase use --add
Firebase deployment failed

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

さいごに

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

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

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

前提

Angular + Firebase セットアップ

Travis CI

.travis.yml

Unit test, E2E testを行う場合

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

FIREBASE_TOKENを設定する

確認

トラブルシューティング

さいごに