Beginner to Builder: An Awesome Cloud Journey

Recording

https://www.youtube.com/watch?v=Rs0yu_fEgFQ

Personal Background

• Shared your journey with AWS:
• Started in 2023 with no prior knowledge of cloud computing.
• Joined the AWS User Group Philippines and became part of the AWS Creatives team.
• Used AWS to deploy services, run code, and build projects.
• Became a cloud consultant, community lead at the AWS User Group Philippines, AWS Community Builder, and certified cloud practitioner within 6 months.

AWS User Group Philippines

• Described your role as a meetup lead:
• Conduct monthly seminars and webinars for free, targeting students, career shifters, and young professionals.
• Host various events to promote learning and community engagement.

Becoming an AWS Community Builder

• Shared personal journey:
• Approached AWS with no technical background, coming from a UI/UX design background.
• I learned about AWS through community resources.
• Within 6 months, wrote an article on creating different applications using AWS and applied to become an AWS Community Builder.

Resources and Collaboration

• [ 1 ] Encouraged attendees to provide feedback and collaborate:
• Invited attendees to fill out a feedback form.
• Provided a QR code for a pre-AWS practice exam from Tutorials Dojo.
• [ 2 ] Offered free practice exam resources:
• Announced that attendees would receive a voucher for a free practice exam from Tutorials Dojo.
• Aimed to help attendees prepare for the AWS Cloud Practitioner or SAA exams.

Conclusion

• Expressed hope that attendees would find the session valuable and take advantage of the provided resources.
• Encouraged further engagement and collaboration within the AWS community.

Creating a Python Code Playground with AWS Lambda and CORS

Objective

• Create a Python code playground where users can execute Python code via a web interface.

Architecture

• Frontend: Website running on Amazon EC2.
• Backend: AWS Lambda function to execute Python code.

Steps to Create the Python Code Playground

[ 1 ] Create an AWS Lambda Function

• Go to the AWS Management Console.
• Navigate to Lambda and click Create function.
• Choose an Author from scratch.
• Name your function (e.g.,UG_HK_PythonCodePlayground).
• Select Python as the runtime.
• Create a new execution role with basic Lambda permissions.

[ 2 ] Configure Function URL with CORS

• In the Lambda function configuration, go to the Function URL.
• Enable the function URL.
• Configure CORS by adding the following headers:
• Expose Headers: Content-Type
• Allow Headers: Content-Type
• Optionally, set Max Age for caching.

[ 3 ] Write and Deploy Lambda Function Code

• Write your Python code in the Lambda function editor.
• Save and deploy the function.

[ 4 ] Create the Frontend (HTML File)

• Open Visual Studio Code.
• Create an HTML file for the frontend.
• Copy the function URL from the Lambda configuration.
• Use the function URL in your HTML file to fetch and execute the Lambda function.

[ 5 ] Test the Setup

• Ensure CORS is correctly configured to allow the frontend to communicate with the Lambda function.
• Run a test to execute Python code via the web interface.

Key Points

• CORS Configuration: Essential for allowing the frontend to communicate with the Lambda function.
• Function URL: Provides a direct HTTP(S) endpoint for the Lambda function.
• Testing: Verify that the Python code executes correctly and the results are fetched by the frontend.

Conclusion

• The Python code playground allows users to execute Python code through a web interface, leveraging AWS Lambda for backend execution and Amazon EC2 for the frontend.

Troubleshooting Steps

[ 1 ] HTTP Error

• Encountered an HTTP error when running the code.
• Checked the network tab in the browser's developer tools to identify the issue.

[ 2 ] CORS Misconfiguration

• Identified that the

Access-Control-Allow-Origin

header was set to false

• Corrected the CORS configuration by ensuring the Allow Origin header was properly set.

[ 3 ] Verifying CORS Configuration

• Used the browser's developer tools to inspect the network requests.
• Observed two types of requests:
• Preflight Request: Browser checks with the server to see if cross-origin requests are allowed.
• Actual Request (PATCH): Retrieves data from the server after the preflight request confirms the CORS settings are correct.

[ 4 ] Final Test

• Ran the code again after correcting the CORS configuration.
• Verified that the Python code executed successfully and the results were fetched by the frontend.

Conclusion

• The Python code playground now allows users to execute Python code through a web interface, leveraging AWS Lambda for backend execution and Amazon EC2 for the frontend.
• Proper CORS configuration is crucial for the frontend to communicate with the Lambda function.

Python Code Playground Recap

• Demonstrated how to create a Python code playground using AWS Lambda with a function URL.
• Configured CORS to allow the Lambda function to be accessible from different websites without cross-origin issues.
• Ensured that the necessary requests and responses between different origins are allowed by the browser.
• Highlighted the importance of CORS settings for secure communication between Lambda resources and external websites.