こんにちは。鈴木商店の若林 (@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の設定もしてくれます。
以下のコマンドで追加しましょう。
|
1 2 |
ng add @angular/fire |
Firebaseプロジェクトを選択します。
|
1 2 3 |
? 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なるコマンドが追加されていて、これを使うとデプロイできます。
いったん手動でデプロイしてみましょう。
|
1 2 |
ng deploy |
Angular CLI 8.3.0から変わった、イケてる初期テンプレートが見れました。
ここからさらに設定を加えていきます。
以下のコマンドを実行します。
|
1 2 |
firebase use --add |
プロジェクトを聞かれるので先程と同じプロジェクトを選択します。
|
1 2 3 |
? Which project do you want to add? (Use arrow keys) ❯ ngx-firebase-travis-ci-example |
エイリアスをつけます。
production、staging、developmentなど環境を分けたい場合はここでエイリアスをつけて切り替えられるようになります。
今回はproductionオンリーでいくのでproductionにします。
|
1 2 |
? 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を行う場合
.travis.ymlは以下の通りになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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を追加します。
|
1 2 3 4 5 6 7 8 |
browsers: ['Chrome'], customLaunchers: { ChromeHeadlessCI: { base: 'ChromeHeadless', flags: ['--no-sandbox'] } }, |
E2Eテストプロジェクトのフォルダ直下にprotractor-ci.conf.jsを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 |
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の内容もよりシンプルになっています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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にプッシュします。
|
1 2 |
git push |
するとこんな感じでTravis CIが動き出します。
成功すると緑になります。
以上です。
トラブルシューティング
Q. 以下のエラーが出てデプロイに失敗する
|
1 2 3 4 |
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
