目次

はじめに
第1章AWSの準備
1.1AWSアカウントを作成する
1.2IAMユーザーを作成する
第2章アプリをデプロイする
2.1Node.jsのバージョンを確認
2.2名前付きプロファイルの設定
2.3サンプルプログラムをCloneする
2.4デプロイコマンドを実行
2.5ログインユーザーを登録
第3章サンプルアプリの動作確認と解説
3.1サンプルアプリについて
3.2ログイン画面
3.3ノート一覧画面
3.4ノート新規作成画面
3.5詳細情報画面
3.6更新画面
3.7削除処理
3.8ログアウト処理
第4章使用している技術スタック
4.1Serverless Stack
4.2TypeScript
4.3Next.js/React
4.4Material UI
4.5AWS Lambda
4.6Amazon API Gateway
4.7Amazon DynamoDB
4.8Amazon Cognito
第5章サンプルアプリのディレクトリー構成
5.1ルートディレクトリー
5.2frontendディレクトリー
5.3srcディレクトリー
5.4stacksディレクトリー
第6章サンプルアプリを改修する
6.1Live Lambda Devモードについて
6.2Live Lambda Devモードで起動する
6.3追加する機能について
6.4ソースコードの改修
6.5動作確認
6.6デプロイ
第7章デプロイしたサンプルアプリを削除する
7.1Serverless Stackの削除コマンドを実行する
7.2Lambda@Edgeを削除する
7.3DynamoDBを削除する
あとがき / おわりに

はじめに

 本書を手に取っていただき、ありがとうございます。本書では、WebAPIをサーバーレスで実装し、フロントエンドをSPA(Single Page Application)で実装して、Webアプリを作る方法を解説しています。この本を読めば、サーバーレスとSPAで構成されたWebアプリの開発をスタートすることができます。

本書の目的

 本書の目的は、サーバーレスとSPAで構成するWebアプリの開発をスタートすることです。サンプルとして、一行ノートアプリを用意しているので、これを動かしながら開発の流れを学びます。

 ReactやTypeScriptを使用していますが、これらの入門的な内容は本書では扱っていません。入門的な内容は、他の書籍やサイトをご参照ください。

本書の対象読者

 本書では次のような人を対象としています。

 ・サーバーレス開発について興味がある人

 ・SPA(Single Page Application)開発について興味がある人

 ・AWSについて興味がある人

 ・ひとまずサーバーレス開発やSPA開発の流れを掴みたい人

前提とする知識

 本書を読むにあたり、次のような知識や経験が必要となります。

 ・Linuxの基礎知識

 ・Macでの開発経験

 ・Gitの基礎知識

 ・AWSの基礎知識

 ・TypeScriptを使用した開発経験

 ・何かしらのWebアプリケーションフレームワークでのバックエンド開発経験

 ・jQuery、React、Vueなどを使ったフロントエンド開発経験

 ・データベースの使用経験

技術スタック

 サンプルアプリで利用している技術スタックは、以下のとおりです。

 ・Serverless Stack (サーバーレスフレームワーク)

 ・TypeScript (プログラミング言語)

 ・Next.js/React (フロントエンドフレームワーク)

 ・Material UI (Reactのマテリアルデザインライブラリー)

 ・AWS Lambda (サーバーサイドプログラム実行)

 ・Amazon API Gateway (WebAPIのエンドポイント)

 ・Amazon Cognito (ログイン認証)

 ・AWS Amplify (ログインフォーム)

 ・Amazon DynamoDB (NoSQLデータベース)

 以下のような構成でAWSにデプロイします。

図1: 構成図

問い合わせ先

 本書に関する質問やお問い合わせは、次のページまでお願いします。正誤表とサンプルコードもここにあります。

 ・URL: https://github.com/memememomo/serverless-spa-sample-v2/issues

試し読みはここまでです。
この続きは、製品版でお楽しみください。