AWS Project: Build a Game with a Continuous Deployment Pipeline from GitHub to S3

AWS Project: Build a Game with a Continuous Deployment Pipeline from GitHub to S3 | AWS Tutorial

Рет қаралды 10,192

7 ай бұрын

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/tinytechnicaltutorials/codepipeline-s3-game
• S3 bucket policy to allow public read access to your files: docs.google.com/document/d/1Y9Vjom6lbdKdfbw672FWGJ0WVO8gbemFUMsE72LqDac/edit?usp=sharing
🌟***OTHER AWS PROJECTS YOU MIGHT ENJOY***🌟
• An end-to-end application to do simple math: kzfaq.info/get/bejne/bdOPpJSdyeDbYIk.html
• A full web application for ride sharing with unicorns (Wild Rydes): kzfaq.info/get/bejne/sNt7qJOHq8_bkac.html
• Build your online resume on AWS: kzfaq.info/get/bejne/hM9zjbaVvNvHink.html
🌟***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/aff_n20ghyn4/external?affcode=441520_lm7gzk-d
• AWS Certified Solutions Architect Associate: academy.zerotomastery.io/a/aff_464yrtnn/external?affcode=441520_lm7gzk-d
🌟***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!

Пікірлер: 104

@TinyTechnicalTutorials 7 ай бұрын

What else do you want to learn in AWS? Let me know below! 🤓🤓

@TinyTechnicalTutorials 7 ай бұрын

Hey @SAYLESSTIME! 👋 I'm not sure I'm following...a stream walk? 😊

@mortal1501 7 ай бұрын

Have you done a video on AWS Lambda. Also I am going to try the game app since I am learn Cloud Practitioner

@TinyTechnicalTutorials 7 ай бұрын

Great! 😊 Yes, you can find my Lambda video here: kzfaq.info/get/bejne/aaeiZKRz0arDhqc.html

@mortal1501 7 ай бұрын

@@TinyTechnicalTutorials thank you for the tutorials. I have to put them on a Playlist for future viewing and references.

@TinyTechnicalTutorials 7 ай бұрын

Awesome!! Enjoy! 🤓🔥

@panagiotiskaraberis1151 7 ай бұрын

excellent demo, quick , accurate , with specific instructions !! I hope all video tutorials have your philosophy !! Keep up the good work !!

@TinyTechnicalTutorials 7 ай бұрын

Thanks for the kind words, Panagiotis!! 🤓🙏🌟 I'm so glad you liked it!

@tabtubb 7 ай бұрын

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!💎✨💫

@TinyTechnicalTutorials 7 ай бұрын

Thank you for SUCH a nice comment, @tabtubb!! This made my day. 🥰🙏🌟 Really appreciate the support!

@tabtubb 7 ай бұрын

@@TinyTechnicalTutorials I'm thrilled, You're very welcome! Your content deserves all the support & appreciation. Keep shining 🌟

@premium7720 3 ай бұрын

This tutorial made my day ...thanks for explaining every single steps clearly

@TinyTechnicalTutorials 3 ай бұрын

Your comment made my day! 🥰 Thanks so much! Glad it was helpful. 🤓

@Matt6176 4 ай бұрын

Thank you for you help and quick responses! As an AWS student, having content like yours is SO valuable!

@TinyTechnicalTutorials 4 ай бұрын

You are so welcome! Thank YOU for the super thanks!!!! 🥰🙏🌟😊🔥🥰

@Matt6176 4 ай бұрын

@@TinyTechnicalTutorials My pleasure, it's the least I can do!

@sunil_thorat 7 ай бұрын

Nice explanation and easy to understand all the steps. thanks😊

@TinyTechnicalTutorials 7 ай бұрын

So nice of you! I'm glad it helped. Thanks for watching! 🙏🤓🌟

@faixan13 3 ай бұрын

awesome stuff, to the point and unique quick content. just 15 mins and I got to learn how code pipeline works.

@TinyTechnicalTutorials 3 ай бұрын

Glad it was helpful! Thanks for watching! 🙏🤓🌟

@ibmuser13 3 ай бұрын

Very nice!! Keep sharing. Appreciate it. Liked how you add a DELETE your resources section at the end of each video!!

@TinyTechnicalTutorials 3 ай бұрын

Yes, you never want a surprise bill! Thanks for watching!! 🙏🌟🤓

@mohammadfakure1440 7 ай бұрын

