ゼロからAngularでSPAを作ってみた(3) CI: 継続的インテグレーション編


前回までのおさらいと今回やること

前々回(はじめてのアプリ編)前回(デプロイ・公開編)で、作成した Angular のチャットアプリを Web に公開するところまでいきました。
でも、デプロイするのに、毎回決まったコマンドを打つのって面倒ですよね。
今回は GitHub でソースコードを管理して、ビルド〜テスト〜デプロイのプロセスを自動化してみます。

初心者でもできるように基本的なことも書いているので、わかっている人は読み飛ばしてください。

前回までと同様に macOS 前提となっているので Windows の人は適宜読み替えてください。

GitHub でソースコードを管理する

GitHub に作成したコードを公開して管理します。アカウントが必要なので、持っていなければ作成します。

インストール・設定

必要なコマンドをインストールしていきます。

git コマンド

Homebrew を使って最新の Git をインストールします。

hub コマンド

GitHub の操作に使うコマンドです。インストールしておきます。

自動補完とブランチ・ステータス表示設定

ここここを参考に、git-completion.bashgit-prompt.shhub.bash_completion.sh の設定をして git コマンドと hub コマンドを使いやすくします。

リポジトリ作成・コミット・プッシュ

GitHub への接続設定

インストールが終わったらここらへんを参考にして、公開鍵を使って GitHub に SSH で接続できるようにしておきます。

GitHub へのリポジトリ作成

アプリのディレクトリ(サンプルそのままであれば dac-angular )に移動して次のコマンドを打ってリポジトリを作成します。

コミット・プッシュ

これまでの変更内容を追加してコミット・プッシュしてリポジトリに反映させます。

GitHub でソースコードを公開・管理

GitHub でソースコードを公開・管理

これで GitHub でソースコードが管理できるようになりました。これから先、Git や GitHub の操作についての説明は省略するのでわからない人はこことかで勉強してください。

Angular でのデバッグ・テスト

自動化する前に、Angular でのデバッグ・テストについて説明しておきます。

Visual Studio Code で Chrome を使ってデバッグ

Visual Studio Code では Chrome を使ってデバッグ(ステップ実行など)ができるようになっていて、次の手順で使えます。(大前提として Google Chrome がインストールされている必要があります)
拡張機能で Chrome を検索すると Debugger for Chrome が見つかるのでインストールします。

Debugger for Chrome をインストール

Debugger for Chrome をインストール

メニューで「デバッグ」>「デバッグの開始」を選ぶと、Node.js と並んで「Chrome」が表示されるので「Chrome」を選択します。

Visual Studio Code でデバッグを開始

Visual Studio Code でデバッグを開始

デバッグで Chrome を選択

デバッグで Chrome を選択

デバッグ用の設定ファイル launch.json が生成されるのでポートを 8080 から 4200 に変更します。

launch.json が生成される

launch.json が生成される

これで準備ができました。メニューで「デバッグ」>「デバッグの開始」を選ぶとデバッグできるようになります。

Visual Studio Code で統合ターミナルを使う

Visual Studio Code で統合ターミナルを使うと、コマンドラインの実行が楽になります。メニューで「表示」>「統合ターミナル」を選ぶと表示されます。

Visual Studio Code で統合ターミナルを開く

Visual Studio Code で統合ターミナルを開く

書式チェック(TSLint: ng lint)

次のコマンドで書式チェックができます。内部では TSLint が使われて、設定ファイル tslint.json を参照します。

スペースがないとか、余計なスペースがあるとか、セミコロンがないとか、ダブルクォーテーションとシングルクォーテーションの使い分けとか、細かいところでいろいろ怒られます…

単体テスト(Karma: ng test)

次のコマンドで単体テストが実行されます。内部では Karma が使われて、設定ファイル karma.conf.js を参照します。

実行時に --single-run オプションをつけると1回のみ実行されて、--code-coverage オプションをつけると coverage フォルダにコードカバレッジ(網羅率)の結果が保存されます。

Karma でのテスト画面

Karma でのテスト画面

コードカバレッジ

コードカバレッジ

単体テストは各コンポーネントの *.spec.ts ファイルに記述します。
元からあるファイルは雛形用なので、作ったアプリに合わせて変更していきます。

単体テストなので Firestore 上のデータは使いません。その代わりにここらへんを参考に Firestore のモックデータのコードを app.component.spec.ts に追加して、テストを通るようにしました。

結合テスト: エンドツーエンドテスト(Protractor: ng e2e)

次のコマンドで結合テストが実行されます。内部では Protractor が使われて、設定ファイル protractor.conf.js を参照します。

Protractor でのテスト画面

Protractor でのテスト画面

結合テストは次のファイルに記述します。

  • + e2e
    • – app.e2e-spec.ts
    • app.po.ts

こちらも元からあるファイルは雛形用なので、アプリに合わせて変更していきます。

Protractor を Angular で使うと、描画が完了するまでテストの実行を待ってくれる便利な機能があるのですが、Firebase と組み合わせたときにうまくいかなかったので、5秒後にテストを実行するように変更しました。
また、このテストは実際の Firestore 上のデータを参照するので、Firestore のデータが変わるとテストが失敗します。そのため注意が必要です。

Travis CI でビルド〜テスト〜デプロイを自動化する

ここから CI(継続的インテグレーション)として、ビルド〜テスト〜デプロイを自動化していきます。
CI の環境としては、古くからあるものとしては Jenkins、サービス型としては CircleCI などもありますが、今回は Travis CI を使います。アカウントが必要なので GitHub のアカウント情報を使ってログインします。

インストール・初期設定

