自宅でできる「一人DevOps」その3

docker-logo

こんにちは、伊藤忠テクノソリューションズの金子です。

この記事は自宅でできる「一人DevOps」その2の続きとなっています。

「一人DevOps」体験の流れ

前回までの手順で、DevOps環境が構築できました。これから実際にDevOpsな開発を体験していきますが、最初に簡単に流れを説明しておきます。

今回はサンプルアプリケーションに新しい機能を追加するというシナリオを想定します。ローカルPCで新機能を開発し、テストコードを書いてテストを行い、問題なければコードをGithubにプッシュします。開発者(あなた)が行う作業はこれだけで、以降の作業はDevOpsサービス群がテスト~イメージビルド&プッシュ~プロダクション環境へのデプロイデプロイまでを自動で行ってくれます。最後にプロダクション環境のアプリケーションにアクセスしてみて、新機能が追加されていれば完了です。

新機能開発

新機能概要

サンプルアプリケーションに新機能を追加しましょう。現在のアプリケーション画面は以下のようになっています。

angular-phonecat

Search欄にテキストを入力すると、表示させるスマートフォンを絞り込むことができます。また、Sort byで表示順序を指定することができます。今回は新機能として、スマートフォンを提供するキャリアを絞り込み条件に指定できるようにしたいと思います。完成イメージは以下のとおりです。

angular-phonecat-updated

Carrierにキャリアを指定すると、表示させるスマートフォンを絞り込むことができます。

新機能の実装

それでは新機能を実装するコードを書いていきましょう。手順としてはコードをコピペしていただくだけなので簡単です。

app/partials/phone-list.htmlファイルをエディタで開き、11行目の下に以下のコードを追加してください。

続いて、同じファイルの以下の行を修正してください。

この行を、

  • このように修正。
  • 以上で実装は完了です。以下のURLにアクセスしてみてください(IPアドレスはご自身の環境に合わせてください)。Carrierという絞り込み条件が追加されているはずです。キャリアを選択すると表示されるスマートフォンが絞り込まれます。
    http://192.168.99.100:8000/app

    テストコードの実装

    今度はテストコードを書いていきます。

    test/e2e/scenarios.jsファイルをエディタで開き、62行目の下に以下のコードを追加してください。

    このコードは、CarrierAT&Tを指定すると、表示されるスマートフォンの数が2になることを確認するためのテストです。

    テストを実行するためのコマンドは以下になります。ターミナルで実行してください。ここで行われるテストはエンドツーエンドテストと呼ばれる種類のテストです。実際にブラウザでアプリケーションにアクセスし、テスト自動化プログラムがユーザの操作を再現します。なお、テストを実行するためにGoogle Chromeがインストールされている必要があります

    テストを実行すると、以下の様なログがターミナルに表示されます。0 failuresと表示されていれば成功です。

    追加した機能をGithubにプッシュする

    新機能の実装が完了しましたので、Githubにコードをプッシュします。以下のコマンドを実行してください。

    最後のコマンドでGithubの認証情報を聞かれますので、ご自身のアカウントに合わせて入力してください。

    テスト・デプロイ状況の確認

    上記の手順を終えたら、あとはプロダクション環境に新機能がリリースされるのを待つだけです。ここではテストおよびデプロイの状況を確認する方法を説明します。

    TravisCIのテスト状況の確認

    Githubに新しいコードがプッシュされると、TravisCIが自動でテストを開始します。以下のURLにアクセスし、テスト実行の状況を確認しましょう。Githubアカウント名の箇所はご自身のアカウント名に置き換えてください。

    https://travis-ci.org/Githubアカウント名/angular-phonecat

    以下のような画面が表示され、テストの実行ログがリアルタイムに表示されていきます。テスト完了には数分程度かかるので、少しお待ち下さい。

    travis-started

    テストが成功すると以下のように文字が緑色になり、「#XX passed」という文字が確認できると思います。

    travis-passed

    Docker Cloudにてデプロイ状況の確認

    Docker Cloudの画面でデプロイ状況を確認します。画面左上の「Serives」タブをクリックし、「web」のリンクをクリックします。

    続いて、画面中央の「Timeline」タブをクリックしてください。以下のような画面が表示されるので、「Service Redeploy」という項目があることを確認してください。これは新しいイメージがリポジトリにプッシュされたために、自動でコンテナの再作成が行われたことを示しています。つまり、新機能が追加されたアプリケーションのデプロイが完了しているということです。

    最後に、アプリケーション画面を確認します。画面左上の「Services」タブをクリックし、「lb」のリンクをクリックしてください。

    dockercloud-services

    続いて、画面中央あたりの「Endpoionts」タブをクリックし、「Service endpoints」と書かれた箇所のURLをブラウザで開いてください(URLの右にあるアイコンをクリックすればリンク先が開きます)。

    dockercloud-endpoints

    以下の様な画面が表示されたら、「app/」をクリックしてください。

    angular-phonecat-appindex

    Carrierというセレクトボックスが表示され、キャリア名による絞り込みが可能になったことを確認してください。

    angular-phonecat-updated

    まとめ

    「一人DevOps」体験、いかがでしたでしょうか?DevOps、つまり開発と運用が一体となるということがどういうことか、少しでもご理解いただけたら幸いです。

    最初の記事の冒頭でも述べたとおり、企業でDevOpsを実現するためには「ツール」と「文化」の変革が必要です。今回は「ツール」のみに焦点をあてて環境構築およびアプリケーションの新機能のリリース手順をご紹介しましたが、実際の現場では開発と運用が協力できるように、組織的な変化も求められます。弊社では、この組織的な変革も含めてお客様のDevOps実現をご支援するサービスを提供しております。もしご興味がありましたら、いつでもご連絡ください。

     

     

    続編はこちらです。

Pocket

コメント