ncdc_ModernApp_20200428

Slide 1

Slide 1 text

マネージャー層向けモダンアプリケーション開発戦略セミナーマイクロサービス、 S PA、サーバレス… 2 0 2 0 / 0 4 / 2 8 N C D C 株式会社⼗川亮平

Slide 2

Slide 2 text

Copyright © NCDC Co., Ltd. All rights reserved. プレゼンター紹介⼗川亮平取締役/CTO NCDCでは、モバイル、API、IoT、機械学習などを使った新規サービスの企画⽴案や、プロジェクト推進の⽀援を担当。 Webサービス／モバイルアプリのバックエンドプラットフォームである「AppPot」のプロダクトマネージャーとして、マーケティング活動やAPIの開発を⾏っている。 2

Slide 3

Slide 3 text

Copyright © NCDC Co., Ltd. All rights reserved. NCDCのサービス l CX/UXと先端テクノロジーによってデジタルイノベーションを推進します 3 NCDC CX/UX デザイン先端テクノロジー自社サービス • 新規サービス企画 • CX/UXデザインコンサルティング • IoT/AI • クラウドインテグレーション • モバイル・Web先端技術 • モバイルプラットフォーム [AppPot]の製造・販売 • IoTプラットフォーム • [AppPot IoT]の製造・販売

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Copyright © NCDC Co., Ltd. All rights reserved. 今日お伝えしたいこと 5 １０年間でテクノロジーは⼤きく進歩クラウド、サーバーレス、コンテナ、複雑なアプリケーションを開発できるJavaScript フレームワーク・・・ビジネス、ユーザーからの求められるレベルがあがっているビジネスに貢献するIT すばらしいUX もっと早くリリースしたいモダンなアプリケーション開発ができるかどうかが⼤きな違いになってくる Enabler Needs

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Copyright © NCDC Co., Ltd. All rights reserved. 大きなトレンド① モノリシックからマイクロサービスへ 7 モノリシックなシステムマイクロサービス様々な機能を１つのシステムで実現。各機能やデータは密に連携しているため、システム改修時に影響範囲が⼤きく、変更に時間がかかるマイクロサービスマイクロサービス機能の塊で、システムを分割。各マイクロサービスは独⽴性を保ち、他サービスと連携しながら全体の機能を提供するという考え⽅ Ex)ECサイトで商品、買い物かご、決済、顧客管理を別のサービスとして構築。

Slide 8

Slide 8 text

Copyright © NCDC Co., Ltd. All rights reserved. マイクロサービスと小さなチームでアジャイル 8 マイクロサービスプロダクトオーナーエンジニアデザイナーマイクロサービスマイクロサービス⼤きなシステム、チームは情報伝達の効率性を優先した仕様を凍結して後戻りしないウォーターフォールと、PMを頂点とした階層構造の深い組織となる。マイクロサービスで⼩さなシステム規模を保つことで、マイクロサービスごとのフラットで⼩さな組織で柔軟に対応可能となるプロダクトオーナーエンジニアデザイナープロダクトオーナーエンジニアデザイナー

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Copyright © NCDC Co., Ltd. All rights reserved. システムの特性に合わせて、採用する技術を組み合わせることが容易になってきている 11 商品買い物かご外部の決済サービス配送パッケージソフトフロントエンドバックエンド（API）データベース技術レイヤーどのような単位でマイクロサービスに分けるか MySQL NoSQL DB Node.js Java 顧客向けフロントエンド

Slide 12

Slide 12 text

Copyright © NCDC Co., Ltd. All rights reserved. マイクロサービスの粒度 l 独⽴性が⾼く、意味のある機能を実現する（サービス） • 影響範囲・依存関係を狭くする l 機能の凝集性を⾼く、他サービスとの結合度を低く • ビジネスとしてのモノの「意味が近い」の単位 • ビジネスとしてコトが⼀つのサービス内で完結するか︖ 処理のトランザクションが分散しないか︖ l サービス間のトランザクション制御は基本避けたい。システムが複雑化しやすいデータ取得（参照時）に多くのAPI経由でのデータ取得にならないか︖ l テーブル間Joinで取得できたデータがAPI経由になるとパフォーマンス低下 12

Slide 13

Slide 13 text

アプリケーションプラットフォーム（サーバレス、コンテナ） 13

Slide 14

