AWS でのプロジェクト:

サーバーレスのウェブアプリケーションを構築する

AWS Lambda、Amazon API Gateway、Amazon S3、Amazon DynamoDB、および Amazon Cognito を使用

はじめに

静的ウェブサイトをホストする

ユーザーの管理

サーバーレスバックエンドの構築

RESTful API のデプロイ

リソースを終了する

モジュール 1。静的ウェブホスティング

このモジュールでは、ウェブアプリケーションの静的リソースをホストするように Amazon Simple Storage Service (S3) を設定します。後続のモジュールでは、JavaScript を使用してこれらのページに動的機能を追加し、AWS Lambda と Amazon API Gateway で 構築されたリモート RESTful API を呼び出します。

アーキテクチャの概要

このモジュールのアーキテクチャは、非常に単純です。静的ウェブコンテンツ (例: HTML、CSS、JavaScript、イメージなどのファイル) はすべて、Amazon S3 に保存されます。その後、エンドユーザーは Amazon S3 によって公開されているパブリックウェブサイトの URL を使用してサイトにアクセスします。サイトにアクセスできるように、ウェブサービスを実行したり他のサービスを使用したりする必要はありません。

このモジュールでは、AWS が提供する Amazon S3 ウェブサイトのエンドポイント URL を使用します。形式は、http://{your-bucket-name}.s3-website.{region}.amazonaws.com のようになります。実際のアプリケーションでは、通常カスタムドメインを使用してサイトをホストします。独自ドメインの使用の詳細については、Amazon S3 ドキュメントの「カスタムドメインを使用して静的ウェブサイトをセットアップする」を参照してください。

モジュールの所要時間: 30 分

使用したサービス: Amazon S3

CloudFormation テンプレート: Amazon S3 をすでに使用している場合、または Lambda と API Gateway の使用までスキップする場合は、必要なリソースを自動的に構築するために、任意のリージョンでこれらの AWS CloudFormation テンプレートのいずれかを起動できます。

リージョン CloudFormation テンプレート
米国東部 (バージニア北部) スタックを起動 >
米国東部 (オハイオ) スタックを起動 >
米国西部 (オレゴン) スタックを起動 >
欧州 (フランクフルト) スタックを起動 >
欧州 (アイルランド) スタックを起動 >
欧州 (ロンドン) スタックを起動 >
アジアパシフィック (東京) スタックを起動 >
アジアパシフィック (ソウル) スタックを起動 >
アジアパシフィック (シドニー) スタックを起動 >
アジアパシフィック (ムンバイ) スタックを起動 >

CloudFormation の起動手順

  1. 任意のリージョンの上にある [Launch Stack (スタックの起動)] をクリックします。

  2. [テンプレートの選択] ページの [Next] をクリックします。

  3. [Website Bucket Name (ウェブサイトバケット名)] に、グローバルに一意の名前 (例: wildrydes-yourname) を指定し、[次へ] をクリックします。

  4. [Options (オプション)] ページで、すべてデフォルト値のままにし、[​次へ] をクリックします。

  5. [Review (確認)] ページで、CloudFormation によって IAM リソースが作成されることを確認するチェックボックスをオンにして、[作成] を選択します。

    このテンプレートでは、カスタムリソースを使用して、静的なウェブサイトアセットを中央 S3 バケットから自分の専用のバケットにコピーします。カスタムリソースを使用してアカウントの新しいバケットに書き込むには、そのアクセス許可で引き受けることができる IAM ロールを作成する必要があります。

  6. wildrydes-webapp-1 スタックが CREATE_COMPLETE ステータスになるまで待ちます。

  7. wildrydes-webapp-1 スタックが選択された状態で、[出力] タブをクリックし、WebsiteURL リンクをクリックします。

  8. Wild Rydes ホームページが正しくロードされていることを確認し、次のモジュールである [User Management (ユーザー管理)] に進みます。

実装手順