That was a great deployment on static websites, thanks for sharing this valuable contained

@TinyTechnicalTutorials 7 ай бұрын

Absolutely!! I'm so glad it helped! 🌟🙏🤓

@ricardohernandezmendez4207 9 күн бұрын

Thank you for this tutorial, very clear, I was able to host a static website using s3 and codePipeline.

@TinyTechnicalTutorials 2 күн бұрын

WOOHOOO!! Strong work! 🤓🔥💪

@srini580 21 күн бұрын

Thank you! Very Useful!

@TinyTechnicalTutorials 2 күн бұрын

Yay! I'm so glad it helped. Thanks for watching!! 🙏🤓🌟

@ThanujaP-is3eh 3 ай бұрын

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?

@TinyTechnicalTutorials 3 ай бұрын

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! 🙏🤓

@FIBONACCIVEGA 3 ай бұрын

I really loved you video. I still learning AWS and your Channel its one of my main resources to continue my journey . GRACIAS!!

@TinyTechnicalTutorials 3 ай бұрын

De nada!! 🙏🌟🤓

@FIBONACCIVEGA 3 ай бұрын

@@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

@emiliovillalba8231 5 ай бұрын

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

@TinyTechnicalTutorials 5 ай бұрын

Gracias por el lindo comentario. ¡Definitivamente publicaré nuevos videos en el futuro! 🥰🌟🤓

@jrossi7377 3 ай бұрын

Excellent tutorial!!!

@TinyTechnicalTutorials 3 ай бұрын

YAY!! I'm so glad it helped. Thanks for watching!! 🙏🌟🤓

@patrickhollywood93 5 ай бұрын

Very cool. Thank you :)

@TinyTechnicalTutorials 5 ай бұрын

So glad it helped! Thanks for watching! 😊🙏🌟

@ajaypatel-we3kg 5 ай бұрын

great project- thanks

@TinyTechnicalTutorials 5 ай бұрын

You bet! Thanks for watching! 😊🙏🌟

@mrb6804 7 ай бұрын

Thank you!

@TinyTechnicalTutorials 7 ай бұрын

You bet! Glad it helped! 💪🔥

@jessejfk 7 ай бұрын

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?

@TinyTechnicalTutorials 7 ай бұрын

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! 😊

@user-el7zi8oi6e 7 ай бұрын

Is there any possibilities to create videos with google could or Azure too.?Thank you for sharing your work!

@TinyTechnicalTutorials 7 ай бұрын

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!

@oba_idan 5 ай бұрын

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?

@TinyTechnicalTutorials 5 ай бұрын

Hi Baba! 👋 Thanks the kind words, and apologies for the slow response! Were you able to get this working?

@kunaljha6204 6 ай бұрын

awesome content. Could you please also make a video including build stage.

@TinyTechnicalTutorials 5 ай бұрын

Yes! Glad it was helpful! I'll add this idea to my list for future videos. Thanks for watching! 🙏🤓🌟

@erasmushesiod-tayviah5888 6 ай бұрын

😊 I love your videos

@TinyTechnicalTutorials 6 ай бұрын

Awww...thanks so much!! 🥰🙏🌟

@ndipsamuel475 27 күн бұрын

Beautiful Thank you ma

@TinyTechnicalTutorials 2 күн бұрын

You bet! Thanks for watching! 🙏🤓🌟

@dnogitsune9286 Ай бұрын

@TinyTechnicalTutorials, I have a question. How would this work if you have a backend to talk to? Can the same method be used, just with a few extra steps? Thank you for your time.

@TinyTechnicalTutorials 2 күн бұрын

Hi @dnogitsune9286! 👋 Sorry for the slow response! If you're still looking for an answer, yes, you could absolutely use this approach for an app with a backend. You'd need to modify the pipeline to add a stage for backend, and you'd also want to define the backend infrastructure in code, like with CloudFormation. For example: 1. Define Your Backend Infrastructure using CloudFormation Common backend components could include an API (hosted on AWS Lambda, EC2, or ECS), databases (RDS, DynamoDB), and other AWS services (S3, CloudFront, etc.) 2. Configure CodePipeline Modify your existing CodePipeline to include stages for deploying the backend, such as: -Source Stage: Fetch code from your source repository (GitHub, CodeCommit, etc.) -Build Stage: Use AWS CodeBuild to build both the frontend and backend code -Deploy Frontend Stage: Deploy the static website to the S3 bucket -Deploy Backend Stage: Deploy the backend using CloudFormation or other deployment services You'd probably also need to modify IAM roles/policies to ensure Code Pipeline has permissions it needs to deploy the backend. And then the usual testing, monitoring, etc. Hope that helps! 🤓

