DEV Community

Cover image for Beginner to Builder An AWeSome Cloud Journey
Eliana Lam for AWS Community On Air

Posted on

Beginner to Builder An AWeSome Cloud Journey

Speaker: Ace Kenneth Batacandulo @ AWS Community Day Hong Kong 2025

Summary by Amazon Nova

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 theAccess-Control-Allow-Originheader 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.



Team:

AWS FSI Customer Acceleration Hong Kong

AWS Amarathon Fan Club

AWS Community Builder Hong Kong

Top comments (0)