以下に示すステップバイステップ手順に従い、静的ウェブサイトをホストします。各ステップの番号をクリックして、セクションを展開してください。

  • ステップ 1: リージョンの選択

    リージョンの選択

    このウェブアプリケーションは、その内部で使用されるサービス (Amazon Cognito、AWS Lambda、Amazon API Gateway、Amazon S3、Amazon DynamoDB など) をすべてサポートする AWS リージョンでデプロイできます。

    各リージョンでサポートされているサービスを確認するには、リージョン表を参照してください。サポートされているリージョンのうち、選択できるリージョンは以下のとおりです。

    • 米国東部 (バージニア北部)
    • 米国東部 (オハイオ)
    • 米国西部 (オレゴン)
    • 欧州 (フランクフルト)
    • 欧州 (アイルランド)
    • 欧州 (ロンドン)
    • アジアパシフィック (東京)
    • アジアパシフィック (ソウル)
    • アジアパシフィック (シドニー)
    • アジアパシフィック (ムンバイ)

     

    AWS マネジメントコンソールの右上隅にあるドロップダウンの一覧からリージョンを選択してください。

    (クリックして拡大)

  • ステップ 2: S3 バケットを作成する

    S3 バケットを作成する

    静的ウェブサイトは、Amazon S3 を使用してホストできます。ウェブサーバーを設定または管理する必要はありません。このステップでは、ウェブアプリケーションのすべての静的アセット (HTML、CSS、JavaScript、イメージファイルなど) をホストするために使用する新しい S3 バケットを作成します。 

    このステップでは、コンソールまたは AWS CLI を使用して、Amazon S3 バケットを作成します。バケット名はグローバルに一意である必要がある点に注意してください。たとえば、wildrydes-firstname-lastname などの名前を使用することをお勧めします。 バケット名がすでに存在するというエラーが表示された場合は、使用されていない名前が見つかるまで数字や文字を追加してみてください。

    1. AWS マネジメントコンソールで、[サービス] を選択後、[ストレージ] の [S3] を選択します。
    2. [+Create Bucket (+ バケットの作成)] を選択します。
    3. バケットに、グローバルに一意の名前 (例: wildrydes-firstname-lastname) を指定します。 バケット名がすでに存在するというエラーが表示された場合は、使用されていない名前が見つかるまで数字や文字を追加してみてください。
    4. ドロップダウンから、このワークショップに使用するために選択したリージョンを選択します。
    5. 設定のコピー元となるバケットを選択せず​​に、ダイアログの左下にある [作成] を選択します。

  • ステップ 3: コンテンツのアップロード

    コンテンツのアップロード

    このステップでは、このモジュールのウェブサイトアセットを S3 バケットにアップロードします。このステップを完了するには、AWS マネジメントコンソール (Google Chrome ブラウザが必要)、AWS CLI、または提供されている CloudFormation テンプレートを使用します。すでに AWS CLI がインストールされており、ローカルマシンに設定されている場合はその方法を使用することをお勧めします。それ以外の場合、最新バージョンの Google Chrome がインストールされている場合はコンソールを使用します。 

    コンソールのステップバイステップ手順

    AWS マネジメントコンソールを使用してローカルディレクトリにファイルとサブディレクトリをすべてアップロードするには、最新バージョンの Chrome ウェブブラウザを使用する必要があります。Chrome を使用できない場合は、AWS CLI または提供されている CloudFormation テンプレートを使用するための手順に従ってください。

    1. このリポジトリのアーカイブは、このリンクを使用してダウンロードします。

    2. ローカルマシンにダウンロードしたアーカイブを解凍します。

    3. Chrome で AWS マネジメントコンソールを開きます。[サービス] を選択後、[ストレージ] の [S3] を選択します。

    4. 前のステップで作成したバケットを選択し、[Overview] タブが表示されていることを確認します。

    5. Windows File Explorer または macOS Finder を開き、最初のステップでダウンロードした zip ファイルの展開されたコンテンツを参照します。

    6. ローカルマシンで、WebApplication/1_StaticWebHosting/website ディレクトリを参照します。

    7. その website ディレクトリにあるファイルとサブディレクトリをすべて選択します。website ディレクトリそのものは選択しないでください。

    8. 選択したファイルをローカルファイルシステムから、S3 コンソールの [Overview] タブのコンテンツにドラッグアンドドロップします。

    9. 表示されているダイアログボックスの左下にある [Upload] を選択します。

    10. アップロードが完了したら、S3 コンソールに表示されている website ディレクトリの中身が表示されます。1 つの website ディレクトリしか表示されない場合は、バケットからそのディレクトリを削除して、指示に従い、ディレクトリの中身のみ選択されていることを再度確認してから、S3 コンソールにドラッグアンドドロップします。

    CLI のステップバイステップ手順

    すでに CLI がインストールおよび設定されている場合は、これを使用して、必要なウェブアセットを s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website からバケットにコピーできます。

    1. YOUR_BUCKET_NAME が、前のセクションで使用した名前に、YOUR_BUCKET_REGION が、バケットを作成したリージョンコード (例: us-east-2) に置き換えられていることを確認し、次のコマンドを実行します。

      aws s3 sync s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website s3://YOUR_BUCKET_NAME --region YOUR_BUCKET_REGION

    2. コマンドが成功すると、バケットにコピーされたオブジェクトのリストが表示されます。

     

    CloudFormation ステップバイステップ手順

    前のいずれかのメソッドが使用できない場合は、提供された CloudFormation テンプレートを起動して、必要なアセットを S3 バケットにコピーします。CloudFormation テンプレートを起動するには、リージョンを選択し、「このモジュールの CloudFormation テンプレートセクション」の「スタックの起動」リンクをクリックします。

  • ステップ 4: パブリック読み込みを許可するバケットポリシーを追加する

    パブリック読み込みを許可するバケットポリシーを追加する

    バケットポリシーを使用して、S3 バケットの中身にアクセスできるユーザーを定義することができます。バケットポリシーは、バケット内のオブジェクトに対してさまざまなアクションを実行できるプリンシパルを指定する JSON ドキュメントです。

    このステップでは、匿名ユーザーによるサイトの閲覧を許可するバケットポリシーを新しい Amazon S3 バケットに追加します。デフォルトでは、お客様の AWS アカウントへのアクセス権を持つ認証されたユーザーのみ、お客様のバケットにアクセスすることができます。

    匿名ユーザーに読み取り専用アクセスを付与するポリシーについては、この例を参照してください。この例のポリシーでは、インターネット上の誰もが、お客様のアカウントを表示することができます。バケットポリシーを更新する最も簡単な方法は、コンソールを使用することです。バケットを選択した後、[アクセス許可] タブ、[バケットポリシー] の順に選択します。

    1. S3 コンソールで、セクション 1 で作成したバケットの名前を選択します。
    2. [Permissions] タブ、[Bucket Policy] の順に選択します。
      1. S3 コンソールで、セクション 1 で作成したバケットの名前を選択します。
      2. [Permissions] タブを選択し、パブリックアクセス設定が選択します。
      3. [Edit] をクリックして以下の項目からチェックを外します。
        • "Block new public bucket policies"
        • "Block public and cross-account access if bucket has public policies"
      4. [Save] をクリックします。
      5. 確認を促すモーダルウィンドウが開いたら、"confirm" と入力して [Confirm] をクリックします。 
      6. まだ [Permissions] タブを開いている場合、[Bucket Policy] を選択します。  
    3. [[YOUR_BUCKET_NAME]] を、セクション 1 で作成したバケットの名前に置き換えて、次のポリシードキュメントをバケットポリシーエディタに入力します。
    {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow", 
            "Principal": "*", 
            "Action": "s3:GetObject", 
            "Resource": "arn:aws:s3:::[YOUR_BUCKET_NAME]/*" 
        } 
    ] 
}
    1. [保存] を選択して、新しいポリシーを適用します。

  • ステップ 5: ウェブサイトのホスティングを有効にする

    ウェブサイトのホスティングを有効にする

    デフォルトでは、S3 バケットのオブジェクトは、http://.amazonaws.com// 形式の URL からアクセスできます。ルート URL (例: /index.html) のアセットを提供するには、バケットのウェブサイトホスティングを有効にする必要があります。これにより、オブジェクトは、バケットの AWS リージョン固有のウェブサイトエンドポイント (.s3-website-.amazonaws.com) で使用できます。

    また、ウェブサイトにカスタムドメインを使用することもできます。たとえば、http://www.wildrydes.com は S3 でホストされています。カスタムドメインのセットアップは、このワークショップの対象外ですが、詳細な手順は AWS ドキュメントで確認できます。

    このステップでは、コンソールを使用して静的ウェブサイトホスティングを有効にします。この操作は、バケットを選択後、[プロパティ] タブで行うことができます。index.html をインデックスドキュメントとして設定し、エラードキュメントはブランクのままにします。詳細については、「静的ウェブサイトのバケットを設定する」のドキュメントを参照してください。

    1. S3 コンソールのバケット詳細ページから、[プロパティ] タブを選択します。
    2. [静的ウェブサイトホスティング] カードを選択します。
    3. [このバケットを使用してウェブサイトをホストする] を選択し、インデックスドキュメントに「index.html」と入力します。他のフィールドは空白のままにしておきます。
    4. ダイアログの上部にあるエンドポイント URL を書き留めてから、[保存] を選択します。ワークショップの後半では、この URL を使用して、ウェブアプリケーションを表示します。これ以降、この URL はウェブサイトのベース URL と呼ばれます。
    5. [保存] をクリックして変更を保存します。

  • ステップ 6: 実装を検証する

    実装を検証する

    これらの実装ステップの完了後は、S3 バケットのウェブサイトエンドポイント URL にアクセスすることで、静的ウェブサイトにアクセスできるようになります。

    任意のブラウザで、ウェブサイトのベース URL (前のセクションで書き留めた URL) にアクセスします。Wild Rydes のホームページが表示されます。ベース URL を検索する必要がある場合は、S3 コンソールを開いてバケットを選択し、[ プロパティ] タブの [静的ウェブホスティング] をクリックします。

    ページが正しくレンダリングされている場合 (サンプルのスクリーンショットは以下を参照) は、次のモジュール (ユーザー管理) に進みます。

次へ: ユーザーの管理