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

Serverless_Web_App_LP_assets-02

このモジュールのアーキテクチャは、非常に簡単です。HTML、CSS、JavaScript、画像、およびその他のファイルを含む、すべての静的ウェブコンテンツ は Amazon S3 に保存されます。エンドユーザーは、Amazon S3 によって公開されているパブリックウェブサイトの URL を使用して、あなたのサイトにアクセスします。あなたのサイトを使用可能にするために、ウェブサーバーを実行したり、その他のサービスを使用したりする必要はありません。

このモジュールの目的のために、当社が提供する 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 テンプレートの 1 つを起動して、必要なリソースを自動的に構築できます。

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

CloudFormation 起動手順

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

  2. [Select Template (テンプレートを選択) ] ページで [Next (次へ)] をクリックします。

  3. Website Bucket Name (ウェブサイトバケット名) として、 wildrydes-yourname のようなグローバルで一意の名前を用意し、[Next (次へ)] をクリックします。

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

  5. [Review (レビュー) ] ページで、CloudFormation が IAM リソースを作成することに同意するチェックボックスをオンにし、[Create (作成)] を選択し ます。

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

  6. wildrydes-webapp-1 スタックが CREATE_COMPLETE のステータスに到達するのを待ちます。

  7. wildrydes-webapp-1 スタックを選択し、[Outputs (アウトプット)] タブをクリックし、 [WebsiteURL (ウェブサイトのURL) ] のリンクをクリックします。

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


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

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


    このウェブアプリケーションは、このアプリケーションで使用されるすべてのサービスをサポートする任意の AWS リージョンで展開されることができ、 それにはAmazon Cognito、AWS Lambda、Amazon API Gateway、Amazon S3、および Amazon DynamoDB が含まれます。

    どのリージョンにサポートされているサービスがあるかを調べるには、リージョンテーブルを参照してください。選択可能なサポート対象リージョンには次が含まれます。

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

     

    AWS マネジメントコンソールの右上隅にあるドロップダウンからリージョンを選択します。

    region

    (クリックして拡大)

    region
  • ステップ 2: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. 設定をコピーするためにバケットを選択することなく、ダイアログボックスの左下の[Create (作成)] を選択します。
  • ステップ 3.コンテンツのアップロード

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

    コンソールの詳細な手順

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

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

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

    3. Chrome で AWS マネジメントコンソールを開きます。[Services (サービス)] を選択し、次に [Storage (ストレージ) ] の下の [S3] をクリックします。

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

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

    6. ローカルマシン上の WebApplication/1_ StaticWebHosting/ ウェブサイトディレクトリを参照します。

    7. ウェブサイトディレクトリの下のすべてのファイルとサブディレクトリを選択します。ウェブサイトディレクトリ自体が選択されていないことを確認します。

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

    9. 表示されたダイアログボックスの左下の [Upload (アップロード)] を選択します。

    10. アップロードが完了するまで待機し、S3 コンソールにリストされているウェブサイトディレクトリのコンテンツが表示されていることを確認します。1 つの ウェブサイト ディレクトリしか表示されない場合、それをバケットから削除し、もう一度これらの手順に従って、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 テンプレート セクション にある [Launch stack (スタックの起動)] リンクをクリックして、CloudFormation テンプレートを起動します。

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

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

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

    匿名ユーザーに読み取り専用アクセスを許可するポリシー のを参照してください。このポリシーの例では、インターネットのすべてのユーザーがお客様のコンテンツを閲覧できます。バケットポリシーを更新するための最も簡単な方法は、コンソールを使用することです。バケットを選択し、[permission (許可) ] タブをクリックし、次に [Bucket Policy (バケットポリシー)] を選択します。


    1. S3 コンソールで、セクション 1 で作成したバケットの名前を選択します。
    2. [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. [Save (保存)] を選択して新しいポリシーを適用します。
  • ステップ 5.ウェブサイトのホスティングを有効にする

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

    ウェブサイトのためのカスタムドメインを使用することもできます。例えば、 http://www.wildrydes.com は S3 でホストされます。カスタムドメインの設定は、このワークショップでは取り上げていません。しかし、詳細な手順については、当社の ドキュメントで確認できます。

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


    1. S3 コンソールのバケットの詳細ページから、[Properties (プロパティ)] タブを選択します。
    2. 静的ウェブサイトホスティング] カードを選択します。
    3. ウェブサイトをホストするためにこのバケットを使う] を選択し、インデックスドキュメントに index.html を入力します。他のフィールドは空白のままにしておきます。
    4. [Save (保存)] を選択する前に、ダイアログの上の [Endpoint (エンドポイント)] のURLを書き留めます。この URL を使用して、ワークショップの残りの部分全体でウェブアプリケーションを表示します。ここから、この URL は、ウェブサイトのベース URL と呼びます。
    5. [Save (保存)] をクリックして変更を保存します。
  • ステップ 6.実装の検証

    これらの実装手順を完了すると、S3 バケットのためのウェブサイト エンドポイント URLを閲覧することによって、あなたの静的ウェブサイトにアクセスすることができるようになります。

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

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

    wildrydes-homepage