Go to Qiita Advent Calendar 2024 Top
LoginSignup
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@tcsh(Hirokazu HATANO)

[JAWS-UG CLI] S3:#9 S3バケットの作成 (CORS)

Last updated at Posted at 2015-09-28

AWS CLIを利用して、S3上にPOST可能なWebサイトを作成してみます。

前提条件

S3への権限

  • S3に対してフル権限があること。

AWS CLIのバージョン

  • 以下のバージョンで動作確認済

    • AWS CLI 1.8.3
コマンド
aws --version
結果(例)
      aws-cli/1.8.3 Python/2.7.5 Darwin/13.4.0
  1. 準備
    =======

0.1. リージョンの決定

Webサイトを構築するリージョンを決めます。

(カレントユーザが利用するカレントリージョンも切り変わります。)

コマンド(東京リージョンの場合)
export AWS_DEFAULT_REGION='ap-northeast-1'

0.2. 変数の確認

プロファイルとリージョンが想定のものになっていることを確認します。

変数の確認
aws configure list
結果(例)

            Name                    Value             Type    Location
            ----                    -----             ----    --------
         profile        s3Full-prjZ-mbp13              env    AWS_DEFAULT_PROFILE
      access_key     ****************LOAQ shared-credentials-file
      secret_key     ****************I1O1 shared-credentials-file
          region           ap-northeast-1              env    AWS_DEFAULT_REGION
  1. 事前作業
    ===========

1.1. サイト名の決定

組織名-handson-今日の日付とします。

変数の設定
ORG=<組織名>
HOSTNAME_WEBSITE="${ORG}-handson-`date +%Y%m%d`"

echo ${HOSTNAME_WEBSITE}

1.2. コンテンツ用バケット名の決定

変数の設定
S3_BUCKET_SITE="${HOSTNAME_WEBSITE}" \
        && echo ${S3_BUCKET_SITE}

同名のバケットが存在しないことを確認します。

コマンド
aws s3 ls s3://${S3_BUCKET_SITE}
結果(例)
      A client error (NoSuchBucket) occurred when calling the ListObjects operation: The specified bucket does not exist

1.3. ログ用バケット名の決定

変数の設定
S3_BUCKET_LOG="${S3_BUCKET_SITE}-log" \
        && echo ${S3_BUCKET_LOG}

同名のバケットが存在しないことを確認します。

コマンド
aws s3 ls s3://${S3_BUCKET_LOG}
結果(例)
      A client error (NoSuchBucket) occurred when calling the ListObjects operation: The specified bucket does not exist

1.4. ローカルディレクトリ作成

変数の設定
DIR_LOCAL_CONTENTS="$(pwd)/file-bucket" \
        && echo ${DIR_LOCAL_CONTENTS}
コマンド
mkdir -p ${DIR_LOCAL_CONTENTS} \
        && cd ${DIR_LOCAL_CONTENTS}

1.5. index.html, error.html作成

コマンド
cd ${DIR_LOCAL_CONTENTS}
コマンド
cat << EOF > index.html
      <!DOCTYPE html>
      <html lang="ja">
      <head>
        <meta charset="utf-8">
        <title>Title</title>
      </head>

      <body>

      <h1>Hello!</h1>
      <!-- comment -->

      </body>
      </html>
EOF

cat index.html
コマンド
cat << EOF > error.html
      <!DOCTYPE html>
      <html lang="ja">

      <head>
        <meta charset="UTF-8">
      </head>

      <body>
        <h1>404 File Not Found</h1>
        <p>お探しのページは見つかりません。</p>
      </body>
      </html>
EOF

cat error.html
  1. コンテンツ用バケットの作成
    =============================
変数の設定
S3_BUCKET_NAME="${S3_BUCKET_SITE}" \
        && echo ${S3_BUCKET_NAME}
変数の確認
cat << ETX

          S3_BUCKET_NAME: ${S3_BUCKET_NAME}

ETX
コマンド
aws s3 mb s3://${S3_BUCKET_NAME}
結果(例)
      make_bucket: s3://www.example.jp/
