Aws - Static Web Hosting

1 - About

Static Web Hosting in Aws is done via s3

3 - Management

3.1 - Set the entry point


aws s3 website s3://BUCKET_NAME --index-document index.html

3.2 - URL

4 - Steps

From the Aws tuto.

4.1 - Amplify

The amplify cli can also add hosting. See https://aws-amplify.github.io/docs/cli/hosting?sdk=js


amplify hosting add
amplify hosting configure
amplify publish

4.2 - Manually

4.2.1 - Create a S3 bucket

  • Create a s3 bucket and allows public policy

4.2.2 - Create a policy

4.2.2.1 - Public without cloudfront
  • Policy file

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

  • Put with the Aws cli

aws s3api put-bucket-policy --bucket BUCKET_NAME --policy file://pathToPolicyFile/website-bucket-policy.json

  • Or put with the console

4.2.2.2 - With cloudfront

from doc

  • With cloudfront, create an origin-access-indentity with the following command and save the id

aws cloudfront create-cloud-front-origin-access-identity --cloud-front-origin-access-identity-config CallerReference=myCallerReference,Comment=myComment


{
    "CloudFrontOriginAccessIdentity": {
        "CloudFrontOriginAccessIdentityConfig": {
            "Comment": "myComment", 
            "CallerReference": "myCallerReference"
        }, 
        "S3CanonicalUserId": "ABCABCCCAfICCQD6m7oRw0uXOjANBgkqhkiG9w0BAQUFADCBiDELMAkGA1EXAMPLE", 
        "Id": "CLOUDFRONT_ORIGIN_ACCESS_IDENTITY_ID"
    }, 
    "ETag": "ANPAJ2UCCR6DPCEXAMPLE", 
    "Location": "https://cloudfront.amazonaws.com/2017-10-30/origin-access-identity/cloudfront/ANPAJ2UCCR6DPCEXAMPLE"
}


{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity REPLACE_ME_CLOUDFRONT_ORIGIN_ACCESS_IDENTITY_ID"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::REPLACE_ME_BUCKET_NAME/*"
        }
    ]
}


aws s3api put-bucket-policy --bucket BUCKET_NAME --policy file://pathToPolicyFile/bucket-policy-cloudfront.json


{
  "CallerReference": "REPLACE_ME_CLOUDFRONT_CALLER_REFERENCE",
  "Aliases": {
    "Quantity": 0
  },
  "DefaultRootObject": "index.html",
  "Origins": {
    "Quantity": 1,
    "Items": [
      {
        "Id": "REPLACE_ME_CLOUDFRONT_CALLER_REFERENCE",
        "DomainName": "REPLACE_ME_BUCKET_NAME.s3.amazonaws.com",
        "S3OriginConfig": {
          "OriginAccessIdentity": "origin-access-identity/cloudfront/REPLACE_ME_CLOUDFRONT_ORIGIN_ACCESS_IDENTITY_ID"
        }
      }
    ]
  },
  "DefaultCacheBehavior": {
    "TargetOriginId": "REPLACE_ME_CLOUDFRONT_CALLER_REFERENCE",
    "ForwardedValues": {
      "QueryString": true,
      "Cookies": {
        "Forward": "none"
      }
    },
    "TrustedSigners": {
      "Enabled": false,
      "Quantity": 0
    },
    "ViewerProtocolPolicy": "allow-all",
    "MinTTL": 0,
    "MaxTTL": 0,
    "DefaultTTL": 0
  },
  "CacheBehaviors": {
    "Quantity": 0
  },
  "Comment": "",
  "Logging": {
    "Enabled": false,
    "IncludeCookies": true,
    "Bucket": "",
    "Prefix": ""
  },
  "PriceClass": "PriceClass_All",
  "Enabled": true
}


aws cloudfront create-distribution --distribution-config file://module-1/aws-cli/website-cloudfront-distribution.json


