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

※こちらの記事は個人ブログに移行しました。

これと同じ内容を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の作成

public.json

{
  "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の作成

s3hosting.sh

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つです。

command

$ 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

##表示確認

command

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