コマンド
aws s3api get-bucket-location --bucket ${S3_BUCKET_NAME}
結果(例)
      {
        "LocationConstraint": "ap-northeast-1"
      }
  1. ログ用バケットの作成/設定
    ============================

3.1. ログ用バケットの作成

変数の設定
S3_BUCKET_NAME="${S3_BUCKET_LOG}" \
        && echo ${S3_BUCKET_NAME}
変数の確認
cat << ETX

          S3_BUCKET_NAME: ${S3_BUCKET_NAME}

ETX
コマンド
aws s3 mb s3://${S3_BUCKET_NAME}
結果(例)
      make_bucket: s3://www.example.jp-log/
コマンド
aws s3api get-bucket-location --bucket ${S3_BUCKET_NAME}
結果(例)
      {
        "LocationConstraint": "ap-northeast-1"
      }

3.2. バケットACLの確認

コマンド
aws s3api get-bucket-acl \
        --bucket ${S3_BUCKET_NAME}
結果(例)
      {
        "Owner": {
          "DisplayName": "prjz",
          "ID": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
        },
        "Grants": [
          {
              "Grantee": {
                  "DisplayName": "prjz",
                  "ID": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
              },
              "Permission": "FULL_CONTROL"
          }
        ]
      }

3.3. バケットACLの変更

変数の確認
cat << ETX

          S3_BUCKET_NAME: ${S3_BUCKET_NAME}

ETX
コマンド
aws s3api put-bucket-acl \
        --bucket ${S3_BUCKET_NAME} \
        --grant-write 'URI="http://acs.amazonaws.com/groups/s3/LogDelivery"' \
        --grant-read-acp 'URI="http://acs.amazonaws.com/groups/s3/LogDelivery"'
結果(例)
      (戻り値なし)

注釈: フルコントロールの設定が消えるため、オーナはログの削除ができなくなります。 (必要がある場合は、grant-full-controlで指定する。)

3.4. バケットACLの確認

コマンド
aws s3api get-bucket-acl \
        --bucket ${S3_BUCKET_NAME}
結果(例)
      {
        "Owner": {
          "DisplayName": "prjz",
          "ID": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
        },
        "Grants": [
          {
              "Grantee": {
                  "URI": "http://acs.amazonaws.com/groups/s3/LogDelivery"
              },
              "Permission": "WRITE"
          },
          {
              "Grantee": {
                  "URI": "http://acs.amazonaws.com/groups/s3/LogDelivery"
              },
              "Permission": "READ_ACP"
          }
        ]
      }
  1. ログ用バケットの設定 (ログローテーションの設定)
    ==================================================

4.1. 設定の確認

変数の確認
cat << ETX

        S3_BUCKET_NAME:    ${S3_BUCKET_NAME}

ETX
コマンド
aws s3api get-bucket-lifecycle \
        --bucket ${S3_BUCKET_NAME}
結果(例)
      A client error (NoSuchLifecycleConfiguration) occurred when calling the GetBucketLifecycle operation: The lifecycle configuration does not exist

4.2. 設定ファイルの作成

変数の設定
FILE_S3_LIFECYCLE='s3-lifecycle.json'
S3_LIFECYCLE_EXPIRE_DAYS='60'
S3_LIFECYCLE_TRANS_DAYS='30'
S3_LIFECYCLE_ID="${S3_BUCKET_NAME}-Archive"

S3_LIFECYCLE_IDは、Lifecycle RulesのRule Nameになります。(マネジメントコンソール上ではオプション扱い)

コマンド
cat << EOF > ${FILE_S3_LIFECYCLE}
{
        "Rules": [
          {
            "Expiration": {
              "Days": ${S3_LIFECYCLE_EXPIRE_DAYS}
            },
            "ID": "${S3_LIFECYCLE_ID}",
            "Prefix": "Logs/",
            "Status": "Enabled",
            "Transition": {
              "Days": ${S3_LIFECYCLE_TRANS_DAYS},
              "StorageClass": "GLACIER"
            }
          }
        ]
}
EOF

JSONファイルを作成したら、フォーマットが壊れてないか必ず確認します。

コマンド
jsonlint -q ${FILE_S3_LIFECYCLE}
結果
      (戻り値なし)

4.3. 設定

