ncdc_ModernApp_20200428

2020/04/28 弊社主催のウェビナー資料です。
--------------------------------------------
【セミナー内容】
近年のアプリケーション開発では、マイクロサービス 、サーバレスアーキテクチャ、SPA（Single Page Application）などのキーワードが注目を集めており、開発現場では実装手段として多くの新しい技術が活用されています。

しかし、実践的な学習機会が多い現場のエンジニアに比べて、マネージャー層の方はこうした新しい技術を学ぶ機会が意外と少ないという問題があります。
そのため、広く浅くキーワードとしては理解していても、それぞれのメリットを十分に活用するためのプランニングを行うのはなかなか難しいかもしれません。

本セミナーでは、これらの技術トレンドに取り組もうとされている企業の方、とくにその戦略を立てるべきリーダー、マネージャークラスの方向けに、技術トレンドと、それを生かした開発から運用までのアプリケーションライフサイクルの考え方についてご説明します。

自社のプロジェクトにおいて、今後、モダンアプリケーションの実装にどう取り組んでいくべきか、その戦略立案の第一歩にしていただければ幸いです。

Transcript

1. マネージャー層向け モダンアプリケーション 開発戦略セミナー マイクロサービス 、 S PA、サーバレス… 2 0 2 0 / 0 4 / 2 8 N C D C 株 式 会 社 ⼗ 川 亮 平
2. Copyright © NCDC Co., Ltd. All rights reserved. プレゼンター紹介 ⼗川 亮平 取締役/CTO NCDCでは、モバイル、API、IoT、機械学 習などを使った新規サービスの企画⽴案や、 プロジェクト推進の⽀援を担当。 Webサービス／モバイルアプリのバックエ ンドプラットフォームである「AppPot」 のプロダクトマネージャーとして、マーケ ティング活動やAPIの開発を⾏っている。 2
3. Copyright © NCDC Co., Ltd. All rights reserved. NCDCのサービス l CX/UXと先端テクノロジーによってデジタルイノベーションを推進します 3 NCDC CX/UX デザイン 先端 テクノロジー 自社 サービス • 新規サービス企画 • CX/UXデザインコンサルティング • IoT/AI • クラウドインテグレーション • モバイル・Web先端技術 • モバイルプラットフォーム [AppPot]の製造・販売 • IoTプラットフォーム • [AppPot IoT]の製造・販売
4. Copyright © NCDC Co., Ltd. All rights reserved. NCDCのサービスの特徴 4 ビジネスモデルのデザイン PoC・検証 システム・インテグレーション ビジネスモデルの検討からデザインによる可視化、先端テクノロジーの組み合わせでシステムを構築します ITアーキテクチャのデザイン リファレンス実装 DX推進のための組織デザイン 4
5. Copyright © NCDC Co., Ltd. All rights reserved. 今日お伝えしたいこと 5 １０年間でテクノロジーは ⼤きく進歩 クラウド、サーバーレス、コンテナ、 複雑なアプリケーションを開発できるJavaScript フレームワーク・・・ ビジネス、ユーザーからの求められ るレベルがあがっている ビジネスに貢献するIT すばらしいUX もっと早くリリースしたい モダンなアプリケーション開発ができるかどうかが ⼤きな違いになってくる Enabler Needs
6. Copyright © NCDC Co., Ltd. All rights reserved. これらを支えるテクノロジー l マイクロサービス・アーキテクチャ l アプリケーションプラットフォーム • サーバレス • コンテナ（ Docker、Kubernetes） • マネージドサービス l SPA（Single Page Application） • React • Vue.js 6
7. Copyright © NCDC Co., Ltd. All rights reserved. 大きなトレンド① モノリシックからマイクロサービスへ 7 モノリシックな システム マイ クロ サー ビス 様々な機能を１つのシステ ムで実現。 各機能やデータは密に連携 しているため、システム改 修時に影響範囲が⼤きく、 変更に時間がかかる マイ クロ サー ビス マイ クロ サー ビス 機能の塊で、システムを分割。 各マイクロサービスは独⽴性を 保ち、他サービスと連携しなが ら全体の機能を提供するという 考え⽅ Ex)ECサイトで商品、買い物か ご、決済、顧客管理を別のサー ビスとして構築。
8. Copyright © NCDC Co., Ltd. All rights reserved. マイクロサービスと小さなチームでアジャイル 8 マイクロサービス プロダクトオーナー エンジニア デザイナー マイクロサービス マイクロサービス ⼤きなシステム、チームは情報伝達の効率性を優先した仕様を凍結して 後戻りしないウォーターフォールと、PMを頂点とした階層構造の深い組織となる。 マイクロサービスで⼩さなシステム規模を保つことで、 マイクロサービスごとのフラットで⼩さな組織で柔軟に対応可能となる プロダクトオーナー エンジニア デザイナー プロダクトオーナー エンジニア デザイナー
9. Copyright © NCDC Co., Ltd. All rights reserved. 大きなトレンド② APIによるコラボレーション 9 顧客向け フロントエンド 管理向け フロントエンド 社内の 他システム 他社の 他システム API データベース 以前はAPIを作るということが、⼤変な作業でしたが、 現在は⾮常に簡単に作れるようになり、連携の⼿法として⼀般的になりました。
10. Copyright © NCDC Co., Ltd. All rights reserved. マイクロサービスと技術レイヤー 10 商品 買い物 かご 決済 配送 フロントエンド バックエンド （API） データベース 技術 レイヤー どのような単位で マイクロサービスに分けるか
11. Copyright © NCDC Co., Ltd. All rights reserved. システムの特性に合わせて、採用する技術を 組み合わせることが容易になってきている 11 商品 買い物 かご 外部の 決済 サービ ス 配送 パッ ケージ ソフト フロントエンド バックエンド （API） データベース 技術 レイヤー どのような単位で マイクロサービスに分けるか MySQL NoSQL DB Node.js Java 顧客向けフロントエンド
12. Copyright © NCDC Co., Ltd. All rights reserved. マイクロサービスの粒度 l 独⽴性が⾼く、意味のある機能を実現する（サービス） • 影響範囲・依存関係を狭くする l 機能の凝集性を⾼く、他サービスとの結合度を低く • ビジネスとしてのモノの「意味が近い」の単位 • ビジネスとしてコトが⼀つのサービス内で完結するか︖ 処理のトランザクションが分散しないか︖ l サービス間のトランザクション制御は基本避けたい。システムが複雑化しやすい データ取得（参照時）に多くのAPI経由でのデータ取得にならないか︖ l テーブル間Joinで取得できたデータがAPI経由になるとパフォーマンス低下 12
13. アプリケーションプラットフォーム （サーバレス、コンテナ） 13
14. Copyright © NCDC Co., Ltd. All rights reserved. クラウドネイティブなアプリケーション設計 l クラウドを利⽤することで、インフラの調達、管理をクラ ウドベンダーに任せることができるようになりました l さらにクラウドを前提としたアプリケーション設計を ⾏うことで、「俊敏性（アジリティ）」、「拡張性（ス ケーラブル）」を得られます l このような構成をクラウドネイティブと呼びます 14
15. Copyright © NCDC Co., Ltd. All rights reserved. クラウドネイティブとは具体的には何を指すのか l コンテナ、サーバレスなどの技術、 クラウドベンダーが提供しているマネージドサービスを 積極的に利⽤してサービスの設計、開発を⾏います l 俊敏性 • ⾃分たちで作る量を減らし、クラウドベンダーが提供している機能を サービスとして利⽤する • インフラだけでなく、OS、ミドルウェアをプラットフォームとして提 供し、その上に作る⾃分たちの付加価値提供に集中する l 拡張性 • 利⽤者の増加に応じて、オートスケールできる基盤、アプリケーション の設計にする 15
16. Copyright © NCDC Co., Ltd. All rights reserved. サーバレスや、コンテナが流行っている背景 l DevOps、Infrastructure as Codeの取り組みのなかで 従来の開発チームとインフラチーム、運⽤チームの 垣根が低くなってきている 開発チームがアプリだけでなく、 ミドルウェアやインフラ構築、リリースなどの 運⽤の⼀部を担当するようになってきている l その際、従来の⼿順書ベースの環境構築、運⽤ではなく、 コードで定義して、⾃動化することが求められる 16
17. Copyright © NCDC Co., Ltd. All rights reserved. サーバレスとはサーバーが無い？ l 実際には物理的なサーバー上にアプリケーションを配置し ますが、開発者がサーバーや、実⾏基盤のようなミドル ウェアを意識する必要がありません l 暗黙的にはこのような処理が⾏われています l 処理の実⾏回数により課⾦が⾏われる アプリケーション サーバー ①処理要求 ビルド済み アプリケーション ②サーバー上に 読み込み ③処理の実⾏ ④アプリケーションの破棄 17
18. Copyright © NCDC Co., Ltd. All rights reserved. サーバレスとはサーバーが無い？ l 実際には物理的なサーバー上にアプリケーションを配置し ますが、開発者がサーバーや、実⾏基盤のようなミドル ウェアを意識する必要がありません l 暗黙的にはこのような処理が⾏われています l 処理の実⾏回数により課⾦が⾏われる アプリケーション サーバー ①処理要求 ビルド済み アプリケーション ②サーバー上に 読み込み ③処理の実⾏ ④アプリケーションの破棄 サーバーなどのハード障害はあり得る。 しかし、次の処理要求は別の正常な サーバーで処理される。 サーバーの復旧や、フェイルオーバー などの仕組みを⾃分たちで考える必要 がない 多少のオーバーヘッドがあります。 サーバーへの読み込み、アプリケー ションの破棄はクラウド側で最適化 される （できるだけ再利⽤してくれる） 18
19. Copyright © NCDC Co., Ltd. All rights reserved. コンテナとは l Dockerの仮想化技術がベースとなっている • Kubernetes、AWS ECSなどはDockerコンテナを運⽤するためのもの （オートスケール、フェイルオーバー、負荷分散など） • 徹底的に⾃動化ができるようになっている。 図は下記より引用 https://www.docker.com/resources/what-container 19
20. Copyright © NCDC Co., Ltd. All rights reserved. コンテナとは l Dockerの仮想化技術がベースとなっている • Kubernetes、AWS ECSなどはDockerコンテナを運⽤するためのもの （オートスケール、フェイルオーバー、負荷分散など） • 徹底的に⾃動化ができるようになっている。 図は下記より引用 https://www.docker.com/resources/what-container ハードウェアは意識しませんが、 OS、ミドルウェアなどの準備、管 理は必要 サーバレスと違い、常時起動してお くような処理もできる Dockerが動作する別のホストへ コンテナを持っていくことができる 可搬性 本番環境→検証環境 １号機→２号機 20
21. Copyright © NCDC Co., Ltd. All rights reserved. サーバレスとコンテナの使い分け マネージドサービス サーバレス コンテナ IaaS 機能 • 提供されたもの を使う • ⾃前で開発 • 処理が15分以内 • コネクションプール が使えず、DBは RDBMSと相性悪い • ⾃前で開発 • ⾃前で開発 アプリフレー ムワーク例 • 使⽤しない • Serverless Framework • Spring Boot • Spring Boot、 Spring Framework インフラ • クラウドベン ダーに任せる • クラウドベンダーに 任せる • リクエスト数に応じ て使った分だけ課⾦ • ハードウェア、仮想 化環境はクラウドベ ンダーに任せる • ⽤意したインスタン スに合わせて課⾦ • ハードウェアは提供さ れる。 • OS以上を⾃前で構築 • ⽤意したインスタンス に合わせて課⾦ 運⽤ • クラウドベン ダー • 基本、クラウドベン ダーに任せる • 機能のリリースなど は⾃前 • コンテナ管理はクラ ウドベンダー • コンテナイメージ、 アプリは⾃前 • インフラ管理より下の レイヤーはクラウドベ ンダー • OS、アプリは⾃前 サービス 例 • AWS Cognito 認証サービス • AWS Lambda • ECS（AWS独⾃） • EKS（Kubernetes） • EC2 21 • 開発しなくて良い／運⽤コストが下がる • 制約は⼤きい やりたいことと提供されるものがあっている場 合には、⾮常に効果を発揮する。 要件とフィットしていれば、使ったほうが良い • ⾃由度が⾼い • 開発、運⽤の費⽤は相対的に ⼤きい
22. Copyright © NCDC Co., Ltd. All rights reserved. AWS Lambdaの起動のオーバーヘッドついて AWSから事前に起動させておくオプションが提供 22 https://aws.amazon.com/jp/blogs/aws/new-provisioned-concurrency-for-lambda-functions/
23. Copyright © NCDC Co., Ltd. All rights reserved. 事例）サーバレスとマネージドサービスをフル活用したアーキテクチャ 23 Webアプリ コンテンツ アプリ向けAPI Lambda 業務ロジック DynamoDB 添付ファイル Cognito ユーザー認証 利⽤者 社内システム 社内システム 社内向けAPI Lambda 業務ロジック マスタ データ連携 バッチによる ⽇次データ取り込み AWS ⾃社データセンター Cloud Front S3 ⾃社営業 向け配信 SNS Push通知
24. Copyright © NCDC Co., Ltd. All rights reserved. 事例）サーバレスとマネージドサービスをフル活用したアーキテクチャ 24 Webアプリ コンテンツ アプリ向けAPI Lambda 業務ロジック DynamoDB 添付ファイル Cognito ユーザー認証 利⽤者 社内システム 社内システム 社内向けAPI Lambda 業務ロジック マスタ データ連携 バッチによる ⽇次データ取り込み AWS ⾃社データセンター Cloud Front S3 ⾃社営業 向け配信 SNS Push通知 AWS Lambda サーバレスな処理実装 Cognito マネージドな 認証サービス DynamoDB スケールアウト可能な データベース アプリケーションは S3とCloudFrontで配信
25. 複雑なアプリケーションを 開発できるJavaScriptフレームワークの登場 SPA（React、Vue.js） 25
26. Copyright © NCDC Co., Ltd. All rights reserved. アーキテクチャは歴史を繰り返しながら発展 26 ホストコンピューター クラサバ Webアプリ SPA Windows95 LAN化 ⼀⼈⼀台に向かう クライアント配布の⼿間 をブラウザ利⽤で解決 スマホのネイティブアプリ登場でクライア ントリッチ/サーバーシンプル（API）に HTML5/JavaScriptの標準化・フレームワー クの成熟 サーバーサイドがシンプルになったことで、再 利用性が上がる。かつサーバレス等のシンプ ルなアーキテクチャが可能に サーバー︓Fat クライアント︓Thin サーバー︓Thin クライアント︓Fat サーバー︓Fat クライアント︓Thin サーバー︓Thin クライアント︓Fat ダム端末 ダム端末 VB,C++ ,Notes PHP, Java, .Net React,Vue.js
27. Copyright © NCDC Co., Ltd. All rights reserved. 言語やフレームワークの進化で、複雑なアプリ ケーションをJavaScriptで実装可能になった 27 HTML+ JavaScriptで ⾒た⽬のインタ ラクション 2005-2006 AJAX / jQuery の登場 2010-2012 Web技術の標準化 と様々なフレーム ワーク乱⽴ 2013-2015 React とSPAフ レームワークの 主要概念登場 Google Map の出現︓ ページ遷移のない滑ら かな動きが画期的 → 画⾯遷移中⼼のUI から離れたWebアプ リケーションの登場 Flashなどとともに、 Webブラウザでリッ チな表現が追求される UIの複雑化・肥⼤化 → フロントエンドの ための様々なフレーム ワークが考案される Backbone.js, AngularJS, Knockout など JavaScriptでできるこ とが増えてきたが、ス タンダードは定まらな かった → 混迷の時代︓⼤企 業は静観、 jQuery が 依然としてメインに 2018- React / Vue に よるSPA実装が スタンダード化 React の出現︓仮想 DOMという概念の導 ⼊ → 複雑になりがちな DOM操作を抽象化 Flux の提唱︓単⽅向 データバインディング によるシンプル化 → それまでの双⽅向 バインディングは複雑 化に耐えきれなかった コンポーネント指向︓ 部品をコンポーネント 単位で分割 Vue.js がReactに次 ぐフレームワークと して台頭 Reactの唱えた思想が 広まり、SPA開発の 知⾒が蓄積される ReactとVueの2⼤勢 ⼒によるモダンなフ ロントエンド開発が トレンド → ⽅向性が定まり、 ⼤企業も重い腰を上 げ始めている Webサイトを作 るためのもの
28. Copyright © NCDC Co., Ltd. All rights reserved. フロントエンドの実装言語 l モダンなJavaScriptフレームワークによるSPA開発が主流に • JavaScriptフレームワーク︓JavaScriptエコシステムの発展により、 ユーザーによりリッチな体験を届けることができるようになり、その開 発をサポートするフレームワークの使⽤が主流になっている。 • SPA（Single Page Application）︓ページ遷移を⾏わないWebアプリ ケーションの形態。従来の「サーバーでページを⽣成して返す」という 考え⽅ではなく、「サーバーはデータやビジネスロジックを担当し、ブ ラウザがその処理を元にページを⽣成する」のが特徴。 l ブラウザで実⾏されるフロントエンドがより重要に • フロントでの処理の⽐率が上がり、また動きが多様になったためロジッ クが複雑化する傾向にある。 • フレームワークやプラグインをパッケージ管理ツールで組み合わせ、よ り⾼度な実装が求められるようになった。 28 28
29. Copyright © NCDC Co., Ltd. All rights reserved. モダンなJavaScriptフレームワークでできること l UIコンポーネントの共通化 • ボタン、フォーム、ダイアログ・・・ • UIカタログを作って複数のアプリケーションから再利⽤することも可能 l 状態の管理 • ログイン状態、ユーザーの⼊⼒したデータを⼀次保持 l 処理のルーティング • 画⾯からのユーザーのアクションを、どの処理に渡すか など、これまでサーバー側でしかできなかったことが、フロントエン ドだけでできるようになることで、よりリッチなUI、 複雑なアプリケーションを実装できるようになっている 29
30. Copyright © NCDC Co., Ltd. All rights reserved. React vs. Vue l Reactとは︖ • 2013年に登場した、Facebookを中⼼に開発されたオープンソースのフ ロントエンドライブラリ • テンプレート、コンポーネント、仮想DOMによる効率化等の最新フロ ントエンド構築に必要な機能を有する • ほぼ全てをJavaScriptで実装し、JavaScriptの恩恵を最⼤限に受けられ る • 学習コストがそれなりに⾼く、慣れるまで時間がかかる • 秩序が保たれており、書き⽅を統⼀しやすく、⼤規模アプリケーション の開発に向く 30
31. Copyright © NCDC Co., Ltd. All rights reserved. React vs. Vue l Vueとは︖ • 2014年に登場した、AngularJS開発に携わったEvan Youによって開発 されたオープンソースのフロントエンドライブラリ • Reactと同じく最新フロントエンド構築に必要な機能を有する • 従来のHTML/CSS ベースのコードと組み合わせて使⽤することも多く、 部分的にVueを導⼊するなど柔軟な採⽤が可能 • HTMLベースの直感的なテンプレートを提供しており、理解しやすく とっつきやすい • 柔軟な書き⽅を許す⼀⽅で、各開発者での差やライブラリの実装⽅法の 差も⼤きく、⼤規模な開発には慎重なルール設定を要する 31
32. モダンアプリケーション化の始め⽅ 32
33. Copyright © NCDC Co., Ltd. All rights reserved. モダンアプリケーションの導入 エンジニアの育成（サーバーサイド） l Javaや.NETなどでサーバーサイドのアプリケーションを開発して いたエンジニアが、サーバレスや、コンテナに対応したアプリ ケーションを開発することは⽐較的容易 各クラウドベンダーが提供する実⾏環境 • AWS Lambda︓Java、Go、PowerShell、Node.js、C#、Python、Ruby • Microsoft Azure︓C#、Node.js、F#、Java、PowerShell、Python、 TypeScript • Google Cloud Functions︓Node.js、Python、Go l ただし、サーバレス、コンテナの特徴を活かすためにいつくかの やるべきことがあります。 • アプリ層にステートを持たない • Infrastructure as Code（インフラ構築の⾃動化） など 33
34. Copyright © NCDC Co., Ltd. All rights reserved. モダンアプリケーションの導入 エンジニアの育成（フロントエンド） l SPAはJavaScriptで複雑なアプリケーションを組めるように したものなので、Webサイトのエンジニアで、アプリケー ションの開発は未経験というエンジニアにはハードル⾼め。 l 逆に何らかの⾔語でアプリケーションを開発していた⼈が JavaScriptとSPAのフレームワークを覚えるという⼿もある l UIの部分の、API呼び出しや処理ロジックを各エンジニアを 最初は分けるというのもあり 34
35. Copyright © NCDC Co., Ltd. All rights reserved. モダンアプリケーションの導入 どんなシステムに適用していくか l サーバレス、コンテナ、SPAとも数ヶ⽉のキャッチアップは 必要だと思います。 l そのため、設計が失敗したと気づいた時に リファクタリングが可能な 規模がそれほど⼤きくなく、期間にも若⼲余裕のある プロジェクトが適しています。 35
36. まとめ
37. Copyright © NCDC Co., Ltd. All rights reserved. 今日お伝えしたいこと 37 １０年間でテクノロジーは ⼤きく進歩 クラウド、サーバーレス、コンテナ、 複雑なアプリケーションを開発できるJavaScript フレームワーク・・・ ビジネス、ユーザーからの求められ るレベルがあがっている ビジネスに貢献するIT すばらしいUX もっと早くリリースしたい モダンなアプリケーション開発ができるかどうかが ⼤きな違いになってくる Enabler Needs
38. Copyright © NCDC Co., Ltd. All rights reserved. これらを支えるテクノロジー l マイクロサービス・アーキテクチャ l アプリケーションプラットフォーム • サーバレス • コンテナ（ Docker、Kubernetes） • マネージドサービス l SPA（Single Page Application） • React • Vue.js 38
39. Copyright © NCDC Co., Ltd. All rights reserved. NCDCのサービスの特徴 39 ビジネスモデルのデザイン PoC・検証 システム・インテグレーション ビジネスモデルの検討からデザインによる可視化、先端テクノロジーの組み合わせでシステムを構築します ITアーキテクチャのデザイン リファレンス実装 DX推進のための組織デザイン 39
40. Copyright © NCDC Co., Ltd. All rights reserved. 40 ご相談はお気軽に︕ info@ncdc.co.jp www.ncdc.co.jp