Personal website deployment on AWS

Background

In this project I will be using AWS services to deploy my personal website, register my website domain and allow contact me form to send emails to my account whenever someone wishes to get In Contact with me through the website.

Services used

• AWS S3 Bucket
• AWS Route 53
• AWS API Gateway
• AWS SNS
• AWS ACM
• AWS Lambda
• AWS Cloudfront

Procedure/Steps

Static file submission to AWS

Task 1: Static website preparation

The first task on this project required preparation of the static file to be deployed. I downloaded a free template from Bootstrapmade called iportfolio. The template is free to use if the credit link is not removed. I modified the template to fit my taste and to represent my details.

Task 2: AWS S3 bucket

In this task I created an AWS S3 Bucket to host the static website. You can use the CLI or the console to create an S3 Bucket. I used the console to create the s3 bucket and named it “portfolio”; after creating the bucket I clicked on it and went to properties to enable static website hosting. I then used the index.html as the home/default page.versioning is enabled for when i upload updates in the bucket.

I uploaded the template folder in the s3 bucket named portfolio. A link was then given to access the site, but I had to enable public access. The steps to enable public access included heading to the permissions tab to disable “block all public access” then followed by setting up a bucket policy using the policy generator.

Task 3: caching cloudfront

I used cloudfront to enable https for accessing this website.

Handling Contact me form

The portfolio template includes a “contact me” form, the following tasks were done to ensure its operability. How this will work is that; the user will submit the form with a message. Once the form is submitted, AWS API gateway will pick up the message and pass the collected message to AWS lambda function for processing. AWS lambda will process the message and use AWS SNS to send the message to my email.

Task 1: Lambda creation

I created a lambda function and gave it a name. I then compiled a code(below figure) to send the email using SNS. The created service was tested after the creation of the AWS SNS subscription setup.

Task 2:SNS creation

I created an sns and provided a name for it, this was followed buy an email subscription and using the ARN topic. After the creation of the subscription, I then registered my email and verified the email.

Task 3: API gateway creation

Following steps were followed to create the API gateway: Opened the API gateway console, I then selected create API followed by REST, under new API gave it a name. The next step is to create a resource, then a method type by choosing POST under method. I chose lambda under integration type. This was then deployed and I noted the URL given and wrote it on the HTML. I then enabled CORS.

Domain registration

Task 1: Route 53 and AWS ACM

I created my domain using route 53 and used it as the DNS service. After creating my domain name and setting route 53 as the DNS service I then requested a public certificate from AWS ACM. The final step to this step required me to go back to cloudfront to redirect HTTP to HTTPS and to use the certificate made for secure connection.

Task 2: Direct domain to S3 bucket static file

Finally, I returned to route 53 to create a record, the aim for this is to use the domain registered above.

Final thoughts/Conclusion

The deployment of this static website was an interesting introduction to AWS services since going through the services through a course that I bought on udemy by Stéphane Maarek. This showed me how I could use different service to come together to create an app. There were some challenges experienced and troubleshooting that I had to go through, such as writing the code for the AWS lambda to communicate with SNS.