変数の確認
cat << ETX

        S3_BUCKET_NAME:    ${S3_BUCKET_NAME}
        FILE_S3_LIFECYCLE: ${FILE_S3_LIFECYCLE}

ETX
コマンド
aws s3api put-bucket-lifecycle \
        --bucket ${S3_BUCKET_NAME} \
        --lifecycle-configuration file://${FILE_S3_LIFECYCLE}
結果
      (戻り値なし)

4.4. 設定の確認

コマンド
aws s3api get-bucket-lifecycle \
        --bucket ${S3_BUCKET_NAME}
結果
      {
        "Rules": [
          {
              "Status": "Enabled",
              "Prefix": "/Logs",
              "Transition": {
                  "Days": 1,
                  "StorageClass": "GLACIER"
              },
              "Expiration": {
                  "Days": 2
              },
              "ID": "www.example.jp-log-Archive"
          }
        ]
      }
  1. コンテンツ用バケットの設定 (ログ保存)
    ========================================
変数の設定
S3_BUCKET_NAME="${S3_BUCKET_SITE}" \
        && echo ${S3_BUCKET_NAME}

5.1. ログ保存設定の確認

コマンド
aws s3api get-bucket-logging \
        --bucket ${S3_BUCKET_NAME}
結果
      (戻り値なし)

5.2. ログ保存設定ファイルの作成

変数の設定
FILE_S3_LOGGING='s3-logging.json'
コマンド
cat << EOF > ${FILE_S3_LOGGING}
{
        "LoggingEnabled": {
          "TargetBucket": "${S3_BUCKET_LOG}",
          "TargetPrefix": "/Logs"
        }
}
EOF

JSONファイルを作成したら、フォーマットが壊れてないか必ず確認します。

コマンド
jsonlint -q ${FILE_S3_LOGGING}
結果
      (戻り値なし)

5.3. ログ保存の設定

変数の確認
cat << ETX

        S3_BUCKET_NAME:  ${S3_BUCKET_NAME}
        FILE_S3_LOGGING: ${FILE_S3_LOGGING}

ETX
コマンド
aws s3api put-bucket-logging \
        --bucket ${S3_BUCKET_NAME} \
        --bucket-logging-status file://${FILE_S3_LOGGING}
結果
      (戻り値なし)

5.4. ログ保存設定の確認

コマンド
aws s3api get-bucket-logging \
        --bucket ${S3_BUCKET_NAME}
結果(例)
      {
        "LoggingEnabled": {
          "TargetPrefix": "/Logs",
          "TargetBucket": "www.example.jp-log"
        }
      }
  1. コンテンツ用バケットの設定 (バケットポリシ)
    ==============================================

6.1. 設定の確認

変数の確認
cat << ETX

        S3_BUCKET_NAME:  ${S3_BUCKET_NAME}

ETX
コマンド
aws s3api get-bucket-policy \
        --bucket ${S3_BUCKET_NAME} |\
        sed 's/\\//g' |\
        sed 's/"{/{/' |\
        sed 's/}"/}/' |\
        jq .
結果(例)
      A client error (NoSuchBucketPolicy) occurred when calling the GetBucketPolicy operation: The bucket policy does not exist

6.2. 設定ファイルの作成

変数の設定
FILE_POLICY='s3-policy-readonly.json'
変数の確認
cat << EOF > ${FILE_POLICY}
{
        "Version":"2012-10-17",
        "Statement":[{
            "Sid":"AddPerm",
            "Effect":"Allow",
              "Principal": "*",
            "Action":["s3:GetObject"],
            "Resource":["arn:aws:s3:::${S3_BUCKET_NAME}/*"]
          }
        ]
}
EOF

JSONファイルを作成したら、フォーマットが壊れてないか必ず確認します。

コマンド
jsonlint -q ${FILE_POLICY}
結果
      (戻り値なし)

6.3. 設定

変数の確認
cat << ETX

        S3_BUCKET_NAME ${S3_BUCKET_NAME}
        FILE_POLICY:   ${FILE_POLICY}

ETX
コマンド
aws s3api put-bucket-policy \
        --bucket ${S3_BUCKET_NAME} \
        --policy file://${FILE_POLICY}
結果
      (戻り値なし)

