AWS でのプロジェクト

モダンウェブアプリケーションを構築する

ウェブアプリケーションのデプロイ、データベースへの接続、ユーザー動作の分析

モジュール 1: 静的ウェブサイトの構築

このモジュールでは、Amazon S3 で静的ウェブサイトをホスティングし、クラウドベースの IDE である AWS Cloud9 の設定を行います。 

概要

このモジュールでは、Amazon S3 (Simple Storage Service) で Mythical Mysfit ウェブサイトの静的コンテンツ (html、js、css、メディアコンテンツなど) をホスティングします。S3 は、保存されたオブジェクトを HTTP 経由で直接提供できる、耐久性と可用性に優れた、低コストのオブジェクトストレージサービスです。そのため、S3 はインターネットサイト閲覧用のウェブブラウザに静的ウェブコンテンツを直接提供するために非常に便利です。

S3 に Mysfit を保存する前に、AWS Cloud9 を設定します。Cloud9 は、ブラウザのみでコードを記述、実行、デバッグできるクラウドベースの統合開発環境 (IDE) です。 

アーキテクチャ図

静的ウェブサイトの作成

実装手順

  • A: AWS コンソールにサインインする

    まず、このワークショップで使用する AWS アカウントで AWS コンソールにサインインします。

    B: リージョンを選択する

    このウェブアプリケーションは、アプリケーションで使用するサービスがすべてサポートされていれば、どの AWS リージョンにもデプロイできます。各リージョンでサポートされているサービスを確認するには、リージョン表を参照してください。サポートされているリージョンは以下のとおりです。

    • us-east-1 (バージニア北部)
    • us-east-2 (オハイオ)
    • us-west-2 (オレゴン)
    • eu-west-1 (アイルランド)

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

  • A: 新しい AWS Cloud9 環境を作成する

    AWS コンソールのホームページで、サービスの検索バーに Cloud9 と入力して、それを選択します。

    Lex Bot の作成

    (クリックして拡大)

    Cloud9 のホームページで [Create Environment (環境を作成する)] をクリックします。

    Lex Bot の作成

    (クリックして拡大)

    Lex Bot の作成

    環境の名前を MythicalMysfitsIDE と設定し、任意で説明を入力します。[Next Step (次のステップ)] をクリックします。

    Lex Bot の作成

    (クリックして拡大)

    Lex Bot の作成

    環境設定はデフォルトのまま残し、[Next Step (次のステップ)] をクリックします。

    Lex Bot の作成

    (クリックして拡大)

    Lex Bot の作成

    [Create Environment (環境を作成する)] をクリックします。

    Lex Bot の作成

    (クリックして拡大)

    Lex Bot の作成

    IDE の作成が完了すると、次のようなウェルカム画面が表示されます。

    Lex Bot の作成

    (クリックして拡大)

    Lex Bot の作成
    B: Mythical Mysfits ワークショップリポジトリのクローンを作成する

    下部パネルではターミナルにコマンドラインが表示され、使用できる状態になっています。ターミナルで以下の git コマンドを実行し、必要なコードのクローンを作成すれば、このチュートリアルは終了です。

    git clone -b python https://github.com/aws-samples/aws-modern-application-workshop.git

    リポジトリのクローンが作成されると、プロジェクトエクスプローラにクローンされたファイルが表示されます。

    ファイルのクローン

    (クリックして拡大)

    ファイルのクローン

    ターミナルで、新たにクローンとして作成されたリポジトリディレクトリに cd コマンドで移動します

    cd aws-modern-application-workshop
  • A: S3 バケットを作成し、ウェブサイトホスティング用に設定する

    このステップでは、AWS CLI を使用して、Amazon S3 で静的ウェブサイトをホスティングするために必要なインフラストラクチャコンポーネントを作成します。

    はじめに、S3 バケットを作成し、以下のバケット名 (mythical-mysfits-bucket-name) を自分のバケット名に置き換えます 注意: バケット名の要件を確認してください。選択した名前をコピーし後で使用するために保存しておきます。保存した名前はワークショップの他の部分でも使用します。

    aws s3 mb s3://REPLACE_ME_BUCKET_NAME

    これでバケットが作成されました。いくつかのオプションを設定して、このバケットを静的ウェブサイトホスティングに使用できるようにする必要があります。この設定により、バケット用に登録されているパブリック DNS 名を使用して、そのバケット内のオブジェクトをリクエストできるようになります。また、指定したウェブサイトのホームページ (ほとんどの場合、index.html) を、DNS 名のベースパスに対するサイトリクエストの参照先にすることができます。

    aws s3 website s3://REPLACE_ME_BUCKET_NAME --index-document index.html
    B: S3 バケットポリシーを更新する

    デフォルトでは、Amazon S3 に作成したすべてのバケットは完全にプライベートです。パブリックウェブサイトとして使用するには、S3 バケットポリシーを作成し、この新しいバケット内に保存されているオブジェクトに対して、すべてのユーザーによるパブリックアクセスの許可を明示する必要があります。バケットポリシーには、JSON ドキュメントを使用し、異なるプリンシパル (ここではパブリック、つまりすべてのユーザー) による実行を許可する (または許可しない) S3 アクション (S3 の API コール) を定義します。

    必要なバケットポリシーを定義した JSON ドキュメントは、~/environment/aws-modern-application-workshop/module-1/aws-cli/website-bucket-policy.json にあります。このファイルでは、REPLACE_ME_BUCKET_NAME で示した文字列を、選択したバケット名に置き換える必要があります。

    注意: このワークショップで開くその他のファイルでも同じように置き換える必要があります (CTRL-F (Windows の場合) または ⌘-F (Mac の場合) を使用して簡単に見つけることができるように、すべての項目に REPLACE_ME_ というプレフィックスを付けています)。 

    Cloud9 でファイルを開くには、左側パネルのファイルエクスプローラーを使用し、website-bucket-policy.json をダブルクリックします。

    Cloud9 でファイルを開く

    (クリックして拡大)

    Cloud9 でファイルを開く

    これにより、ファイルエディタパネルに bucket-policy.json が表示されます。表示されている文字列を、選択したバケット名 (前述のコマンドで使用したもの) に置き換えます。

    バケット名を置き換える

    (クリックして拡大)

    バケット名を置き換える

    以下の CLI コマンドを実行して、ウェブサイトにパブリックバケットポリシーを追加します。

    aws s3api put-bucket-policy --bucket REPLACE_ME_BUCKET_NAME --policy file://~/environment/aws-modern-application-workshop/module-1/aws-cli/website-bucket-policy.json
    C: ウェブサイトコンテンツを S3 にパブリッシュする

    新しいウェブサイトバケットが適切に設定されました。これから Mythical Mysfits ホームページの初回のイテレーションをバケットに追加します。ファイルをコピーする linux コマンド (cp) を使用するときと同じように、以下の S3 CLI コマンドを使用して、IDE からローカルで提供された index.html ページを新しい S3 バケットにコピーします (バケット名は適切に置き換えます)。

     aws s3 cp ~/environment/aws-modern-application-workshop/module-1/web/index.html s3://REPLACE_ME_BUCKET_NAME/index.html 

    任意のウェブブラウザを開き、アドレスバーに以下の URI を入力します。以下の URI には、リージョン名の前に "." が含まれているものと、"-" が含まれているものがあります。どちらの URI を使用するかは、使用するリージョンによって異なります。

    REPLACE_ME_YOUR_REGION と置き換える文字列は、S3 バケットを作成したリージョンと一致させる必要があります (例: us-east-1)。

    us-east-1 (バージニア北部)、us-west-2 (オレゴン)、eu-west-1 (アイルランド) については、以下の URI を使用します。

    http://REPLACE_ME_BUCKET_NAME.s3-website-REPLACE_ME_YOUR_REGION.amazonaws.com

    us-east-2 (オハイオ) については、以下の URI を使用します。

    http://REPLACE_ME_BUCKET_NAME.s3-website.REPLACE_ME_YOUR_REGION.amazonaws.com
    mysfits-welcome

    お疲れ様でした。これで、基本的な静的ウェブサイト Mythical Mysfits の作成を完了しました。

    モジュール 1 はこれで終了です。

次回は、ウェブサーバーにアプリケーションをホスティングします。