Haiyue Yuan
DevOps Enthusiast | AWS Certified DevOps Engineer – Professional
My Website: https://hi-yyuan.com/
Source Code: https://github.com/dadadei/yuan-aws-website
Introduction
Hey there! 👋 I'm Haiyue Yuan, and I'm thrilled to share my adventure with the Cloud Resume Challenge. This project was a rollercoaster ride, packed with learning, challenges, and a whole lot of fun. Join me on this journey into the world of cloud computing!
The Challenge Outline 📝
The Cloud Resume Challenge, created by Forrest Brazeal, is designed to give newcomers practical experience with cloud technologies. It's like a treasure map leading to the ultimate cloud skills. The challenge is broken down into several steps:
- Certification
- Frontend
- Backend API
- Integration and Testing
- Automation and CI/CD
I tackled each step head-on, learning and growing along the way. To push myself even further, I decided to add a new feature: a dynamic contact form. Let’s dive into my experiences with each part of the challenge.
Certification 🎓
Before diving into the challenge, it's recommended to get the AWS Cloud Practitioner certification. Lucky for me, I already had the AWS Certified DevOps Engineer – Professional certification under my belt. _💪 This foundation made me feel prepared to take on the Cloud Resume Challenge.
Frontend Development 🌐
Technologies Used:
- HTML
- CSS (with Bootstrap)
- Figma
- Amazon S3
- Amazon CloudFront
- Amazon Route 53
Although I had some familiarity with S3, CloudFront, and Route 53, my frontend development skills needed some brushing up. So, I dived into YouTube on HTML and CSS to get the basics down. Additionally, I used Figma to design a sample HTML file, which helped me visualize the layout and structure of my resume before implementing it.
Steps Involved:
- Create an S3 Bucket: Used the static website hosting option to store my web files.
- Configure CloudFront: Linked it to my S3 bucket, enforced HTTPS, and attached a TLS certificate.
- Setup Route 53: Purchased a domain name, pointed it to the CloudFront distribution, and created a DNS Hosted Zone for my records.
And voila! My website was live and accessible over HTTPS with my custom domain. 🎉
Backend API 🔄
Technologies Used:
- Amazon DynamoDB
- AWS Lambda
- Amazon API Gateway
- JavaScript
The goal here was to create a visitor counter displayed on the webpage, updating with each new visitor.
Steps Involved:
- Create a DynamoDB Table: Stored the visitor count.
- Develop Lambda Function: Wrote a Python function to update and retrieve the visitor count from DynamoDB.
- Setup API Gateway: Created a REST API with resources for the visitor counter.
Challenges Faced:
CloudFront Not Updating: My CloudFront distribution didn't immediately reflect updates made to files in S3. This required me to manually invalidate the CloudFront cache, ensuring the latest version of my site was served.
Solution:
https://stackoverflow.com/questions/30154461/aws-cloudfront-not-updating-on-update-of-files-in-s3CSS with Bootstrap: Styling the website to be both responsive and visually appealing was a learning curve. I spent considerable time tweaking CSS to make everything look just right.
Solution:
https://www.youtube.com/watch?v=-qfEOE4vtxE&ab_channel=freeCodeCamp.orgLearning JavaScript: To fetch and display the visitor count on the webpage.
Solution:
https://www.youtube.com/watch?v=WTHrtiMEjk0&ab_channel=WebDevTutorialsTesting the API: Debugging issues with CORS and API implementation using Postman and Cypress.
Solution:
https://zguyun.com/blog/how-to-test-cors-with-postman/Visitor Counter Issue: The visitor counter would always be blank when I would repeatedly visit my webpage. It took a lot of debugging to finally get it to display the visitor count correctly.
Solution:
https://stackoverflow.com/questions/72441203/why-is-the-view-counter-showing-undefined
After many hours of testing and debugging, seeing the visitor count update on my webpage was incredibly satisfying. 🙌
Integration and Testing 🧪
Integration and testing were crucial to ensure everything worked seamlessly. CORS issues were particularly challenging, but I learned a lot about API headers and debugging techniques. This part of the project was a true test of patience and persistence.
Steps and Challenges:
Debugging CORS Issues: Initially, my API calls failed due to CORS restrictions. This required deep dives into API Gateway settings and understanding how to configure CORS properly. I spent a good amount of time learning about HTTP headers and how they affect cross-origin requests.
Solution:
https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.htmlUsing Postman and Cypress: These tools became my best friends. Postman helped me test and debug API endpoints individually, while Cypress was used to automate the testing of my entire frontend. Setting up tests that mimicked user interactions with the site was both challenging and rewarding.
Solution:
https://www.youtube.com/watch?v=zWO1-XkhaRw&ab_channel=SDET-QAContinuous Testing: Every change meant running tests repeatedly to ensure nothing broke. This iterative process taught me the importance of automated testing in maintaining a reliable application. I set up scripts to run my tests with every new deployment, which saved me a lot of manual testing time.
Solution:
https://www.youtube.com/watch?v=R8_veQiYBjI&ab_channel=TechWorldwithNanaTracking with Jira: Throughout the project, I used Jira to track my progress and report bugs. This helped me stay organized and focused, ensuring I didn't miss any critical steps or issues.
Solution:
https://www.atlassian.com/software/jira/guides/getting-started/basics#step-2-pick-a-template
Lessons Learned:
- Patience and Persistence: Debugging CORS and API issues taught me the value of patience and thorough testing.
- Testing Tools: Using Postman and Cypress was invaluable for testing and validating my APIs, ensuring everything worked as expected before deploying changes.
- Project Management: Using Jira for tracking and bug reporting kept me on track and organized, which was crucial for managing such a multifaceted project.
Automation and CI/CD 🚀
Technologies Used:
- Terraform
- GitHub Actions
This part of the challenge was both the most enlightening and the most challenging. Automating deployments and managing infrastructure as code were entirely new concepts for me, but they have now become some of the most valuable skills I’ve gained.
Steps Involved:
Learning Terraform: I spent around 16 hours going through tutorials and documentation to get a solid understanding of Terraform. Writing infrastructure as code (IaC) to manage my AWS resources was a game-changer. Instead of manually creating and managing resources through the AWS console, I could now define my entire infrastructure in code and deploy it with a single command.
Creating Terraform Configurations: I created separate Terraform configurations for my frontend and backend resources. This included S3 buckets, CloudFront distributions, API Gateway, DynamoDB tables, and Lambda functions. The process was iterative – I often had to destroy and recreate resources to fix configuration issues.
Setting Up CI/CD Pipelines: Using GitHub Actions, I set up workflows to automate the deployment process. One workflow handled the frontend, updating the S3 bucket with new website files whenever I pushed changes to my GitHub repository. Another workflow managed the backend, deploying updated Lambda functions and API Gateway configurations.
Challenges Faced:
Infrastructure as Code: Learning Terraform was like learning a new language. There were times when I had to completely rewrite my configurations because of a small mistake. However, the more I used it, the more I appreciated its power and flexibility.
Solution:
https://www.youtube.com/watch?v=7xngnjfIlK4&ab_channel=DevOpsDirectiveCI/CD Pipelines: Setting up GitHub Actions was straightforward, but making sure the workflows ran smoothly was another story. I had to debug several issues related to permissions and environment variables. Automating the deployment of my infrastructure saved me countless hours and ensured consistency across deployments.
Solution:
https://github.blog/2022-02-02-build-ci-cd-pipeline-github-actions-four-steps/Email Integration with SES: As part of the dynamic contact form, I integrated Amazon SES (Simple Email Service) to handle email submissions. This was a new challenge as I had to ensure the emails were sent correctly from my Lambda function, which required setting up proper IAM permissions and SES configurations.
Solution:
https://www.youtube.com/watch?v=LhkXP9Oli7U&ab_channel=Coderjony
Lessons Learned:
- Infrastructure as Code: Gaining a deep understanding of AWS resources by configuring them with Terraform was immensely rewarding. It made managing my cloud infrastructure efficient and scalable.
- CI/CD Pipelines: Automating deployments with GitHub Actions streamlined my development process, making it easier to deploy changes confidently and quickly.
- Email Integration: Implementing Amazon SES for email functionality expanded my knowledge of AWS services and their integration.
Reflections and Takeaways 🌟
Final Thoughts:
- Holistic Learning: This challenge pushed me to learn a wide range of skills, from frontend development to backend integration and automation.
- Resilience: The non-linear nature of the challenge required constant learning and adaptation.
- Career Growth: The skills gained here are invaluable for my journey as a DevOps engineer.
If you’re new to cloud computing or looking to sharpen your skills, I highly recommend the Cloud Resume Challenge. It’s a rewarding experience that bridges the gap between theoretical knowledge and practical implementation. If you have any project recommendations or just want to chat, feel free to reach out! 😊
Contact 📱
Feel free to connect with me on LinkedIn or check out my GitHub for more of my projects.
This journey has been a rollercoaster of learning, and I’m excited to continue exploring the world of cloud computing and DevOps. Thanks for reading! 🤘
Top comments (0)