6.4. 設定の確認

コマンド
aws s3api get-bucket-policy \
        --bucket ${S3_BUCKET_NAME} |\
        sed 's/\\//g' |\
        sed 's/"{/{/' |\
        sed 's/}"/}/' |\
        jq .
結果
      {
        "Policy": {
          "Version": "2012-10-17",
          "Statement": [
            {
              "Sid": "AddPerm",
              "Effect": "Allow",
              "Principal": "*",
              "Action": "s3:GetObject",
              "Resource": "arn:aws:s3:::www.example.jp/*"
            }
          ]
        }
      }
  1. コンテンツ用バケットの設定 (Website設定)
    ===========================================

7.1. 設定の確認

コマンド
aws s3api get-bucket-website \
        --bucket ${S3_BUCKET_NAME}
結果(例)
      A client error (NoSuchWebsiteConfiguration) occurred when calling the GetBucketWebsite operation: The specified bucket does not have a website configuration

7.2. 設定

変数の確認
cat << ETX

          S3_BUCKET_NAME: ${S3_BUCKET_NAME}

ETX
コマンド
aws s3 website "s3://${S3_BUCKET_NAME}" \
        --index-document index.html \
        --error-document error.html
結果
      (戻り値なし)

7.4. 設定の確認

コマンド
aws s3api get-bucket-website \
        --bucket ${S3_BUCKET_NAME}
結果
      {
          "IndexDocument": {
              "Suffix": "index.html"
          },
          "ErrorDocument": {
              "Key": "error.html"
          }
      }
  1. コンテンツ転送
    =================
コマンド
cd ${DIR_LOCAL_CONTENTS}
コマンド
aws s3 sync . "s3://${S3_BUCKET_NAME}/" \
        --exclude ".git*" \
        --exclude ".hg*"
  1. アクセス確認
    ===============

バケットのURLを確認します。

コマンド
S3_BUCKET_ENDPOINT="${S3_BUCKET_NAME}.s3-website-`aws s3api get-bucket-location --bucket ${S3_BUCKET_NAME} --output text`.amazonaws.com" \
        && echo ${S3_BUCKET_ENDPOINT}
結果(例)
      www.example.jp.s3-website-ap-northeast-1.amazonaws.com

ブラウザでアクセスできることを確認しましょう。

  1. CORSの設定
    ==============

10.1. 設定の確認

コマンド
aws s3api get-bucket-cors \
        --bucket ${S3_BUCKET_NAME}
結果(例)
      A client error (NoSuchCORSConfiguration) occurred when calling the GetBucketCors operation: The CORS configuration does not exist

10.2. 設定ファイルの作成

変数の設定
FILE_CORS_RULE="${S3_BUCKET_NAME}-cors.json"
コマンド
cat << EOF > ${FILE_CORS_RULE}
{
        "CORSRules": [
          {
            "AllowedHeaders": [
              "*"
            ],
            "MaxAgeSeconds": 3000,
            "AllowedMethods": [
              "PUT"
            ],
            "AllowedOrigins": [
              "http://${S3_BUCKET_ENDPOINT}"
            ]
          }
        ]
}
EOF

cat ${FILE_CORS_RULE}

JSONファイルを作成したら、フォーマットが壊れてないか必ず確認します。

コマンド
jsonlint -q ${FILE_CORS_RULE}
結果
      (戻り値なし)

10.3. 設定

コマンド
aws s3api put-bucket-cors \
        --bucket ${S3_BUCKET_NAME} \
        --cors-configuration file://${FILE_CORS_RULE}
結果
      (戻り値なし)

10.4. 設定の確認

コマンド
aws s3api get-bucket-cors \
        --bucket ${S3_BUCKET_NAME}
結果(例)
      {
        "CORSRules": [
          {
              "AllowedHeaders": [
                  "*"
              ],
              "MaxAgeSeconds": 3000,
              "AllowedMethods": [
                  "PUT"
              ],
              "AllowedOrigins": [
                  "http://example-handson-20150928.s3-website-ap-northeast-1.amazonaws.com"
              ]
          }
        ]
      }

完了

Cognitoで識別子プールを作成し、コンテンツを置きます。

4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?