S3 website routine

.S3_CORS_WEBSITE.md

CORS details

• Content-Type: application/json means a request can no longer be considered a CORS simple request, hence a CORS preflight request is triggered

• https://auth0.com/blog/cors-tutorial-a-guide-to-cross-origin-resource-sharing/

• seems that OPTIONS is not supported by AllowedMethods

• https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/aws-properties-s3-bucket-cors-corsrule.html#cfn-s3-bucket-cors-corsrule-allowedmethods

• however

• https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

• "The rule also allows all headers in a preflight OPTIONS request through the Access-Control-Request-Headers header. In response to preflight OPTIONS requests, Amazon S3 returns requested headers"

• this suggests that specifying Content-Type: application/json should be okay

• it's undeniable that index.html/js seem to be able to retrieve index.json, even when deployed with Content-Type; you can see the Content-Type in the headers

CORS version

• ./describe_stacks.sh

• ./deploy_stack.sh

• ./describe_outputs.sh

• [copy URl into index.js]

• [pull up index.html]

• [is {"hello":"world"} printed to console ?]

• ./delete_stack.sh

• ./describe_stacks.sh

original version

justin@justin-XPS-13-9360:~/work$ . ./setenv.sh
justin@justin-XPS-13-9360:~/work$ echo $AWS_DEFAULT_OUTPUT
table
justin@justin-XPS-13-9360:~/work$ ./describe_stacks.sh 
--------------------------------------------------------------------------------
|                                DescribeStacks                                |
+-----------------------------------------------------------+------------------+
|                          1.Name                           |    2.Status      |
+-----------------------------------------------------------+------------------+
|  #{an-existing-stack}                                     |  UPDATE_COMPLETE |
+-----------------------------------------------------------+------------------+
justin@justin-XPS-13-9360:~/work$ ./deploy_stack.sh 

Waiting for changeset to be created..
Waiting for stack create/update to complete
Successfully created/updated stack - jhw-hello-world
upload: ./index.html to s3://jhw-hello-world/index.html           
justin@justin-XPS-13-9360:~/work$ ./describe_stacks.sh 
--------------------------------------------------------------------------------
|                                DescribeStacks                                |
+-----------------------------------------------------------+------------------+
|                          1.Name                           |    2.Status      |
+-----------------------------------------------------------+------------------+
|  #{an-existing-stack}                                     |  UPDATE_COMPLETE |
|  jhw-hello-world                                          |  CREATE_COMPLETE |
+-----------------------------------------------------------+------------------+
justin@justin-XPS-13-9360:~/work$ ./describe_events.sh 
------------------------------------------------------------------------------------------------------------------------------------
|                                                        DescribeStackEvents                                                       |
+--------------------------+------------------+-----------------------------+----------------------+-------------------------------+
|        1.Timestamp       |      2.Id        |           3.Type            |      4.Status        |           5.Reason            |
+--------------------------+------------------+-----------------------------+----------------------+-------------------------------+
|  2019-10-25T09:36:57.545Z|  jhw-hello-world |  AWS::CloudFormation::Stack |  CREATE_COMPLETE     |  None                         |
|  2019-10-25T09:36:56.388Z|  AppBucketPolicy |  AWS::S3::BucketPolicy      |  CREATE_COMPLETE     |  None                         |
|  2019-10-25T09:36:55.832Z|  AppBucketPolicy |  AWS::S3::BucketPolicy      |  CREATE_IN_PROGRESS  |  Resource creation Initiated  |
|  2019-10-25T09:36:54.565Z|  AppBucketPolicy |  AWS::S3::BucketPolicy      |  CREATE_IN_PROGRESS  |  None                         |
|  2019-10-25T09:36:52.867Z|  AppBucket       |  AWS::S3::Bucket            |  CREATE_COMPLETE     |  None                         |
|  2019-10-25T09:36:32.174Z|  AppBucket       |  AWS::S3::Bucket            |  CREATE_IN_PROGRESS  |  Resource creation Initiated  |
|  2019-10-25T09:36:30.725Z|  AppBucket       |  AWS::S3::Bucket            |  CREATE_IN_PROGRESS  |  None                         |
|  2019-10-25T09:36:28.593Z|  jhw-hello-world |  AWS::CloudFormation::Stack |  CREATE_IN_PROGRESS  |  User Initiated               |
|  2019-10-25T09:36:23.314Z|  jhw-hello-world |  AWS::CloudFormation::Stack |  REVIEW_IN_PROGRESS  |  User Initiated               |
+--------------------------+------------------+-----------------------------+----------------------+-------------------------------+
justin@justin-XPS-13-9360:~/work$ ./describe_resources.sh 
----------------------------------------------------------------------------------------------------------------------------------------------
|                                                           DescribeStackResources                                                           |
+--------------------------+------------------+-------------------------------------------------+------------------------+-------------------+
|        1.Timestamp       |   2.LogicalId    |                  3.PhysicalId                   |        4.Type          |     5.Status      |
+--------------------------+------------------+-------------------------------------------------+------------------------+-------------------+
|  2019-10-25T09:36:52.867Z|  AppBucket       |  jhw-hello-world                                |  AWS::S3::Bucket       |  CREATE_COMPLETE  |
|  2019-10-25T09:36:56.388Z|  AppBucketPolicy |  jhw-hello-world-AppBucketPolicy-1HHRU891O0FMJ  |  AWS::S3::BucketPolicy |  CREATE_COMPLETE  |
+--------------------------+------------------+-------------------------------------------------+------------------------+-------------------+
justin@justin-XPS-13-9360:~/work$ ./describe_outputs.sh 
----------------------------------------------------------------------------
|                              DescribeStacks                              |
+-----------+--------------------------------------------------------------+
| OutputKey |                         OutputValue                          |
+-----------+--------------------------------------------------------------+
|  BucketURL|  http://jhw-hello-world.s3-website-eu-west-1.amazonaws.com   |
+-----------+--------------------------------------------------------------+
justin@justin-XPS-13-9360:~/work$ ./delete_stack.sh 
delete: s3://jhw-hello-world/index.html
justin@justin-XPS-13-9360:~/work$ ./describe_stacks.sh 
--------------------------------------------------------------------------------
|                                DescribeStacks                                |
+-----------------------------------------------------------+------------------+
|                          1.Name                           |    2.Status      |
+-----------------------------------------------------------+------------------+
|  #{an-existing-stack}                                     |  UPDATE_COMPLETE |
+-----------------------------------------------------------+------------------+
justin@justin-XPS-13-9360:~/work$ 