{
    "Location": "https://cloudfront.amazonaws.com/2018-11-05/distribution/E2E1N6TMOAPD5N",
    "ETag": "E39H940MTXGQ37",
    "Distribution": {
        "Id": "E2E1N6TMOAPD5N",
        "ARN": "arn:aws:cloudfront::REPLACE_ME_ACCOUNT_ID:distribution/E2E1N6TMOAPD5N",
        "Status": "InProgress",
        "LastModifiedTime": "2019-04-08T17:47:49.770Z",
        "InProgressInvalidationBatches": 0,
        "DomainName": "dyxppm3sqxwc9.cloudfront.net",
        "ActiveTrustedSigners": {
            "Enabled": false,
            "Quantity": 0
        },
        "DistributionConfig": {
            "CallerReference": "Mysfits",
            "Aliases": {
                "Quantity": 0
            },
            "DefaultRootObject": "index.html",
            "Origins": {
                "Quantity": 1,
                "Items": [
                    {
                        "Id": "Mysfits",
                        "DomainName": "web-app-modern.s3.amazonaws.com",
                        "OriginPath": "",
                        "CustomHeaders": {
                            "Quantity": 0
                        },
                        "S3OriginConfig": {
                            "OriginAccessIdentity": "origin-access-identity/cloudfront/E157W0YRNXI6KR"
                        }
                    }
                ]
            },
            "OriginGroups": {
                "Quantity": 0
            },
            "DefaultCacheBehavior": {
                "TargetOriginId": "Mysfits",
                "ForwardedValues": {
                    "QueryString": true,
                    "Cookies": {
                        "Forward": "none"
                    },
                    "Headers": {
                        "Quantity": 0
                    },
                    "QueryStringCacheKeys": {
                        "Quantity": 0
                    }
                },
                "TrustedSigners": {
                    "Enabled": false,
                    "Quantity": 0
                },
                "ViewerProtocolPolicy": "allow-all",
                "MinTTL": 0,
                "AllowedMethods": {
                    "Quantity": 2,
                    "Items": [
                        "HEAD",
                        "GET"
                    ],
                    "CachedMethods": {
                        "Quantity": 2,
                        "Items": [
                            "HEAD",
                            "GET"
                        ]
                    }
                },
                "SmoothStreaming": false,
                "DefaultTTL": 0,
                "MaxTTL": 0,
                "Compress": false,
                "LambdaFunctionAssociations": {
                    "Quantity": 0
                },
                "FieldLevelEncryptionId": ""
            },
            "CacheBehaviors": {
                "Quantity": 0
            },
            "CustomErrorResponses": {
                "Quantity": 0
            },
            "Comment": "",
            "Logging": {
                "Enabled": false,
                "IncludeCookies": false,
                "Bucket": "",
                "Prefix": ""
            },
            "PriceClass": "PriceClass_All",
            "Enabled": true,
            "ViewerCertificate": {
                "CloudFrontDefaultCertificate": true,
                "MinimumProtocolVersion": "TLSv1",
                "CertificateSource": "cloudfront"
            },
            "Restrictions": {
                "GeoRestriction": {
                    "RestrictionType": "none",
                    "Quantity": 0
                }
            },
            "WebACLId": "",
            "HttpVersion": "http2",
            "IsIPV6Enabled": true
        }
    }
}

4.2.3 - Copy the Web Site files into the bucket

  • Copy the static web site into the bucket. For instance with the cli and the website sample given by Amazon.

aws s3 sync s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website s3://wildrydes-nico --region eu-central-1


copy: s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website/css/font.css to s3://wildrydes-nico/css/font.css
copy: s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website/css/ride.css to s3://wildrydes-nico/css/ride.css
copy: s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website/favicon.ico to s3://wildrydes-nico/favicon.ico
copy: s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website/css/message.css to s3://wildrydes-nico/css/message.css
copy: s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website/css/mapbox-gl.css to s3://wildrydes-nico/css/mapbox-gl.css
copy: s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website/css/normalize.css to s3://wildrydes-nico/css/normalize.css
..................................

4.2.4 - Enable static website hosting on the bucket

  • or with the cli, set the index document

aws s3 website s3://BUCKET_NAME --index-document index.html

4.2.5 - URL

5 - Documentation / Reference


Data Science
Data Analysis
Statistics
Data Science
Linear Algebra Mathematics
Trigonometry

Powered by ComboStrap