Slide 14 text

Copyright © NCDC Co., Ltd. All rights reserved. クラウドネイティブなアプリケーション設計 l クラウドを利⽤することで、インフラの調達、管理をクラウドベンダーに任せることができるようになりました l さらにクラウドを前提としたアプリケーション設計を⾏うことで、「俊敏性（アジリティ）」、「拡張性（スケーラブル）」を得られます l このような構成をクラウドネイティブと呼びます 14

Slide 15

Slide 15 text

Copyright © NCDC Co., Ltd. All rights reserved. クラウドネイティブとは具体的には何を指すのか l コンテナ、サーバレスなどの技術、クラウドベンダーが提供しているマネージドサービスを積極的に利⽤してサービスの設計、開発を⾏います l 俊敏性 • ⾃分たちで作る量を減らし、クラウドベンダーが提供している機能をサービスとして利⽤する • インフラだけでなく、OS、ミドルウェアをプラットフォームとして提供し、その上に作る⾃分たちの付加価値提供に集中する l 拡張性 • 利⽤者の増加に応じて、オートスケールできる基盤、アプリケーションの設計にする 15

Slide 16

Slide 16 text

Copyright © NCDC Co., Ltd. All rights reserved. サーバレスや、コンテナが流行っている背景 l DevOps、Infrastructure as Codeの取り組みのなかで従来の開発チームとインフラチーム、運⽤チームの垣根が低くなってきている開発チームがアプリだけでなく、ミドルウェアやインフラ構築、リリースなどの運⽤の⼀部を担当するようになってきている l その際、従来の⼿順書ベースの環境構築、運⽤ではなく、コードで定義して、⾃動化することが求められる 16

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Copyright © NCDC Co., Ltd. All rights reserved. サーバレスとはサーバーが無い？ l 実際には物理的なサーバー上にアプリケーションを配置しますが、開発者がサーバーや、実⾏基盤のようなミドルウェアを意識する必要がありません l 暗黙的にはこのような処理が⾏われています l 処理の実⾏回数により課⾦が⾏われるアプリケーションサーバー ①処理要求ビルド済みアプリケーション ②サーバー上に読み込み ③処理の実⾏ ④アプリケーションの破棄サーバーなどのハード障害はあり得る。しかし、次の処理要求は別の正常なサーバーで処理される。サーバーの復旧や、フェイルオーバーなどの仕組みを⾃分たちで考える必要がない多少のオーバーヘッドがあります。サーバーへの読み込み、アプリケーションの破棄はクラウド側で最適化される（できるだけ再利⽤してくれる） 18

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Copyright © NCDC Co., Ltd. All rights reserved. コンテナとは l Dockerの仮想化技術がベースとなっている • Kubernetes、AWS ECSなどはDockerコンテナを運⽤するためのもの（オートスケール、フェイルオーバー、負荷分散など） • 徹底的に⾃動化ができるようになっている。図は下記より引用 https://www.docker.com/resources/what-container ハードウェアは意識しませんが、 OS、ミドルウェアなどの準備、管理は必要サーバレスと違い、常時起動しておくような処理もできる Dockerが動作する別のホストへコンテナを持っていくことができる可搬性本番環境→検証環境１号機→２号機 20

Slide 21

Slide 21 text

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 • 開発しなくて良い／運⽤コストが下がる • 制約は⼤きいやりたいことと提供されるものがあっている場合には、⾮常に効果を発揮する。要件とフィットしていれば、使ったほうが良い • ⾃由度が⾼い • 開発、運⽤の費⽤は相対的に⼤きい

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Copyright © NCDC Co., Ltd. All rights reserved. 事例）サーバレスとマネージドサービスをフル活用したアーキテクチャ 23 Webアプリコンテンツアプリ向けAPI Lambda 業務ロジック DynamoDB 添付ファイル Cognito ユーザー認証利⽤者社内システム社内システム社内向けAPI Lambda 業務ロジックマスタデータ連携バッチによる⽇次データ取り込み AWS ⾃社データセンター Cloud Front S3 ⾃社営業向け配信 SNS Push通知

Slide 24

Slide 24 text

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で配信

Slide 25

Slide 25 text

複雑なアプリケーションを開発できるJavaScriptフレームワークの登場 SPA（React、Vue.js） 25

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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サイトを作るためのもの

Slide 28

