ぼくのかんがえた さいきょうの

AngularJS+RESTfulアプリ 配信構成

2014年 9月27日 JAWS-UG沖縄 株式会社ディーワークス　西島

@k_nishijima

@k_nishijima http://about.me/k15a

あんた誰？

西島　幸一郎 / にしじま　こういちろう

株式会社ディー・ワークス JAWS−UG沖縄の副代表

AWS 認定ソリューションアーキテクト

AWSサムライ2014拝命

@k_nishijima http://about.me/k15a

Twitterのハッシュタグ #jawsug

JAWS-UGのハッシュタグ

「#jawsug」

を付けてつぶやきましょう！

資料は後で公開します。

@k_nishijima http://about.me/k15a

当LTで話すこと

AngularJSを使ったアプリケーションの システム構成/配信方法を考えてみる。

※使い方なんかはきっと 別のLTでフォローしてくださるはずw

@k_nishijima http://about.me/k15a

AngularJS自体の勉強には

AngularJSリファレンスがオススメ。

今日持ってきてますので読んでみてください。

@k_nishijima http://about.me/k15a

AngularJS実戦投入例

https://www.connectbass.com/

Web問い合わせフォームのSaaS

GoogleAppsによる顧客情報共有

カスタマーサポートデスク

モバイル、タブレット、PCどれでも使える

@k_nishijima http://about.me/k15a

AngularJSのアプリケーション構成

HTML

JavaScript

CSS

image

AppServerHTTP(S)

Browser

@k_nishijima http://about.me/k15a

AngularJSのアプリケーション構成

HTML

JavaScript

CSS

image

AppServerHTTP(S)

Browser

えっ、今どきみんなこうでしょ？？

@k_nishijima http://about.me/k15a

AngularJSのアプリケーション構成

HTML

JavaScript

CSS

image

AppServerHTTP(S)

Browser

まあ、そうなんだけどねorz

@k_nishijima http://about.me/k15a

AngularJSのアプリケーション構成

HTML

JavaScript

CSS

image

AppServerHTTP(S)

Browser

HTMLはテンプレートとして配信され、JavaScriptがレンダリングする

＝ サーバ側でビューは作らない

ってのがキモ。

@k_nishijima http://about.me/k15a

とにかくフロントがfatに

minifyもモチロンするんだけどね・・・

配信するファイルが大量

配信するファイルは全て静的

AngularJSのアプリケーション構成

@k_nishijima http://about.me/k15a

JavaScriptアプリの更新を加味しつつ高速配信

Gradleでidファイル名付きでビルド

CDN経由で配信

サーバはRESTっぽくてイミュータブルがいい

Dockerでデプロイするか・・・

では、どうやって配信するか

@k_nishijima http://about.me/k15a

フロントエンド

AngularJS + レスポンシブデザイン

バックエンド

Vert.x on Elastic Beanstalk

システム構成

@k_nishijima http://about.me/k15a

では おまちかねの システム構成図

@k_nishijima http://about.me/k15a

システム概要

@k_nishijima http://about.me/k15a

システム概要

キャッシュヘッダ調整

パススルー したり

しなかったり

Beanstalkによる ブルーグリーンデプロイ

共通サービスは VPCピアリングで 全システム共通

APサーバは Vert.xで爆速

ビルドはgradle デプロイは

Dockerfileとアプリを git aws.push

非同期JobWorkerも ebで管理

@k_nishijima http://about.me/k15a

細かく話しだすとこれだけで ご飯3杯行ける（違

!

が、今日はLTなので こんなところで。

@k_nishijima http://about.me/k15a

告知！#MA10 Mashup Hackathon 沖縄http://mashupawards.doorkeeper.jp/events/13546

10月12日(日)～13日(月) Mashup Awards10（MA10）の一次予選免除の権利をかけたハッカソンイベント。様々なAPIをマッシュアップするだけでも楽しい！

商品がとても豪華らしい！！

@k_nishijima http://about.me/k15a

告知！JAWS-UG沖縄 CMS祭り http://jaws-ug.jp/es/jaws-ug-okinawa-201410/

10月17日(金)～18日(土)WordPress/Movable Type/Drupalコミュニティ・ベンダーが沖縄に集合！前夜祭+勉強会+ビーチパーティ！！

ノベルティ争奪じゃんけん大会ありますので、是非！

@k_nishijima http://about.me/k15a

ありがとうございました！