タダです。

今回からサーバーレスシングルページアプリケーションで勉強したことをまとめていきます。 www.oreilly.co.jp

章立ては以下のようになっています。

1章　シンプルにはじめる
2章　ハッシュイベントによるビューのルーティング
3章　シングルページアプリケーションに必要なもの
4章　Amazon CognitoによるIdentity as a Service
5章　DynamoDBにデータを格納する
6章　Lambdaを使って（マイクロ）サービスを作る
7章　サーバーレスのセキュリティ
8章　スケールアップする

この記事では1章の内容をまとめていきます。

1章のまとめ

今回はHTML/CSS/JavaScriptのWebアプリケーションを使って学習する
Webアプリケーションを低コストで始めるためにはサーバーレスが始めやすい
サーバーレスWebアプリケーションを学ぶためにLearnJSというJavaScriptプログラミングパズルアプリケーションを作ることにする
サーバーレスアプリケーションをローカルで実行するには、./sspa server で実行できる(sspaはラッパースクリプト)
- 実行すると以下のようなページが表示される
ランディングページを作るためにSkeltonのグリッドを使ってレイアウトを作る
- タイトルテキスト、画像、CTA(行動喚起)のボタンを配置する(以下のようなページが表示されます)
ランディングページをS3にデプロイするため、S3バケットを作る
- 予め、AWS CLIのセットアップを行う

./sspa create_bucket learnjs.xxxx.com
make_bucket: learnjs.xxxx.com
Website endpoint is: http://learnjs.xxxx.com.s3-website-ap-northeast-1.amazonaws.com

デプロイを実行すると次のようになります

./sspa deploy_bucket learnjs.xxxx.com
upload: public/tests/app_spec.js to s3://learnjs.xxxx.com/tests/app_spec.js
upload: public/favicon.ico to s3://learnjs.xxxx.com/favicon.ico
upload: public/app.js to s3://learnjs.xxxx.com/app.js
upload: public/tests/index.html to s3://learnjs.xxxx.com/tests/index.html
upload: public/index.html to s3://learnjs.xxxx.com/index.html
upload: public/tests/SpecHelper.js to s3://learnjs.xxxx.com/tests/SpecHelper.js
upload: public/tests/lib/jasmine-2.3.4/boot.js to s3://learnjs.xxxx.com/tests/lib/jasmine-2.3.4/boot.js
upload: public/tests/lib/jasmine-2.3.4/jasmine-html.js to s3://learnjs.xxxx.com/tests/lib/jasmine-2.3.4/jasmine-html.js
upload: public/tests/lib/jasmine-2.3.4/jasmine_favicon.png to s3://learnjs.xxxx.com/tests/lib/jasmine-2.3.4/jasmine_favicon.png
upload: public/images/HeroImage.jpg to s3://learnjs.xxxx.com/images/HeroImage.jpg
upload: public/tests/lib/jasmine-2.3.4/jasmine.js to s3://learnjs.xxxx.com/tests/lib/jasmine-2.3.4/jasmine.js
upload: public/tests/lib/jasmine-2.3.4/console.js to s3://learnjs.xxxx.com/tests/lib/jasmine-2.3.4/console.js
upload: public/tests/lib/jasmine-2.3.4/jasmine.css to s3://learnjs.xxxx.com/tests/lib/jasmine-2.3.4/jasmine.css
upload: public/tests/lib/jquery-2.1.4.js to s3://learnjs.xxxx.com/tests/lib/jquery-2.1.4.js
upload: public/vendor.js to s3://learnjs.xxxx.com/vendor.js

東京リージョンS3にWebページのデプロイができました。次は2章でアプリケーションにクライアントサイドルータを追加し、複数のアプリケーションビューをサポートについて勉強します。