Created
October 24, 2019 10:59
-
-
Save tomfun/e097b81866068daf58cb2755046fc75f to your computer and use it in GitHub Desktop.
Cloudformation template for AWS S3 Bucket, CloudFront, private access for static hosting of angular frontend project (with client side routing). Every 403 request replies with index.html. For some reason it takes a lot of time after end to start work well
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"AWSTemplateFormatVersion": "2010-09-09", | |
"Parameters" : { | |
"MainDomainName": { | |
"Description": "public pretty FQDN for cloudfront", | |
"Type": "String", | |
"Default": "example.com" | |
}, | |
"AcmCertificateArn": { | |
"Description": "AWS certificate ID for cloudfront", | |
"Default": "arn:aws:acm:us-east-1:2xxxxxxxxx44:certificate/0aaeba7b-7edb-4d9e-8abb-yyyyyyyyy351", | |
"Type": "String" | |
} | |
}, | |
"Resources": { | |
"staticWebBucket": { | |
"Type": "AWS::S3::Bucket", | |
"Properties": { | |
"AccessControl": "Private", | |
"VersioningConfiguration": { | |
"Status": "Suspended" | |
} | |
} | |
}, | |
"staticWebCloudFrontNetAccessIdentity": { | |
"Type": "AWS::CloudFront::CloudFrontOriginAccessIdentity", | |
"Properties": { | |
"CloudFrontOriginAccessIdentityConfig": { | |
"Comment": { | |
"Fn::Join": [ | |
"", | |
[ | |
"https://", | |
{ "Ref" : "MainDomainName" }, | |
"/ access-identity-", | |
{ | |
"Fn::GetAtt": [ | |
"staticWebBucket", | |
"DomainName" | |
] | |
} | |
] | |
] | |
} | |
} | |
} | |
}, | |
"staticWebCloudFrontDistribution": { | |
"Type": "AWS::CloudFront::Distribution", | |
"Properties": { | |
"DistributionConfig": { | |
"Aliases": [ | |
{ "Ref" : "MainDomainName" } | |
], | |
"Enabled": true, | |
"PriceClass": "PriceClass_All", | |
"CustomErrorResponses": [ | |
{ | |
"ErrorCachingMinTTL": 300, | |
"ErrorCode": 403, | |
"ResponseCode": "404", | |
"ResponsePagePath": "/index.html" | |
} | |
], | |
"DefaultCacheBehavior": { | |
"TargetOriginId": { | |
"Fn::Join": [ | |
"-", | |
[ | |
"S3", | |
{ | |
"Ref": "staticWebBucket" | |
} | |
] | |
] | |
}, | |
"ViewerProtocolPolicy": "redirect-to-https", | |
"MinTTL": 0, | |
"AllowedMethods": [ | |
"HEAD", | |
"GET" | |
], | |
"CachedMethods": [ | |
"HEAD", | |
"GET" | |
], | |
"ForwardedValues": { | |
"Cookies": { | |
"Forward": "none" | |
}, | |
"QueryString": false | |
} | |
}, | |
"Origins": [ | |
{ | |
"Id": { | |
"Fn::Join": [ | |
"-", | |
[ | |
"S3", | |
{ | |
"Ref": "staticWebBucket" | |
} | |
] | |
] | |
}, | |
"DomainName": { | |
"Fn::GetAtt": [ | |
"staticWebBucket", | |
"DomainName" | |
] | |
}, | |
"S3OriginConfig": { | |
"OriginAccessIdentity": { | |
"Fn::Join": [ | |
"", | |
[ | |
"origin-access-identity/cloudfront/", | |
{ | |
"Ref": "staticWebCloudFrontNetAccessIdentity" | |
} | |
] | |
] | |
} | |
} | |
} | |
], | |
"Restrictions": { | |
"GeoRestriction": { | |
"RestrictionType": "none", | |
"Locations": [ | |
] | |
} | |
}, | |
"ViewerCertificate": { | |
"SslSupportMethod": "sni-only", | |
"AcmCertificateArn" : { | |
"Ref": "AcmCertificateArn" | |
}, | |
"MinimumProtocolVersion": "TLSv1.2_2018" | |
} | |
} | |
} | |
}, | |
"staticWebBucketPolicy": { | |
"Type": "AWS::S3::BucketPolicy", | |
"Properties": { | |
"Bucket": { | |
"Ref": "staticWebBucket" | |
}, | |
"PolicyDocument": { | |
"Version": "2008-10-17", | |
"Id": "PolicyForCloudFrontPrivateContent", | |
"Statement": [ | |
{ | |
"Sid": "1", | |
"Effect": "Allow", | |
"Principal": { | |
"CanonicalUser": { | |
"Fn::GetAtt": [ | |
"staticWebCloudFrontNetAccessIdentity", | |
"S3CanonicalUserId" | |
] | |
} | |
}, | |
"Action": "s3:GetObject", | |
"Resource": { | |
"Fn::Join": [ | |
"", | |
[ | |
"arn:aws:s3:::", | |
{ | |
"Ref": "staticWebBucket" | |
}, | |
"/*" | |
] | |
] | |
} | |
} | |
] | |
} | |
} | |
} | |
}, | |
"Outputs": { | |
"WebsiteUglyURL": { | |
"Value": { | |
"Fn::GetAtt": [ | |
"staticWebCloudFrontDistribution", | |
"DomainName" | |
] | |
}, | |
"Description": "URL for website hosted on S3" | |
}, | |
"CloudfrontDistributionId": { | |
"Value": { | |
"Ref": "staticWebCloudFrontDistribution" | |
}, | |
"Description": "URL for website hosted on S3" | |
}, | |
"staticWebBucketSecureURL": { | |
"Value": { | |
"Fn::Join": [ | |
"", | |
[ | |
"https://", | |
{ | |
"Fn::GetAtt": [ | |
"staticWebBucket", | |
"DomainName" | |
] | |
} | |
] | |
] | |
}, | |
"Description": "Name of S3 bucket to hold website content" | |
}, | |
"staticWebBucketName": { | |
"Value": { | |
"Ref": "staticWebBucket" | |
}, | |
"Description": "Name of S3 bucket to hold website content" | |
} | |
}, | |
"Description": "S3 Bucket, CloudFront, private access for static hosting for frontend project" | |
} |
It is ok to see first time error:
curl https://auth.paydock.com/index.html
<?xml version="1.0" encoding="UTF-8"?>
<Error><Code>TemporaryRedirect</Code><Message>Please re-send this request to the specified temporary endpoint. Continue to use the original request endpoint for future requests.</Message><Endpoint>static-app-staging-staticWebBucket-1d4fsjugv51ej.s3-ap-southeast-2.amazonaws.com</Endpoint><Bucket>static-app-staging-staticWebBucket-1d4fsjugv51ej</Bucket><RequestId>4D197C8F5004BFFB</RequestId><HostId>NmNBkclXy+Alqth8PTAcbllsXFnBEkrORLliZdRywC0DAqLjR5m48Fd4M3MTY+KrFXjs8nG7r1w=</HostId></Error>
But after some time it works well. Do not forget to place index.html
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Some ugly peace of
.gitlab-ci.yml