Travis CI Client を使って設定を行うので、その前提として必要となる Ruby からインストールしていきます。(Ruby 環境が設定済みの場合は飛ばしてください)

rbenv のインストール・設定

今後のことも考えて Ruby のバージョンを切り替えられるように rbenv からインストール・設定していきます。

Ruby のインストール・設定

以下では、執筆時点での最新安定板の 2.5.0 をインストールしています。(インストール可能なバージョンは rbenv install --list で確認できます)

Travis CI Client のインストール

Travis CI Client をインストールします。

Travis CI の初期設定

次のコマンドで Travis CI の初期設定を行います。

コマンドを実行すると、Travis CI の設定ファイル .travis.yml が生成されるので以降ではこのファイルに設定を追加していきます。

ビルド・テスト設定

ここここを参考に Travis CI でビルドやテストを実行する設定を追加していきます。

カバレッジ設定

Coveralls と連携してコードカバレッジを取得・表示させるための設定をします。

Coveralls アカウントの作成・設定

Coveralls に GitHub のアカウントを使ってログインして、連携設定を ON にします。

Coveralls で連携設定を ON にする

Coveralls で連携設定を ON にする

Coveralls のインストール

次のコマンドで Coveralls をインストールします。

Coveralls 用の設定を追加

.travis.yml に Coveralls のための設定を追加します。

デプロイ設定

ここを参考にして Firebase のデプロイ設定を進めていきます。

Firebase キーの取得と設定

次のコマンドを実行するとブラウザの画面が開くので Firebase CLI の権限を与えるとキーが取得できます。(ここで取得したキーは秘密です)

取得したキーを使って次のコマンドを実行して .travis.yml に暗号化したキーを追加します。(警告は無視。以下コマンドのXXXX... の部分は実際のキーに置き換えてください)

Firebase デプロイ設定を追加

暗号化キーが追加された部分を書き換えて、Firebase にデプロイするように設定します。(以下の YYYY... の部分は暗号化されたキーです)

まとめ

これで、コミットして GitHub にプッシュすると、ビルド〜テスト〜デプロイが自動的に実行されるようになりました〜

GitHub での表示

GitHub での表示

Travis CI の実行結果

Travis CI の実行結果

Coveralls でのカバレッジ表示

Coveralls でのカバレッジ表示

ここまでのサンプルはここからダウンロードできます。(Firebase の設定などは自分のものに変更して使ってください)
次回は、マテリアルデザインに挑戦してみる予定です。

↓↓↓ ¡ DACはエンジニアを募集しています ! ↓↓↓


DACエンジニア採用情報

  関連記事

no image
AWSにRailsアプリをデプロイする(公開編)

次にデプロイするため“aws rails デプロイ”でググってみるとunicorn、nginxというキーワードがでてくるので とりあえずこれを設定していきます。   アプリのsecret_key_baseの設定 [crayon-5b7347b31e85e555999 …

自社サービスのDocker化(後編)

こんにちは。 インフラ開発部の上田です。 前回、前編としてDockerについて書き、早半年も経ちました。 前編はこちらです 今回は後編として、以下について書いてみたいと思います。 ■複数プロセス起動 前編で書いた通り、通常のOS起動時とは異なり、コンテナ上で個別にプロセスを起動する必要があります。 …

【小ネタ】タスク管理ツール移行: Trello から Asana

  プロジェクトチームのタスク管理ツールを Trello から Asana に変えることになり、 タスクの移行が意外と簡単にできた、というお話です。 Trello と Asana もともと使っていたのは Trello(トレロ)です。 プロジェクト > タスクグループ > タスク …

Android 非同期処理についてまとめてみた

Androidには、UIに影響を与えないよういくつか非同期処理が用意されています。 今回は非同期処理の代表的な ・Service ・IntentService ・HandlerThread について違いを踏まえながらまとめます! 非同期処理について(http://codezine.jp/articl …

Selenium × PHP でテスト自動化!【環境構築編】

はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 テスト自動化の背景 わたくしが担当するXmediaOneでは品質担保のために①コードベ …

ゼロからAngularでSPAを作ってみた(1) はじめてのアプリ編

はじめに Single Page Application (SPA)って知っていますか? Webサイトでコンテンツのリンクをクリックした時に妙に表示が早いな〜というとき、実はページを移動するのではなくてページの一部のみを書き換えていたりします。 こういったサイトの作り方を Single Page A …

fastavroとjqでAVRO形式のファイルからデータを取得しよう

AVRO形式のファイルを取り扱いたい AVROとはApacheプロジェクトのひとつとして開発されているデータ交換形式です。 コンパクトなバイナリで高速なシリアライズ・デシリアライズが行えるため、サーバーログなどに利用されています。 弊社内での一部システムのログデータにも利用されているのですが、専用の …

自社サービスのDocker化(前編)

こんにちは。 インフラ開発部の上田です。 普段は自社開発システムのインフラ担当として、日々頑張って仕事をしています。 今回は、近年話題になっているDockerについて、取り上げてみようと思います! なぜDockerなのか・・・? そもそもDockerとは何か・・・?   当社では様々なサー …

【HTML5】4ツール出力ファイルサイズ比較

こんにちは、近江です。 前回もHTML5のSwiffyについて書かせて頂きましたが、まだまだHTML5について調査しています。 今回はSwiffyを含めた4つのHTML5系ツールで、同じ素材で同じアニメーションを作成した時のファイルサイズを比較したいと思います。 何故ファイルサイズの比較をするかと言 …

Scala入門 準備編「開発環境構築」 – PHP使いからScala使いへ転身!

  はじめに みなさんこんにちは、今月入社しましたプロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 XmediaOneの開発で採用しているプログラム言語はS …