CloudFormationを使ってS3で静的コンテンツを公開する

※当記事は2015年にQiitaに投稿した記事を再編集したものです

これと同じ内容をCloudFormationで実現します

前提

  • aws-cliが入っていること
  • IAMのパーミッションがいい感じに設定されていること
  • Credentialがconfigureもしくは環境変数に設定されてること
    --profile使ってもいいです
  • default region が ap-northeast-1 で設定してあること
    ※ 別にいいんだけど適宜いい感じに読み替えて下さい
  • Mac想定してるのでWindowsの人はEC2使うとかいい感じに読み替えるとかしてください
  • loggingの設定はこの手順には含まれてません

手順

  1. CloudFormationTemplateの作成
  2. Stackを作成するShellScriptの作成
  3. Stackの作成
  4. コンテンツの設置

CloudFormationTemplateの作成

{
  "AWSTemplateFormatVersion" : "2010-09-09",

  "Mappings" : {
    "RegionMap" : {
      "us-east-1"      : { "s3BucketDomain" : "us-east-1.amazonaws.com" },
      "us-west-1"      : { "s3BucketDomain" : "us-west-1.amazonaws.com" },
      "us-west-2"      : { "s3BucketDomain" : "us-west-2.amazonaws.com" },
      "eu-west-1"      : { "s3BucketDomain" : "eu-west-1.amazonaws.com" },
      "sa-east-1"      : { "s3BucketDomain" : "sa-east-1.amazonaws.com" },
      "cu-north-1"     : { "s3BucketDomain" : "cu-north-1.amazonaws.com" },
      "ap-northeast-1" : { "s3BucketDomain" : "ap-northeast-1.amazonaws.com" },
      "ap-southeast-1" : { "s3BucketDomain" : "ap-southeast-1.amazonaws.com" },
      "ap-southeast-2" : { "s3BucketDomain" : "ap-southeast-2.amazonaws.com" }
    }
  },

  "Parameters" : {
    "FQDN" : {
      "Type" : "String",
      "Description" : "The DNS name of service FQDN"
    }
  },

  "Resources" : {
    "S3BucketForWebsite" : {
      "Type" : "AWS::S3::Bucket",
      "Properties" : {
        "AccessControl" : "PublicRead",
        "BucketName" : { "Ref" : "FQDN" },
        "WebsiteConfiguration" : {
          "ErrorDocument" : "error.html",
          "IndexDocument" : "index.html"
        }
      }
    },
    "BucketPolicyForWebsite" : {
      "Type" : "AWS::S3::BucketPolicy",
      "Properties" : {
        "Bucket" : { "Ref" : "S3BucketForWebsite" },
        "PolicyDocument" : {
          "Id" : "PublicRead",
          "Version": "2012-10-17",
          "Statement" : [ {
            "Sid" : "ReadAccess",
            "Action" : [ "s3:GetObject" ],
            "Effect" : "Allow",
            "Resource" : { "Fn::Join" : ["", ["arn:aws:s3:::", { "Ref" : "S3BucketForWebsite" } , "/*" ]]},
            "Principal" : "*"
          } ]
        }
      }
    }
  },

  "Outputs" : {
    "WebsiteURL" : {
      "Value" : { "Fn::GetAtt" : [ "S3BucketForWebsite", "WebsiteURL" ] },
      "Description" : "URL for website hosted on S3"
    }
  }
}

Stackを作成するShellScriptの作成

BUCKETNAME="hogehogehoget"
aws cloudformation create-stack \
    --stack-name s3website \
    --parameters \
        ParameterKey=FQDN,ParameterValue="${BUCKETNAME}" \
    --template-body "`cat ./public.json`"

Stackの作成

$ bash s3hosting.sh
{
    "StackId": "arn:aws:cloudformation:ap-northeast-1:928303975683:stack/s3website/0e1b3520-bb1c-11e4-b04c-50a676d45896"
}

Stackの進行状況確認

$ aws cloudformation describe-stacks

StackStatusの値がCREATE_COMPLETEになれば環境は出来上がっています。

コンテンツの設置

コンテンツはカレントディレクトリにあるものとして記載しています。
置いてあるファイルは/index.html/css/index.cssの2つです。

$ SC_DIR=$(pwd)
$ BUCKETNAME="hogehogehoget"
$ aws s3 sync ${SC_DIR}/ s3://${BUCKETNAME}/
upload: css/index.css to s3://hogehogehoget/css/index.css
upload: ./index.html to s3://hogehogehoget/index.html

表示確認

$ open http://${BUCKETNAME}.s3-website-ap-northeast-1.amazonaws.com

コメント

タイトルとURLをコピーしました