AWSのS3でWebテスト環境を作る手順

前回、Webテスト環境を作るのにS3であれば簡単だし、料金もリーズナブルですよー。とお伝えしました。今回は実際に構築する手順を記載します。

主な流れ

主な流れは以下の通り

  • 1.S3を起動する
  • 2.バケットを作成する
  • 3.バケットを設定する

具体的な手順

1.S3を起動する

AWSのサービスメニューを押すとAWSの全サービスが表示されるので、そのサービス群で「S3」を押す

S3を起動

2.バケットを作成する

バケットはS3のストレージの保存する領域を指しており、任意の名称で大丈夫です。もし、後々に本番のWeb環境としてhttps化まで想定するのであれば、その場合はドメイン(サブドメイン含む)名称にする必要があります。

今回はテスト環境なので適当に付けています。

バケット作成ボタンを押す
任意のバケット名を入力
タグを設定しておく
Webで使用するので一部のセキュリティ設定を外す
バケットを作成ボタンを押して完成

3.バケットを設定する

バケットの設定をする内容として、1つ目はS3で作成したバケットはデフォルトの状態では、ただのファイルストレージであり、HTMLの実行機能を持っていないので、HTMLの実行機能を付与する設定。
2つ目はS3を自分のブラウザから見れるようにセキュリティをパブリックにする設定となる。

作成したバケットをチェックしてプロパティを押す
Static website hostingを押す
HTMLファイル名を指定して作成ボタンを押す

上記画面に表示されているエンドポイントは、作成したバケットをブラウザ上で指定するURLとなります。

アクセス権限の編集をする
パケットポリシーにJSONコードで記述する

ポリシーの定義はJSONで記述する必要があるのですが、上記の記述内容で黄色のマーカー箇所以外は全く同じ内容で大丈夫です。
以下にコピペできるように文字列として記載しておきます。

{
“Version”:”2012-10-17″,
“Statement”:[{
“Sid”:”PublicReadObject”,
“Effect”:”Allow”,
“Principal”:””, “Action”:[“s3:GetObject”], “Resource”:[“arn:aws:s3:::バケット名/”]
}
]
}

設定完了

使ってみる

それではWeb動作のテストをしてみます。
S3の概要画面でファイルをアップロード出来るので、その機能を使ってHTMLファイル(index.html)と画像ファイルをアップロードしてみます。

アップロードを押す
ファイルを追加を押す
ファイルを選択してアップロードを押す

完成

実際にブラウザ上でURLを入力すると無事にHTMLファイルで設定した画像が表示されました。

HTMLで指定した画像が表示

以上、S3を使ったWebテスト環境の構築となります。

About Author


じょうくん

2004年にシステム開発会社を設立。 引き続き、小さなシステム会社の社長として奮闘中。 Apple好き。鉄拳好き。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です