今夜は社内AWSもくもく会２ - やっとS3まできたぞ😊

今日すること

こんにちはふるてつです。

前回はElastic Beanstalkについてでしたが、 今回はS3について書きます。

いままでのおさらいになりますが、わたしは客先の仕事が終わった後定期的に、自社に戻ってAWS環境を勉強しています。
基本的には下記の本のとおりにさわっているだけです。

いま半分を少し過ぎたところで、やっとS3まで来ました。

S3について余談ですが、わたしこれまでに仕事で使ったことはありますね。
例えば、JavaでデータをS3にアップロードしたり、S3から読み込んだり、消したり消さなかったり。
しかし実は空の状態から作ったことがなかったので、ちょうどいい勉強になるかなと思っています。

S3バケットの作成

ではまずS3バケットを作っていきます。
サービスの「S3」から「バケット」で下の画面が表示されます。
「バケットを作成する」をクリックします。

上記の画面が出てきます。

必要な項目を入力します。
「バケット名」は任意の名前で構いません、しかしS3全体の中で一意なので、 他と被らないような名前にします。
「リージョン」はアジアパシフィック（東京）にして「次へ」をクリック。

上記の画面はそのまま「次へ」をクリックします。

上記はアクセス許可の設定、こちらもデフォルトのまま「次へ」
（アクセス許可をここで設定して構いません、しなかったのは本がデフォルトだったからです）

最後に「バケットを作成」をクリック。
バケットが出来ました。

ブロックパブリックアクセスの設定

それでは次に「アクセス権限」タブ ⇒ 「ブロックパブリックアクセス」で、アクセス権限の設定をおこないます。
現在はすべてのアクセスがブロックされていますので、右横の「編集」をクリックして設定を変更します。

上記画面中の下2つ、「パケットポリシー」に関するブロックをoffにして保存します。

バケットポリシーの設定

次に下記画面にて「パケットポリシー」をクリックします。
画面中央のパケットポリシーエディターにてパケットポリシーを設定します。
設定はjsonで行います、内容は下記です。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::furutest1234567/*"
        }
    ]
}

jsonのサンプルは下記を参考にしましたが、なかなか書くのがめんどくさいですねぇ。
https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/example-bucket-policies.html
"Effect": "Allow"、"Principal": "*"なので内容的にはすべてのユーザーに許可を与えています。
"Version": "2012-10-17"はこのままにしておきます。
最新でいいかと思って今日の日付に変えたらエラーになりました🤢
上記のようにjsonを入力後「保存」します。

Static website hostingの設定

このバケットを静的サイトとして使用するための設定を行います。
「プロパティ」のタブをクリックします。

「Static website hosting」を選択すると下記の画面になります。 画面の上の方に「エンドポイント」が表示されています。
ユーザーがS3にアクセスする際はこのエンドポイントを指定します。
そして上記のように「インデックスドキュメント」に"index.html"、
「エラードキュメント」に"error.html"を入力します。
「インデックスドキュメント」はその名の通り、サイトを訪れたユーザーに最初にアクセスさせたいページです。
「エラードキュメント」はエラー時に表示させたいページになります。

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

上記で登録した"index.html"と"error.html"をアプロードします。 S3の画面に戻って「アップロード」ボタンをクリックします。

2ファイルを選択してアップロードします。

アップロードが完了しました。
ではエンドポイントにアクセスしてみます。
"index.html"の画面が表示されます。
次は存在しないファイルを指定します。 今度はエラー画面が表示されました、なるほど。

リダイレクトルールの設定

次にリダイレクトルールを設定します。
「Static website hosting」画面の下の方のエリアです。
リダイレクトの内容は下記になります。

<RoutingRules>
  <RoutingRule>
    <Condition>
      <KeyPrefixEquals>foo/</KeyPrefixEquals>
    </Condition>
    <Redirect>
      <ReplaceKeyPrefixWith>bar/</ReplaceKeyPrefixWith>
    </Redirect>
  </RoutingRule>
</RoutingRules>

上記で"foo/"フォルダへのアクセスは"bar/"にリダイレクトされます。
S3に"bar"フォルダを作成し、そこにリダイレクトのテスト用のhtmlをアップロードします。

試しにxxxx/foo/redirect_test.htmlにアクセスしてみます。
下記のようにxxxx/bar/redirect_test.htmlが表示されました。

RoutingRuleは複数追加できます。
例えば下記ですが、404エラー時にのみ指定したhtmlを表示するルールを追加しました。

<RoutingRules>
  <RoutingRule>
    <Condition>
      <KeyPrefixEquals>foo/</KeyPrefixEquals>
    </Condition>
    <Redirect>
      <ReplaceKeyPrefixWith>bar/</ReplaceKeyPrefixWith>
    </Redirect>
  </RoutingRule>
  <!-- 追加 -->
  <RoutingRule>
    <Condition>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <ReplaceKeyWith>404.html</ReplaceKeyWith>
    </Redirect>
  </RoutingRule>
  <!-- 追加 -->
</RoutingRules>

最後にこちらも試してみます。
また存在しないアドレスを指定します。
今度はエラー画面（error.html）ではなく、404用のエラー画面（404.html）が表示されました。

感想

---

S3を空の状態から作ってみましたが、いざやってみるとわからないことだったり、新たに知ることがあったりでわりと新鮮でした。
リダイレクトの機能がすこし面白かったですねー。
次はS3に加えてRoute53が登場します。
それまでに自分のドメインを取っておいたほうが良いそうですね。どこか安いドメインをさがさないと～。

それではまた😎