モジュール 1静的ウェブサイトをホスティングする

このモジュールでは、Amazon S3 を使って、Example Corp. ウェブサイト向けにウェブサイトをホスティングすることができます。

静的ウェブサイトをホスティングする

ユーザーの管理

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

RESTful API のデプロイ

設定をテストする

プロジェクトリソースをクリーンアップする

実装手順

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

  • ステップ 1: リージョンを選択します

    このウェブポータルは、Amazon AppStream 2.0、Amazon S3、Amazon SES、AWS IAM、AWS Lambda、Amazon API Gateway を含む、すべてのサービスをサポートする任意の AWS リージョンにデプロイできます。サポートされているリージョンのうち、選択できるリージョンは以下のとおりです。

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

     

    リージョンの詳細情報は、AWS リージョンテーブルを参照してください。

    これらの手順を完了するには、AWS アカウントが必要です。アカウント作成の詳細については、「アマゾン ウェブ サービスアカウントの新規アカウントを作成してアクティベートする方法を教えてください。」を参照してください。

    1. https://console.thinkwithwp.com/console/home でAWS マネジメントコンソールにサインインします。
    2. E メールアドレスまたは AWS アカウント ID を入力し、[次へ] を選択します。
    3. AWS アカウントパスワードを入力し、[Sign In] を選択します。
    4. コンソールの右上にあるメニューで、使いたい [AWS リージョン] を選択します。

  • ステップ 2:新規の Amazon S3 バケットを作成します

    静的ウェブサイトは、Amazon S3 を使用してホストできます。ウェブサーバーを設定または管理する必要はありません。以下の手順を実行して、新規の Amazon S3 バケットを作成し、ウェブサイトの静的アセットをすべてホストします。静的アセットには .html、.css、JavaScript、画像ファイルが含まれます。

    1. Amazon S3 コンソールを https://console.thinkwithwp.com/s3/ で開きます。
    2. [バケットを作成する] を選択します。
    3. [バケット名] フィールドに、新規のバケット用の、グローバルに一意な DSN 準拠の名前を入力します。例: examplecorp-demo-firstname-lastname
    4. リージョンフィールドに、正しいリージョンが選択されていることを確認します。
    5. [作成] を選択します。

  • ステップ 3:Example Corp. ウェブサイトのアセットを、お使いの Amazon S3 バケットにアップロードします

    Amazon S3 コンソールを使って、以下の手順を実行して Example Corp. ウェブサイトアセットをアップロードします。

    1. Example Corp. ウェブサイトのアセットを our repository (リポジトリ) からローカルコンピュータにダウンロードします。
    2. ローカルコンピュータにダウンロードしたファイルを解凍します。
    3. Amazon S3 コンソールを https://console.thinkwithwp.com/s3/ で開きます。
    4. バケット名リストから、前の手順で作成したバケット名を選択します。
    5. コンソールウィンドウ以外のウィンドウで、ローカルコンピュータのウェブまたはウェブディレクトリに移動します。移動先ディレクトリの下にあるファイルとフォルダをすべて選択します。ウェブディレクトリそのものは選択していないことを確認します。
    6. Amazon S3 コンソールウィンドウの [Overview] タブで、[アップロード] を選択します。
    7. 選択したものを [アップロード] ダイアログボックスにドラッグアンドドロップします。
    8. [アップロード] を選択します。
    9. アップロードが完了したら、正しいファイルとフォルダが [Overview] タブのリストに表示されることを確認します。

  • ステップ 4:Amazon S3 バケット用に静的ウェブサイトをホスティングできるようにします。

    静的ウェブサイトでは、それぞれのウェブページに静的コンテンツがあります。また、ウェブページにはクライアント側のスクリプトもあります。対照的に、動的ウェブサイトは、PHP、JSP、ASP.NET などのサーバー側のスクリプトを含む、サーバー側の処理に依存しています。Amazon S3 ではサーバー側のスクリプトはサポートしていません。以下の手順を実行して、お使いのバケットに静的ウェブサイトをホスティングできます。

    1. Amazon S3 コンソールで選択した Amazon S3 バケットで、[プロパティ] タブを選択します。
    2. [静的ウェブサイトホスティング] を選択し、[このバケットを使用してウェブサイトをホストする] を選択します。
    3. [インデックスドキュメント] には index.html と入力します。ウェブサイトホスティング用のバケットを設定するときは、インデックスドキュメントを指定する必要があります。
    4. 静的ウェブサイトホスティングダイアログボックスの上部にあるエンドポイント URL をメモしておきます。静的ウェブサイトホスティング用にバケットを有効にすると、ウェブブラウザはバケット用の Amazon S3 ウェブサイトエンドポイントを介して、すべてのコンテンツにアクセスできるようになります。
    5. [保存] を選択します。

  • ステップ 5:Amazon S3 バケットのパブリック読み取りアクセスを有効にします

    バケットをウェブサイトとして設定するときは、公開で読み取り可能なオブジェクトを作成する必要があります。これを行うには、以下の手順を実行して、全員に s3:GetObject 権限を付与するバケットポリシーを作成します。

    1. Amazon S3 コンソールで選択した Amazon S3 バケットで、[アクセス許可] タブを選択します。
    2. [編集] を選択して、バケットのパブリックアクセス設定を変更します。
    3. タブのチェックボックスのチェックをすべて外し、[保存] を選択します。
    4. 確認を求められたら、「confirm」と入力します。このフィールドでは、大文字と小文字が区別されます。
    5. [確定] を選択し、変更を保存します。
    6. [アクセス許可] タブで、[バケットポリシー] を選択します。
    7. バケットポリシーの編集テキストボックスにある、下記のポリシーをコピーアンドペーストします。
    {
"Version": "2012-10-17",
"Statement": [
    {
    "Effect": "Allow",
    "Principal": "*",
    "Action": "s3:GetObject",
    "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
    }
]
}

    Where YOUR_BUCKET_NAME には、お使いの Amazon S3 バケットのバケット名を入力します。

    8.[保存] を選択します。

イントロダクションに戻る
次へ: ユーザーの管理