app.props

AppName=jhw-hello-world

delete_stack.sh

#!/usr/bin/env bash

. app.props

aws s3 rm s3://$AppName/index.json
aws cloudformation delete-stack --stack-name $AppName

deploy_stack.sh

#!/usr/bin/env bash

. app.props

aws cloudformation deploy --stack-name $AppName --template-file stack.yaml --parameter-overrides AppName=$AppName --capabilities CAPABILITY_NAMED_IAM
aws s3 cp index.json s3://$AppName/index.json  --content-type application/json

describe_events.sh

#!/usr/bin/env bash

. app.props

aws cloudformation describe-stack-events --stack-name $AppName --query "StackEvents[].{\"1.Timestamp\":Timestamp,\"2.Id\":LogicalResourceId,\"3.Type\":ResourceType,\"4.Status\":ResourceStatus,\"5.Reason\":ResourceStatusReason}"

describe_outputs.sh

#!/usr/bin/env bash

. app.props

aws cloudformation describe-stacks --stack-name $AppName --query 'Stacks[0].Outputs' --output table

describe_resources.sh

#!/usr/bin/env bash

. app.props

aws cloudformation describe-stack-resources --stack-name $AppName --query "StackResources[].{\"1.Timestamp\":Timestamp,\"2.LogicalId\":LogicalResourceId,\"3.PhysicalId\":PhysicalResourceId,\"4.Type\":ResourceType,\"5.Status\":ResourceStatus}"

describe_stacks.sh

#!/usr/bin/env bash

aws cloudformation describe-stacks --query "Stacks[].{\"1.Name\":StackName,\"2.Status\":StackStatus}"

index.html

<html>
  <head>
    <title>Hello World</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
    <script
      src="https://code.jquery.com/jquery-3.5.1.min.js"
      integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
      crossorigin="anonymous"></script>
    <script type="text/javascript" src="index.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="jumbotron text-center"
	   style="margin-top: 50px;">
	<h1>Hello World</h1>
      </div>
    </div>
    <script>
      $(document).ready(function() {
      fetch();
      });
    </script>
  </body>
</html>

index.js

function fetch() {
    $.ajax({
	url: "http://jhw-hello-world.s3-website-eu-west-1.amazonaws.com/index.json",
	method: "GET",
	dataType: "json",
	success: function(struct) {
	    console.log(JSON.stringify(struct));
	}
    });
}

index.json

{"hello": "world"}

setenv.sh

#!/usr/bin/env bash

export AWS_DEFAULT_OUTPUT=table

stack.yaml

---
AWSTemplateFormatVersion: '2010-09-09'
Parameters:
  AppName:
    Type: String
Outputs:
  BucketURL:
    Value: !GetAtt
      - AppBucket
      - WebsiteURL
Resources:
  AppBucket:
    Type: AWS::S3::Bucket
    Properties:
      AccessControl: PublicRead
      BucketName:
        Ref: AppName
      CorsConfiguration:
        CorsRules:
        - AllowedMethods:
          - HEAD
          - GET
          AllowedOrigins:
          - '*'
      WebsiteConfiguration:
        IndexDocument: index.json
  AppBucketPolicy:
    Type: AWS::S3::BucketPolicy
    Properties:
      PolicyDocument:
        Version: 2012-10-17
        Statement:
          - Sid: PublicReadForGetBucketObjects
            Effect: Allow
            Principal: '*'
            Action: 's3:GetObject'
            Resource: !Join
              - ''
              - - 'arn:aws:s3:::'
                - !Ref AppBucket
                - /*
      Bucket: !Ref AppBucket

TODO.md

short

• add bucket cors options
• replaces index.html with index.json