AWS Project: Build a Game with a Continuous Deployment Pipeline from GitHub to S3 | AWS Tutorial
Vložit
- čas přidán 2. 06. 2024
- AWS CodePipeline automates building, testing and deploying your projects. Just choose where your code lives, say where you want it to be deployed to, and-MAGIC!-CodePipeline makes it happen.
In this hands-on tutorial, we’ll build a simple memory card game (using memes, no less!) using HTML, JavaScript and CSS. The code will live in GitHub (you can fork the repo provided). We’ll then create and configure an S3 bucket for static website hosting. And from there, we’ll create a CodePipeline that pulls from GitHub and deploys to the S3 bucket.
At the end, I’ll walk you through how to delete the resources (which should all be eligible for the Free Tier).
🌟***CODE AND RESOURCES USED IN THE VIDEO***🌟
• GitHub repository (fork this to your own repo): github.com/tinytechnicaltutor...
• S3 bucket policy to allow public read access to your files: docs.google.com/document/d/1Y...
🌟***OTHER AWS PROJECTS YOU MIGHT ENJOY***🌟
• An end-to-end application to do simple math: • AWS Project: Architect...
• A full web application for ride sharing with unicorns (Wild Rydes): • AWS Portfolio Project:...
• Build your online resume on AWS: • AWS Project: Build a R...
🌟***MY AWS COURSES***🌟
If you’re interested in getting AWS certifications, check out these full courses. They include lots of hands-on demos, quizzes and full practice exams. Use FRIENDS10 for a 10% discount!
• AWS Certified Cloud Practitioner: academy.zerotomastery.io/a/af...
• AWS Certified Solutions Architect Associate: academy.zerotomastery.io/a/af...
🌟***TIMESTAMPS***🌟
00:00 - A preview of the completed game - a meme matching memory card game!
00:30 - Reviewing the code files - HTML, CSS, JavaScript and images
01:15 - A high-level look at the pipeline we’re building
02:10 - How much will this cost me?
02:40 - Forking the GitHub repository to get the game code
03:18 - Creating and configuring an S3 bucket for static website hosting
06:10 - Creating a new pipeline in AWS CodePipeline
07:12 - Connecting to GitHub from CodePipeline
10:13 - Monitoring the progress of the source and deploy stages of CodePipeline
10:30 - Testing that the static website is working on S3
11:16 - Committing a code change in GitHub and triggering CodePipeline
13:00 - IMPORTANT!! Delete your resources!
14:25 - Check out there other hands-on AWS projects for more practice! - Věda a technologie
What else do you want to learn in AWS? Let me know below! 🤓🤓
Hey @SAYLESSTIME! 👋 I'm not sure I'm following...a stream walk? 😊
Have you done a video on AWS Lambda. Also I am going to try the game app since I am learn Cloud Practitioner
Great! 😊 Yes, you can find my Lambda video here: czcams.com/video/3Ar1ABlD_Vs/video.html
@@TinyTechnicalTutorials thank you for the tutorials. I have to put them on a Playlist for future viewing and references.
Awesome!! Enjoy! 🤓🔥
excellent demo, quick , accurate , with specific instructions !! I hope all video tutorials have your philosophy !!
Keep up the good work !!
Thanks for the kind words, Panagiotis!! 🤓🙏🌟 I'm so glad you liked it!
Thank you for you help and quick responses! As an AWS student, having content like yours is SO valuable!
You are so welcome! Thank YOU for the super thanks!!!! 🥰🙏🌟😊🔥🥰
@@TinyTechnicalTutorials My pleasure, it's the least I can do!
Your project videos are absolute gems! 🙏🏾🙏🏾Thanks for creating such a unique content that sets your channel apart from the rest. Your dedication and expertise shines through in every video. Keep up the fantastic work!💎✨💫
Thank you for SUCH a nice comment, @tabtubb!! This made my day. 🥰🙏🌟 Really appreciate the support!
@@TinyTechnicalTutorials I'm thrilled, You're very welcome! Your content deserves all the support & appreciation. Keep shining 🌟
Nice explanation and easy to understand all the steps. thanks😊
So nice of you! I'm glad it helped. Thanks for watching! 🙏🤓🌟
This tutorial made my day ...thanks for explaining every single steps clearly
Your comment made my day! 🥰 Thanks so much! Glad it was helpful. 🤓
awesome stuff, to the point and unique quick content. just 15 mins and I got to learn how code pipeline works.
Glad it was helpful! Thanks for watching! 🙏🤓🌟
Very nice!! Keep sharing. Appreciate it. Liked how you add a DELETE your resources section at the end of each video!!
Yes, you never want a surprise bill! Thanks for watching!! 🙏🌟🤓
That was a great deployment on static websites, thanks for sharing this valuable contained
Absolutely!! I'm so glad it helped! 🌟🙏🤓
I really loved you video. I still learning AWS and your Channel its one of my main resources to continue my journey . GRACIAS!!
De nada!! 🙏🌟🤓
@@TinyTechnicalTutorials thanking you first I still struggling with the console environment of AWS. I can't run it and im not sure why. I triyed different solutions but I can't fix it
I really appreciate how your videos are helping me understand concepts. The explanations are clear and concise. Keep up the great work!
Could you please consider doing more projects centered around Ansible and CI/CD pipelines, particularly involving technologies such as Jenkins, Kubernetes, and Docker?
Great to hear! I'm so glad you like the videos. I'll add these topics to my list for future videos...thanks for the suggestions! 🙏🤓
Excellent tutorial!!!
YAY!! I'm so glad it helped. Thanks for watching!! 🙏🌟🤓
Muchas gracias Tiny por este laboratorio simples y práctico, esperamos que sigas subiendo mas laboratorios, de preferencia que utilice recursos relacionadas a redes. Saludos
Gracias por el lindo comentario. ¡Definitivamente publicaré nuevos videos en el futuro! 🥰🌟🤓
Very cool. Thank you :)
So glad it helped! Thanks for watching! 😊🙏🌟
Thanks for the tutorial Amber. I followed your tutorial on deploying a static resume website. I had a similar idea to this video, but applying that to my resume. My idea of this was having a way to just update the code of my resume without having to manually add and delete the html, css, JS files each time.
Could you possibly make a tutorial on how to make a continuous deployment infrastructure using the pipeline for the resume website?
Hi Jesse! 👋 I'm glad the videos are helpful! I love this idea...so taking the resume, and putting it in GitHub, then setting up the pipeline so you don't have to manually update the files. I'll add this to my list for future videos! 😊
great project- thanks
You bet! Thanks for watching! 😊🙏🌟
Is there any possibilities to create videos with google could or Azure too.?Thank you for sharing your work!
Hi Arsilda! 👋 Thank YOU for watching my work! 😊 I've had a few people request Azure and GCP content. I've added it to my list for future ideas...if I get enough "votes," then I definitely will!
Very well done AMber. Thanks for all that you do for the cloud community. By the time I finished my project, my game is showing just 8 pictures, and I checked the js file and css file, everything seems to be in order. What do you think could be responsible?
Hi Baba! 👋 Thanks the kind words, and apologies for the slow response! Were you able to get this working?
Thank you!
You bet! Glad it helped! 💪🔥
😊 I love your videos
Awww...thanks so much!! 🥰🙏🌟
OMG I love you sooo much
Hahaha!!! Thanks, Brian!! 😊😄
awesome content. Could you please also make a video including build stage.
Yes! Glad it was helpful! I'll add this idea to my list for future videos. Thanks for watching! 🙏🤓🌟
Thank you so much ! You just got a subscriber ! Can you please tell me how to add more images? Never mind I found how to add new pictures. Thank you so much again !
I am an AWS student and LOVE your channel and the way you teach. Thank you for what you do!
I have a demo coming up and completed this project earlier, but need to present for 30 minutes, followed by a 30 minute Q&A session, so I worry this alone may be too short for that.
With that said, in theory, could I make this project and incorporate a Lambda function to resize images as they are added to the source files in the S3 bucket? That way all of the pics fit the memory cards as they should.
Also, could I set up SQS/SNS to notify for something in the project? Maybe when something has been added and successfully resized? Just to show event driven architecture as well?
Thoughts?
Again, thank you! I love your channel and will be sure to share it with my classmates...after the project of course :)
Thanks for the kind words, Matt!! I love that you're getting so much from the channel. 🥰🙏
I really like the idea of incorporating Lambda. You could talk about serverless and its benefits. If you need it, I've got a "Lambda for beginners" video here that walks through how to set up a trigger with S3, which you'll need: czcams.com/video/3Ar1ABlD_Vs/video.html.
For the notifications piece, you can publish a message to SNS from Lambda, so yeah, maybe when the Lambda function is done resizing. Here's some info on that: repost.aws/knowledge-center/sns-topic-lambda.
If you wanted to fill a little more time, you could also set up CloudFront to point to the S3 bucket. It'll be hard to see a performance difference with such a simple site, but you could talk about how it uses caching to get content to users faster. Here's a beginner video for that if you need it: czcams.com/video/GUfAQUjA3a0/video.html
Good stuff! You got this! 💪🤓🔥 Let me know how the presentation goes!
@@TinyTechnicalTutorials THANK YOU! I'm going to build it out using your videos today. I'll let you know how it goes!☺
Good luck!!! 🔥💪
@@TinyTechnicalTutorials Thank you! I just re-created the game, but this time I had to attach a Codestar customer managed IAM policy to my user, which I didn't have to do yesterday. Is that because I may have made yesterday's game using my root account?
Yeah, that could be. If you created it with root yesterday, then things would have automagically worked from a permissions perspective.
I'm making my own app that I want to connect with AWS (to fetch data) but just can't do it. Is there any way that you can help me with this?
I don't know how to contact you directly :(
Hi Aleksandar! 👋 Where in AWS is your data located? An S3 bucket? A database? Something else?
@@TinyTechnicalTutorials Thank you for response! At the moment, my application primarily interested in specifically for Amazon product listings and ad optimization. I'm in the process of considering how to integrate with the Amazon Ads API to fetch advertising data directly into my application. However, I'm facing challenges in establishing this connection effectively. Any guidance or insights you could provide on this would be incredibly helpful. Additionally, I haven't yet integrated a database for storing application data like user profiles, product details, or historical SEO content. As my app develops, I'm evaluating the need for either a relational database (possibly with Amazon RDS) or a non-relational database (like Amazon DynamoDB), depending on the nature of data storage required in the future.
I'm cautious about discussing the specifics of my application publicly, but I'd be eager to share more details with you privately. As an expert in digital marketing with beginner-level development skills, I have an exciting app idea related to this field. If you're open to it, I'd love to connect directly and discuss this project in more depth.
I have one doubt after creating pipeline it is showing success but when i go to bucket website hosting when i am opening the link i cannot get output.. it is saying that access denied some thing like that.. can you plz tell me why it is coming likethat
Hi Pandu! 👋 Did you update the S3 bucket policy to allow access? See around 05:14 in the video.
yaa.. i got it.. thanks @@TinyTechnicalTutorials
@@TinyTechnicalTutorials yes i updated it.. i got output. thanks for your help and quick response
I am Trying to access in my Mobile Its not Working may I know what is the Reason ???
Which part are you trying to access?
🙏👍
Thank you, Rishi!! 🙏🤓🌟
What a beautiful lady⚘️
Ha! Thank you! 😊
@@TinyTechnicalTutorials yw beautiful
be regular
Okay! 🤓
This is really amazing. I have one question. Will the game work normally after deleting the bucket and the pipeline? please reply @TinyTechnicalTutorials
Thanks for watching, Amrit! 🤓 It won't work after deleting the bucket (since it contains the code files). But you should be able to delete the pipeline.