基本的なウェブアプリケーションを構築する
チュートリアル
はじめに: 基本的なウェブアプリケーションを構築する
ステップバイステップの指示に従って、最初のウェブアプリケーションを構築します
概要
このチュートリアルでは、簡単なウェブアプリケーションを作成します。まず、「Hello World」をレンダリングする静的ウェブアプリケーションを構築します。 次に、ウェブアプリケーションに機能を追加して、表示するテキストが指定したカスタム入力に基づくようにする方法を学びます。
実行する内容
このチュートリアルでは、上記のサンプルウェブアプリケーションを作成する手順について説明します。次のことを行います。
- ウェブアプリケーションを作成する
- ウェブアプリケーションをサーバーレスバックエンドに接続する
- API とデータベースを使用してウェブアプリケーションに対話性を追加する
前提条件
このチュートリアルを開始する前に、以下のものが必要です。
- AWS アカウント: まだお持ちでない場合は、「Setting Up Your Environment」入門ガイドに従って簡単な概要を確認してください。
AWS の使用経験
初心者
最短所要時間
35 分
完了までにかかるコスト
無料利用枠の対象
必要なもの
- 管理者レベルのアクセス権を持つ AWS アカウント*
- 推奨ブラウザ: Chrome または Firefox の最新バージョン
*過去 24 時間以内に作成されたアカウントは、このチュートリアルに必要なサービスへのアクセス権限がまだ付与されていない可能性があります。
最終更新日
2023 年 4 月 4 日
アプリケーションのアーキテクチャ
以下の図は、このチュートリアルで使用するサービスとそれらの接続方法を視覚的に表したものです。このアプリケーションは、AWS Amplify、Amazon API Gateway、AWS Lambda、Amazon DynamoDB、および AWS Identity and Access Management (IAM) を使用します。
チュートリアルを進めながら、各サービスについて詳細に説明し、それらに精通するために利用できるリソースも紹介していきます。
モジュール
このチュートリアルは 6 つの短いモジュールに分かれています。次のモジュールに進む前に、各モジュールを順番に完了する必要があります。
- ウェブアプリケーションを作成する (5分): AWS Amplify コンソールを使用して、ウェブアプリケーションの静的リソースをデプロイします。
- サーバーレス関数を構築する (5 分): AWS Lambda を使用してサーバーレス関数を構築します。
- サーバーレス関数をウェブアプリケーションにリンクする (5 分): API Gateway を使用してサーバーレス関数をデプロイします。
- データテーブルを作成する (10 分): Amazon DynamoDB テーブルにデータを保持します。
- ウェブアプリケーションに対話性を追加する (5 分): ウェブアプリケーションを変更して API を呼び出します。
- リソースをクリーンアップする (5 分): このチュートリアルで使用したリソースをクリーンアップします。
このウェブアプリケーションは、お使いのブラウザから直接アクセスできる AWS マネジメントコンソールを使用して構築します。