@briankepha 7 ай бұрын

OMG I love you sooo much

@TinyTechnicalTutorials 7 ай бұрын

Hahaha!!! Thanks, Brian!! 😊😄

@MisterC0434 Ай бұрын

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 !

@TinyTechnicalTutorials Ай бұрын

Yay! I'm so glad it was helpful. Thanks for watching, and welcome to the channel! 🙏🌟🤓

@MichealHolt 8 күн бұрын

Thank you for the tutorial! I followed your instructions and I saw the S3 bucket automatically pulling data from GitHub after a push. But my CloudFront didn't automatically redeploy. What could I be missing?

@TinyTechnicalTutorials 2 күн бұрын

Hi Micheal! 👋 Sorry for the slow response! Were you able to get this working? I wonder if it just needed a few minutes for the changes to propagate?

@MichealHolt Күн бұрын

@@TinyTechnicalTutorials Yes, I figured it out! CloudFront was caching the pages, so I needed to run an invalidation to remove them and pull more data from the bucket. I automated this using AWS Lambda.

@Matt6176 4 ай бұрын

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 :)

@TinyTechnicalTutorials 4 ай бұрын

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: kzfaq.info/get/bejne/aaeiZKRz0arDhqc.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: kzfaq.info/get/bejne/fbuWdLSGz6eXkWQ.html Good stuff! You got this! 💪🤓🔥 Let me know how the presentation goes!

@Matt6176 4 ай бұрын

@@TinyTechnicalTutorials THANK YOU! I'm going to build it out using your videos today. I'll let you know how it goes!☺

@TinyTechnicalTutorials 4 ай бұрын

Good luck!!! 🔥💪

@Matt6176 4 ай бұрын

@@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?

@TinyTechnicalTutorials 4 ай бұрын

Yeah, that could be. If you created it with root yesterday, then things would have automagically worked from a permissions perspective.

@aleksandarjovano1430 7 ай бұрын

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 :(

@TinyTechnicalTutorials 7 ай бұрын

Hi Aleksandar! 👋 Where in AWS is your data located? An S3 bucket? A database? Something else?

@aleksandarjovano1430 7 ай бұрын

@@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.

@user-jw2bk8ic6z 4 ай бұрын

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

@TinyTechnicalTutorials 4 ай бұрын

Hi Pandu! 👋 Did you update the S3 bucket policy to allow access? See around 05:14 in the video.

@user-jw2bk8ic6z 4 ай бұрын

yaa.. i got it.. thanks @@TinyTechnicalTutorials

@user-jw2bk8ic6z 3 ай бұрын

@@TinyTechnicalTutorials yes i updated it.. i got output. thanks for your help and quick response

@krisnaraj0058 5 ай бұрын

I am Trying to access in my Mobile Its not Working may I know what is the Reason ???

@TinyTechnicalTutorials 5 ай бұрын

Which part are you trying to access?

@felipevignatti5846 17 күн бұрын

Is anyone else having trouble getting it to run? I can only use a v2 pipeline and I think the triggers aren’t working, because the button doesn’t do anything

@landsamtube 12 күн бұрын

I have deployed it succesfully. What error are you getting?

@TinyTechnicalTutorials 2 күн бұрын

Hey Felipe! 👋 Were you able to get this working?

@rishiraj2548 7 ай бұрын

🙏👍

@TinyTechnicalTutorials 7 ай бұрын

Thank you, Rishi!! 🙏🤓🌟

@MiguelAlvarezAdams 7 ай бұрын

What a beautiful lady⚘️

@TinyTechnicalTutorials 7 ай бұрын

Ha! Thank you! 😊

@MiguelAlvarezAdams 7 ай бұрын

@@TinyTechnicalTutorials yw beautiful

@arupde6320 6 ай бұрын

be regular

@TinyTechnicalTutorials 6 ай бұрын

Okay! 🤓

@amritraj8587 4 ай бұрын

This is really amazing. I have one question. Will the game work normally after deleting the bucket and the pipeline? please reply @TinyTechnicalTutorials

@TinyTechnicalTutorials 4 ай бұрын

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.