dillonboatman.com

My First AWS Deployment

· 4 min read
aws cloudfront s3 route53 acm astro

Deploying My Astro Site in AWS

In this post, I’ll share my experience deploying my Astro site using various AWS services. I chose AWS solely for the purpose of learning and exploring its capabilities. Here’s a step-by-step guide to how I did it. The key technologies I used include:

Step 1: Setting Up an S3 Bucket

Since Astro generates static files, I decided to host these files in an S3 bucket. To facilitate this, I created a new general purpose S3 bucket in the AWS Management Console. Since I am going to use CloudFront to serve my content, I made sure to disable the “Block all public access” setting for the bucket. This allows CloudFront to access the files in the bucket and serve them to users. I left everything else at the default settings.

Step 2: Uploading Astro Files to S3

After building my Astro site locally, I uploaded the generated static file directory to the S3 bucket. Since i’m new to AWS, I simply uploaded the files using the AWS Management Console. However, in my next project, I plan to automate this process.

Step 3: Setting Up CloudFront

Next, I created a new CloudFront distribution to serve my static files. Since they’re coming from an S3 bucket, I selected S3 as the origin type and specified the bucket I created earlier as the origin. I left all other settings at their defaults for now, but I plan to explore more advanced configurations in the future.

CloudFront provides a custom domain for this distribution, so my next step was to ensure i can access my site using this domain.

Step 5: Configuring DNS

CloudFront provides a domain name for the distribution, but I wanted to use my personal domain instead. My current DNS provider is GoDaddy, but I didn’t want to manage my DNS records there. I had a few options for managing my DNS records in AWS, including transferring my domain or simply telling GoDaddy to use AWS’s name servers. I chose the latter option for simplicity.

I went to Route 53 and created a new hosted zone for my domain. Then, I updated the name servers in GoDaddy to point to the ones provided by Route 53.

Next, I created a few two alias A records in Route 53 to point to my root domain and the www subdomain. The beauty of using alias records is that they can point directly to AWS resources. In this case, I pointed both records to my CloudFront distribution. This way, when users access either my root domain or the www subdomain, they will be directed to the CloudFront distribution, which will serve the content from my S3 bucket.

Step 6: Setting Up Certs with AWS Certificate Manager

To ensure that my site is secure and can be accessed over HTTPS, I used AWS Certificate Manager to request a new SSL/TLS certificate for my domain. I followed the prompts to validate ownership of the domain, which involved adding a CNAME record to my Route 53 hosted zone. Once the certificate was issued, I went back to my CloudFront distribution and updated the settings to use the new certificate for HTTPS connections.

Step 7: Adding My Custom Domain to CloudFront

Finally, I went back to my CloudFront distribution and added my custom domain (both the root domain and the www subdomain) to the distribution settings. This ensures that when users access my site using either of these domains, they will be directed to the CloudFront distribution, which will serve the content from my S3 bucket.

Conclusion

Overall, this was a great learning experience for me. I now have a better understanding of how to use AWS services to host and serve a static website. While there were some challenges along the way, I was able to successfully deploy my Astro site using AWS. In the future, I plan to explore more advanced configurations and optimizations to further improve the performance and security of my site.