There are a million ways to deploy a Single Page App (SPA) to S3. However, this is a very lightway way, and is based on aws-architect.js. I don’t want to repeat the great readme of this repository, but nevertheless, some introduction.
Bootstrap the deployment
To bootstrap the deployment, run the following code:
|
1 2 3 |
npm install aws-architect -g aws-architect init npm install |
After that, adjust package.json and make.js to only contain the S3 relevant options since aws-architect.js would also allow to create AWS Lambda based web services.
Add AWS CloudFront distribution
The most declarative way with a straight forward deployment option is to leverage AWS CloudFormation to configure additional resources, notably an SSL Certificate attached to your domain, as well as the AWS CloudFront distribution. An easy way is to add that to the deploy command of make.js, but since it’s rarely changing items, you could as well apply those manually.
First, you’ll need an AWS Certificate that can be used for AWS CloudFront later. The CloudFormation template could look like this, allowing for multiple domains, for example to deploy a test or pull request as well as the production version to the same AWS S3 Bucket:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
"ACMCertificate": { "Type": "AWS::CertificateManager::Certificate", "Properties": { "DomainValidationOptions": [ { "DomainName": "myapp.thoean.com", "ValidationDomain": "thoean.com" }, { "DomainName": "tst-myapp.thoean.com", "ValidationDomain": "thoean.com" } ], "DomainName": "myapp.thoean.com", "SubjectAlternativeNames": [ "tst-myapp.thoean.com" ] } } |
Now we can take the ACM Certificate, and create an AWS CloudFront Distribution with it, which includes two URLs, one for production, and one for test or pull requests. In this example, it’s assumed that pull requests are deployed to S3 using a path that starts with PR. The configuration looks like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
"CloudFrontDistribution": { "Type": "AWS::CloudFront::Distribution", "Properties": { "DistributionConfig": { "DefaultRootObject": "index.html", "Aliases": [ "tst-myapp.thoean.com", "myapp.thoean.com" ], "HttpVersion": "http2", "PriceClass": "PriceClass_100", "Origins": [ { "OriginPath": "/v1", "DomainName": { "Fn::Join": [ ".", [ "myapp.thoean.com", "s3.amazonaws.com" ] ] }, "Id": { "Fn::Join": [ "-", [ "S3", "myapp.thoean.com" ] ] }, "S3OriginConfig": {} }, { "DomainName": { "Fn::Join": [ ".", [ "tst-myapp.thoean.com", "s3.amazonaws.com" ] ] }, "Id": { "Fn::Join": [ "-", [ "TST-S3", "myapp.thoean.com" ] ] }, "S3OriginConfig": {} } ], "CacheBehaviors": [ { "ForwardedValues": { "QueryString": false }, "PathPattern": "PR*.*.*/*", "TargetOriginId": { "Fn::Join": [ "-", [ "TST-S3", "myapp.thoean.com" ] ] }, "ViewerProtocolPolicy": "redirect-to-https" } ], "Enabled": true, "ViewerCertificate": { "AcmCertificateArn": "the-long-arn-you-got-from-creating-the-ACM-certificate", "SslSupportMethod": "sni-only" }, "DefaultCacheBehavior": { "ForwardedValues" : { "QueryString" : false }, "TargetOriginId" : { "Fn::Join": [ "-", [ "S3", "myapp.thoean.com" ] ] }, "ViewerProtocolPolicy" : "redirect-to-https" } } } } |
That’s all. Slightly painful to get the ACM Certificate and CloudFront distribution settings correctly set to your needs. But afterwards, just execute make.js as part of your build, and aws-architect.js does the rest for you.