About
Static Web Hosting in Aws is done via s3
Articles Related
Management
Set the entry point
aws s3 website s3://BUCKET_NAME --index-document index.html
URL
- http://{your-bucket-name}.s3-website.{region}.amazonaws.com
Steps
From the Aws tuto.
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
Manually
Create a S3 bucket
- Create a s3 bucket and allows public policy
Create a policy
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
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"
}
- The bucket policy with cloudfront (Replace the cloud-front-origin-access-identity ID and the bucket name). Granting Permission to an Amazon CloudFront Origin Identity
{
"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
- Create a CloudFront distribution, and configure the S3 bucket as the origin
{
"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
}
}
}
- Note the domain name ie: http://dyxppm3sqxwc9.cloudfront.net/ where lives you website.
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
..................................
Enable static website hosting on the bucket
- with the console, enable static website hosting on the bucket and note the website's base URL: http://wildrydes-nico.s3-website.eu-central-1.amazonaws.com
- or with the cli, set the index document
aws s3 website s3://BUCKET_NAME --index-document index.html
URL
then go to http://BUCKET_NAME.s3-website.REGION.amazonaws.com
- in our example: http://wildrydes-nico.s3-website.eu-central-1.amazonaws.com