In today's digital landscape, Single Page Applications (SPAs) have gained immense popularity due to their seamless user experiences and efficient performance. However, to ensure that your SPA reaches its full potential, you need a reliable hosting solution that can deliver your content quickly and securely. Amazon Web Services (AWS) offers a powerful combination of services to achieve this, including Amazon S3 for storage and Amazon CloudFront for content delivery. In this guide, we'll walk you through the process of hosting your SPAs on S3 and CloudFront using the AWS Cloud Development Kit (CDK) in Python.
The Components
Before we start setting up our environment we need to clarify the primary components we will need to host our application:
- Amazon S3: Amazon Simple Storage Service (S3) is an object storage service that allows you to store and retrieve data, including static web assets like HTML, CSS, JavaScript, videos and images.
- Amazon CloudFront: Amazon CloudFront is a content delivery network (CDN) that accelerates the distribution of your web content. It caches your SPA's assets at edge locations worldwide, reducing latency for your users and enhancing the overall performance. Edge locations are used to cache the Application worldwide as close as possible to the user.
- AWS CDK: The AWS Cloud Development Kit (CDK) is an open-source software development kit to define cloud infrastructure in code. With CDK, you can define and provision AWS resources using familiar programming languages like TypeScript or Python.
Setting up the Project
To get started, ensure you have the AWS CLI installed and configured on your local machine. Create a new directory for your CDK project and initialise it using the following commands:
mkdir spa-hosting-cdk
cd spa-hosting-cdk
cdk init app --language=python
After setting up the environment we need to setup a S3 Bucket which is used to host our application using the following code inside the CDK Stack.
bucket: Bucket = Bucket(
self,
"SPA-Bucket",
website_index_document="index.html",
website_error_document="index.html",
object_ownership=ObjectOwnership.BUCKET_OWNER_ENFORCED,
block_public_access=BlockPublicAccess.BLOCK_ALL,
)
To allow CloudFront to access data inside of this bucket we need a OriginAccessIdentity and attach a resource policy to the bucket.
oia = OriginAccessIdentity(self, "WebsiteOriginAccessIdentity")
identity = oia.cloud_front_origin_access_identity_s3_canonical_user_id
bucket.add_to_resource_policy(
PolicyStatement(
actions=["s3:GetObject"],
resources=[bucket.arn_for_objects("*")],
principals=[
CanonicalUserPrincipal(
identity
)
],
)
)
Before we can deploy our SPA to the bucket we need the CloudFront Distribution.
distribution = CloudFrontWebDistribution(
self,
"WebsiteDistribution",
origin_configs=[
SourceConfiguration(
s3_origin_source=S3OriginConfig(
s3_bucket_source=bucket,
origin_access_identity=oia,
),
behaviors=[
Behavior(
is_default_behavior=True,
compress=True,
allowed_methods=CloudFrontAllowedMethods.GET_HEAD_OPTIONS,
)
],
)
],
error_configurations=[
{
"errorCode": 403,
"errorCachingMinTtl": 0,
"responseCode": 200,
"responsePagePath": "/",
},
{
"errorCode": 404,
"errorCachingMinTtl": 0,
"responseCode": 200,
"responsePagePath": "/",
},
],
)
The error_configurations part might not be needed for you, but is necessary when you want to use React Plugins like React Router or similar functions that need paths.
Last but not least we finally can distribute our Application using a BucketDeployment.
BucketDeployment(
self,
"DeployWebsite",
sources=[Source.asset("./path_to_spa")],
destination_bucket=bucket,
distribution=distribution,
)
Deployment
Once you've defined your infrastructure, you can deploy it using the CDK CLI. Run the following commands to deploy your SPA hosting stack:
cdk deploy
Conclusion: Hosting SPAs on Amazon S3 and CloudFront using the AWS CDK provides a scalable, performant, and cost-effective solution for delivering your web applications to users around the world. By defining your infrastructure as code, you can easily manage and update your hosting environment as your application evolves. Start leveraging the power of AWS CDK to host your SPAs today and provide your users with a seamless web experience.