Slide 28 text

Copyright © NCDC Co., Ltd. All rights reserved. フロントエンドの実装言語 l モダンなJavaScriptフレームワークによるSPA開発が主流に • JavaScriptフレームワーク︓JavaScriptエコシステムの発展により、ユーザーによりリッチな体験を届けることができるようになり、その開発をサポートするフレームワークの使⽤が主流になっている。 • SPA（Single Page Application）︓ページ遷移を⾏わないWebアプリケーションの形態。従来の「サーバーでページを⽣成して返す」という考え⽅ではなく、「サーバーはデータやビジネスロジックを担当し、ブラウザがその処理を元にページを⽣成する」のが特徴。 l ブラウザで実⾏されるフロントエンドがより重要に • フロントでの処理の⽐率が上がり、また動きが多様になったためロジックが複雑化する傾向にある。 • フレームワークやプラグインをパッケージ管理ツールで組み合わせ、より⾼度な実装が求められるようになった。 28 28

Slide 29

Slide 29 text

Copyright © NCDC Co., Ltd. All rights reserved. モダンなJavaScriptフレームワークでできること l UIコンポーネントの共通化 • ボタン、フォーム、ダイアログ・・・ • UIカタログを作って複数のアプリケーションから再利⽤することも可能 l 状態の管理 • ログイン状態、ユーザーの⼊⼒したデータを⼀次保持 l 処理のルーティング • 画⾯からのユーザーのアクションを、どの処理に渡すかなど、これまでサーバー側でしかできなかったことが、フロントエンドだけでできるようになることで、よりリッチなUI、複雑なアプリケーションを実装できるようになっている 29

Slide 30

Slide 30 text

Copyright © NCDC Co., Ltd. All rights reserved. React vs. Vue l Reactとは︖ • 2013年に登場した、Facebookを中⼼に開発されたオープンソースのフロントエンドライブラリ • テンプレート、コンポーネント、仮想DOMによる効率化等の最新フロントエンド構築に必要な機能を有する • ほぼ全てをJavaScriptで実装し、JavaScriptの恩恵を最⼤限に受けられる • 学習コストがそれなりに⾼く、慣れるまで時間がかかる • 秩序が保たれており、書き⽅を統⼀しやすく、⼤規模アプリケーションの開発に向く 30

Slide 31

Slide 31 text

Copyright © NCDC Co., Ltd. All rights reserved. React vs. Vue l Vueとは︖ • 2014年に登場した、AngularJS開発に携わったEvan Youによって開発されたオープンソースのフロントエンドライブラリ • Reactと同じく最新フロントエンド構築に必要な機能を有する • 従来のHTML/CSS ベースのコードと組み合わせて使⽤することも多く、部分的にVueを導⼊するなど柔軟な採⽤が可能 • HTMLベースの直感的なテンプレートを提供しており、理解しやすくとっつきやすい • 柔軟な書き⽅を許す⼀⽅で、各開発者での差やライブラリの実装⽅法の差も⼤きく、⼤規模な開発には慎重なルール設定を要する 31

Slide 32

Slide 32 text

モダンアプリケーション化の始め⽅ 32

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Copyright © NCDC Co., Ltd. All rights reserved. モダンアプリケーションの導入エンジニアの育成（フロントエンド） l SPAはJavaScriptで複雑なアプリケーションを組めるようにしたものなので、Webサイトのエンジニアで、アプリケーションの開発は未経験というエンジニアにはハードル⾼め。 l 逆に何らかの⾔語でアプリケーションを開発していた⼈が JavaScriptとSPAのフレームワークを覚えるという⼿もある l UIの部分の、API呼び出しや処理ロジックを各エンジニアを最初は分けるというのもあり 34

Slide 35

Slide 35 text

Slide 36

Slide 36 text

まとめ

Slide 37

Slide 37 text

Copyright © NCDC Co., Ltd. All rights reserved. 今日お伝えしたいこと 37 １０年間でテクノロジーは⼤きく進歩クラウド、サーバーレス、コンテナ、複雑なアプリケーションを開発できるJavaScript フレームワーク・・・ビジネス、ユーザーからの求められるレベルがあがっているビジネスに貢献するIT すばらしいUX もっと早くリリースしたいモダンなアプリケーション開発ができるかどうかが⼤きな違いになってくる Enabler Needs