Code Your Own Heroku Clone with Python – Provision Infrastructure Programmatically Tutorial

Key Takeaways

hi i'm beau carnes with free code camp in this course i will teach you how to create a very simplified heroku clone this course is really all about how to provision infrastructure programmatically heroku is a platform as a service that allows developers to build run and operate applications entirely in the cloud heroku makes it easy to do things such as deploy virtual machines to host applications and to deploy websites into the cloud some of the things that heroku offers can actually be done pretty easily with other tools in this course i will teach you how to develop a simple web app that will allow users to provision virtual machines and deploy static web apps all at the click of a button and hosted on amazon web services so this is what the heroku clone is going to look like like i mentioned it's very simplified it just has two options to deploy your own static website or set up a virtual machine for development and testing so let me just show you what this looks like so you're here and it's going to show a list of the sites these are ones that have already been created we can also create a new site where you can put in the name and then you can put in a url where it'll get that html code right from that url or you can type in your own html and then when you click create it will create that site it'll deploy it right to aws and then i'll tell you about what some of these like the view and console tell you about that later in the actual course but and then clicking the links here will actually open up the sites again you'll see that more in the actual course let me just show you what it looks like when you create the virtual machine so here we can create a virtual machine and then you can create choose the instance type and with the virtual machine you're always going to have a public key this is a way that it can be authenticated after you after the virtual machine is deployed to aws we can ssh into that but we need to authenticate it with our private key so those are all the features you're going to be able to deploy and destroy delete the these things right from aws so right from this web interface we'll be able to create the virtual machine on the site and also we can delete the virtual machines and the websites all from our web interface we don't even have to log into aws to do any of that stuff and then also i'll show you how to make a javascript version of one section of this at the very end of the course provisioning infrastructure is related to platform engineering a platform engineering team serves an organization by planning designing and managing its cloud platforms and often this can be done programmatically the tools i teach in this course can be used for much more than just provisioning vms and deploying websites they can be used for platform engineering to make it simpler to manage cloud platforms this course focuses on the automation api from pollumi paloomi provided free codecamp a grant that made this course possible pollumi's open source infrastructure as code stk allows you to create deploy and manage infrastructure on any cloud using a variety of programming languages their automation api makes it possible to provision infrastructure programmatically using the pollumi engine basically it makes it simple to write a program that automatically creates vms databases vpcs static websites and more on a variety of different cloud platforms i'm going to show you how to create our heroku clone web app using flask and python on the back end however you don't already have to know how to use flask and python to follow along also everything i show you could also be done with many other different frameworks and programming languages and many of the steps are the same no matter what web framework you use our app will provision resources on aws but pollumi makes it simple to provision resources on most of the major cloud providers and it wouldn't take that much updating to the code to use a different provider thanks to kamal ali who created the code that my code in this course is based off of so let's start making the application by the way at the end i'll also show you how to use the automation api to provision infrastructure using javascript so you can see how it's different between javascript and python and also see how it's very similar so let's start setting everything up i've already created a directory on my computer called herokul which is where we're going to be creating the project we first need to make sure that we have the plumi cli installed the way to install is different depending on your operating system if you have mac os you can just do brew install pollumi and if you have windows you can do choco install pallumi both those assume that you either have home brew or chocolaty installed check the link in the description for other ways of installing pollumi now this project also uses aws so you'll have to make sure you have an aws account and you have the cli set up and authenticated you can sign up for a free aws account at the link in i have a link in the description that will show you how to sign up for a free aws account and then there's another link that shows you how to install the aws cli it's going to be different depending on your operating system once you have the aws cli installed you can configure it by just doing aws configure and then the first thing you're going to have to do is put in your aw access key again i'm going to put a link in the description to how you do that because amazon has some very specific instructions on how to get an aws access key but once you have the access key you can enter it you can enter the secret access key and then you can choose your default region name i'm just going to keep it as the default here which is aws the us region 2 default output format you may just want to keep all those the same and after that's configured it's time to set up the paloomi project a plumi project is just a directory with some files in it it's possible for you to create a new one by hand or you can use the plumy new command so that's what we're going to do do paloomy new this is using the plumy cli okay says please choose a template or mine does if this is the first time you've used polumi you'll be directed to enter an access code or log in so it's going to give you a url to go to and you may have to make a plumi account but once you enter the access code you'll see this where it says please choose a template so we're going to choose aws python we're going to be creating a python app that hosts resources on aws and then we can choose things like the project name i'm going to do hero cool okay it looks like it doesn't exist because i've already it's associated with my pollumi account and i've already created a project with that name for a test so i'm going to create a another i'm going to just call it something else even though we know that it's supposed to be called hero cool so how about row cool 2 okay and then you can just pick the defaults for this stack i'm going to keep the default it's going to initialize into a new stack called dev which is an instance of our project every plumi program is deployed to a stack a stack is an isolated independently configurable instance of a plumi program stacks are commonly used to denote different phases of development in this case we're using dev so i'm just going to use that and then we can choose the aws region to imp to deploy to now keep in mind this is actually different than the default we said before and this is the one that's actually going to be used us east one and now you can see it's creating the virtual environment okay installed a bunch of libraries we're going to need into our virtual environment but we're going to need a few more so i'm going to do so first i'll just list here you can see we created the plumi.yaml file that's used to configure everything the main.pi file which is where our main python code is going to go the requirements.txt which tells us our dependencies and then the vnv directory this is our virtual environment and we are going to run a program in the virtual environment so normally when you're installing python dependencies you use the program pip but i'm going to make sure to run the program pip from our virtual environment so i'm going to do vnv dot slash bin slash pip and then i'm going to install flask and requests so these are two dependencies so we were making a flask app and the requests library will allow us to make http requests so after we get everything installed in our terminal i'm going to open up this folder in visual studio code okay so here's everything in visual studio code it has all the files i mentioned such as our configuration file plumi.yaml the requirements and then the main.pi this is where our main python code is going to go and you can see it installed some it put in some default code here we're going to end up changing most of this so we're going to start off by actually changing the name of this file to app.pi uh it's common for flask to be to be looking for a file called app.pi for the flask app so like i said we're gonna get rid of this code we're going to eventually use some code similar to this but for now i'm going to paste in some code here and i'll even i'll zoom in just a little bit more so this is how to create the most basic flask app you can create and so you're importing flask the app is going to be flasked with the name and uh so this is how you create a route in flask you do that the at app that's the app here and then the route is just going to be the default route slash and this is going to it's going to basically just when you go to this route with just a slash at the end it's going to run this function it's going to return hello world and so let's just test this out right now i'm going to save this and then i'm going to and then i'm going to create a new terminal window and then i'm going to just do vnv slash ben slash flask run okay it's giving me a url to go to so i will just control click here okay and here it is i'm going to zoom in here and so it just says hello world okay so we've created a flask app and we've verified that flask is working correctly okay back in vs code i'm going to make my terminal get a little smaller here actually i'll just stop the app for now until we've made some more adjustments to our or a code and i'm going to actually paste in some all new code here now check i'm going to be pasting in a lot of code in this tutorial you probably don't want to wait around as i type in every single thing in here so i'm going to be pasting in some code and then i'm going to be explaining what the different parts do so if you check in the description you can get a link to all the code that we are using in this tutorial so you can see uh first we're importing os this is going to allow us to get an environment variable later and then where we are importing we're getting we're getting flask because this we're using making a flask app just like before now here is where we are importing the plumi automation framework this is what i discussed earlier so we're importing plume's automation framework as a variable called auto then in the ensure plugins function we get access to the local workspace a and a and this is something specific to pollumi a workspace is the execution context containing a single plumi project workspaces are used to manage the execution environment they provide various utilities such as plug-in installation environment configuration and creation deletion and listing of stacks now here we have the ws dot install plugins because we are deploying aws resources in this tutorial we must install the aws provider plugin within the workspace so that the plumi program will have available during execution and then we have the create app function this is what flask will run when we start the flask app we must first ensure plugins we run this function here and then create the flask app now this is very similar to what we saw in our example flask app that we just tested before i put in this code app equals flask now this app.config.from mapping this is also something specific to flask not pollumi this function is used by flask to set some default configurations that the app will use this will not be a production ready app but if you ever deploy a flask app make sure to change the secret key i just have a secret you can basically have this anything you want the other variables are used by polumi so we have the project name of herokul ii i had updated this at first it was hero cool because that's what it was originally going to be called but remember we called it hero cool 2. so it's this has been updated hero cool 2. you may want to use heroku depending on what you called if you're following along and then we get the environment variable the pluma organization we get this this environment variable that's why we imported os above now the rest of this file is common to flask apps we set the default route here and just with this slash this is just like the example we already showed but now we are also setting the http method this is for get requests now you probably already know about http methods and requests but a get request is one of the most common requests when you're getting information to your web browser so we are getting the index.html file it's going to return this template that index the html template this is an html file that we still have to create and basically it's going to render this file to the browser when someone goes to this route and then we have this here the file is going to import the sites and virtual machines files which we still have to create and it registers them as a blueprint register blueprint a blueprint in flask is a way to organize a group of related views and other code rather than registering views and other code directly with an application they're registered with a blueprint then the blueprint is registered with the application when it is available in the factory function basically we're using blueprints so we can define additional routes for our web app in other files it's all just about being able to create some routes and these other files so speaking of other files let's create some so i'm going to create a directory called template so let's click the new directory and this is going to be called templates and then i'm going to create a file called index.html and then i'll paste in some code here here's index.html again you can get all this code at the link in the description i won't go into too much detail about this code it's basic html but anything inside curly braces like uh this block content this is in curly braces here yeah this is in curly braces basically anything inside the curly braces is an expression that will be output to the final document flask uses the jinja template library to render templates so we can use the curly braces the jinja templates to dynamically render things like for instance soon we're going to use it to dynamically render a list of the sites and virtual machines that the user has created and then we can also access variables that we create in the python code we can then put the the variables in these curly braces to make them appear on in our in our website in the front end of our website and you can see we can get specific urls so it's getting the url for this sites.list sites now this is something we're going to create in our python file we're going to create a list sites function and this is going to be a specific route that we set up in our python file and this url4 function will be able to get that that url basically so next let's create a new file you can already see that this extends base.html so there should be a when it displays it's going to display is the base.html is going to come before the rest of this content so i'll save this and i'm going to create this new file and it's going to be called base.html okay i'm going to paste in this yeah so this is going to have a header and it's going to have another container that's going to have different flashed messages so our our app is going to be able to flash up alerts and messages to to the user and that's going to be at the all this is going to be at the top of every page in our website so i'll just save that and now we're going to pretty quickly create the rest of our html templates and then we'll create the python files that do the real heavy lifting in our app and we'll go much slower through the python files the python files are going to be what's actually using pollumi to create the different resources on aws so we're gonna inside this templates folder i'm going to create two more directories i'm going to create the sites directory and i'm going to create the virtual machines [Music] directory oh these weren't supposed to be within each other so i move that okay so they're both in the same root level and each of these are going to have the same three files they're going to have an index.html file a create.html file and an update.html file and the same for virtual machines and we'll paste in stuff here i want to kind of point out some things here so it's going to start with the base html it's going to have this navigation here but the real thing we want to look at is um it's going to the real thing we want to look at is going it's going to take information from our python code that we still have to write to have to write specifically there's going to be a list called sites if there's no sites it's just going to say no websites are currently deployed create one to get started and then the url for sites.createsite which will go to this create.html and it's going to allow people to create a site but then if if there are sites it's going to loop this for site and sites and it's going to add this free site so you can see it's getting the the url for the site and the the name for the site and it's getting a url to delete the site and to update the slides and you can see the id is the site name the site name so it's getting all this information from the the site's list that we are going to create in python and this site is actually going to this list of sites is going to come right from paloomi we're going to use polumi to get this list of sites that have been created on aws to show on this index page and then yeah then there's the console url you'll see what all this is in a minute so i'm not going to talk too much about these other ones it's pretty self-explanatory it's just basic html all the functionality comes on the python end so that's what we're going to really focus on talking about now the create and update are are very similar it's it's doing basically similar things except update will have some information already filled in and then i'm just going to add this code for the virtual me machines files which is just like for the sites except it's going to be showing information about the virtual machines so here it's going to like if if there are if there's no vms no virtual machines are currently deployed but if there are vms so it's going to be able to have a link to delete the vm update the vm and here it's giving a command to ssh into the virtual machine and we are going to actually try this out later after we create a virtual machine with this app we're going to ssh into it and it's always going to start with this same line and then it's going to have the the dns name it's getting see where the curly braces so it's getting that directly from um from the python side where we've stored the dns name for each virtual machine okay now we'll do the crate there's nothing too fancy in the crate it's just a web form to insert certain information for our virtual machine and then we have the update one and this is to update information the virtual machine now i'm just going to make sure all these files are saved and actually i'm going to close some of these we're not really going to need to go back into these views these templates i mean now it's time to create the functionality of our heroku clone using python so the app.pi file imports from these files that we still have to create so in the same directory as app.pi let's create sites.pi so new file sites.pi so now that we got the sites.pi i'm going to paste in some code here and these are all just the basic imports that we need for flask and pollumi including importing the automation framework right here and then we import s3 from plumy aws to interact with aws and create an s3 bucket and then this bp equals blueprint we see the url prefixes slash sites so we are going to be defining what happens when people go to the url slash sites now i'm going to paste in some more code and then describe what it does here so here's a new function create plumi program and it's going to take a parameter which is going to be a string content so on the front end of this web app that we're creating this hero cool people can create a website they can deploy a website by inputting the html that makes up the website the html that the that the users put into the web form becomes this content and gets passed on to this create plumi program function later we're going to be creating some routes and functions that call this create plummy program function and pass in the html text that's going to become the content of the website that users are trying to create so this function defines our plumi s3 static website in terms of the content that the caller passes in it will allow us to dynamically deploy websites based on defined values from the post body so if we go in here we can see that first we're creating a bucket and exposing a website index document and then we're going to write the index.html into the site bucket so we have s so oh and again the s3 this is this is part of paloomy this is part of plummy to create s3 bucket and we're creating the bucket object and the bucket the id is the sitebucket.id which is going to be come from the bucket that we created up here the content is the index content which is what the user passed in as the html of the file then we have the key and the content type and then we are going to set the access policy for the bucket so all objects are readable now the way this gets set is specific to aws so that's where all this is coming from like this date is actually specific to aws that we have to pass in for this and you'll be able so depending on what you're going to do you just have to look up what information you need for a bws to create a bucket and then finally we are going to export the website url so the purpose of this pollumi.export command that that you see here is to export a named stack output exported values are attached to the program's stack resource later we will see how we can access this data that's being exported it's kind of like an environment variable so this is the key it's like a key value pair the key is the website url the value is sitebucket.website endpoint this is going to be the url that we get directly from aws after deploying this site to the s3 bucket and then the website content this is just the the the content the the html of the website that we get here so far nothing is calling this function so at this point let's create url endpoints that can be used to call that function we just created to create websites so first we will create a may push this but this is a new route so at slash new so first is going to be slash sites and then after the at the end of slash sites is slash new and this will respond to both get and post requests so first we're going to check if it's a post request and let's just go down to see what happens if it's a get request if it's a get request it's going to return render the template sites slash create the create.html but if it's a post request that means the the user has already went has already done the get request they filled in the form and now they're sending data to the same url and this is what we're going to do with that now you see this request.form.get well we got request that's just part of flask and this is part of oh where'd it go this is how we access the information that's sent with the form and the information is different key value pairs so the user will have put in the site id into the form and now we're getting that and we're setting it to be the stack name and then the user will have put in a file url possibly maybe not so the way it works the user can put in the file url which is the the url they want to upload to the s3 bucket or they can type in the html and that's going to be the site content so first we're going to get the fire url if there is a file url then we'll set the site content to now request dot get this is going to be doing a an http request to whatever url that the person passed in and getting the text or we're just going to get whatever the user typed into the site content and then we're going to define a function plummy program where we're going to call this function here the uh create plummy program function and we pass in the site content the string of the site content so that's how we actually create the website but this function hasn't been called yet because we're going to do that within this try catch block so a try catch this is just if you're not familiar if you don't know a lot about python it's just an error handling thing so we try the code in here and if there's an error then it's going to do what's down here so the first thing that's going to happen says create a new stack generating our plumi program on the fly from the post body so you can see auto is the automation framework auto dot create stack as a reminder every plumi program is deployed to a stack a stack is an isolated independently configurable instance of a pollumi program in this code the stack name is based on the id that the user types into the form so remember stack name right here was the id and then we got the project name and then the plumi program and pulling me program is this which uses pollumi to create the website on aws now it's not going to run the program until we get down here stack dot up if you had the if you're on the plumy cli you would do plumey up but first we're going to make sure we have the correct way we can set the aws region now there would already be one as default but you could you could set a different aws region here and then we deploy so stack that up and then it's going to it says on output print so this is going to print all the output so in the terminal and then we have a flash so this is going to flash up on the website successfully created site or it may flash up an error so this stacked up let's just i'm going to talk a little bit more about that because once the stack is created we can execute commands against the stack including update preview refresh destroy import and export so stacked up up is to update the stack and then you can pass in the a callback which i already discussed which is going to print to the standard output okay i'm going to add a new section of code which will discuss this is going to be a new route this is just to the the root route the slash but it's not just slash because it's still going to take into account the sites so if you just go to slash site slash it's going to list all the sites this is a get request and it's going to so this variable right here sites it's a list this is what's going to be passed into our template our front end once it's full of sites it will be passed in and then it can display the list of sites we're going to get the org name and the project name and then it's going to try this and remember if it's an error we'll just go down to this accept here but the first thing it's going to do is to get the automation framework that local workspace a workspace is the execution context containing a single plummy project a program and multiple stacks so here we're getting access to the workspace and then we are passing in the project name of the workspace then we have list stacks so this just gives us access to the stack name so we also so that all stacks is just going to be the the names of all the stacks so now we have to get access to the specific stacks so that's why we do auto dot select stack and we pass in the stack we're trying to get stack dot name and the project name and then whenever you do select stack you can pass in a program but we don't want the program to do anything so that's why it's just lambda none so select select stack is very similar if we scroll up here to create stack so create stacked and select stack have similar parameters so in this case the program was to run this pollumi program but when we're selecting the stack we're not going to run any program or anything that's why we just have a basically a blank function here and out equals select outputs so remember when we initially created it up here we exported things so the outputs are going to actually just be this information so we're getting the website url and the website content for each item basically each website and once we get the information for if the website url isn't out then we'll append this information to the sites remember this is what's being passed to our front end this the name stack.name the url so it's going to be the the website url and then the console url so console url this just means where we can access information about this on the plumy website that's one great thing about polumi is that you can get information about your application through the command line and through different ways through your program but you can also go to the plumi website every time you're you're creating a stack every time we're creating a site or virtual machine we can go to the plumi website to get information about that about that whatever resource we created so i'll show you that later when when we try out this program that we're making and then if there's an exception we will flash this to the person and then we we're going to return this we're going to render the template and it's the index.html template and we're going to pass in sites equals sites so when we under under the template and pass in the sites uh that means if you remember we'll just look at that really quick but if we go to the index it's looking for each site in that list to display okay i'm going to save that and we're going to add a little bit more to this file so i'm going to paste this in and i'm going to talk about this so this is the update route first it's going to be the id of the site slash update and this can be a get request or a post request so first it's going to receive the id into this function here and we're going to store it as the stack name so if it's a post request first let's see what happens if it's a get request so if it's a get request it's going to render this template update.html because the person wants to update it and then once it actually is updated it's a post request and it's going to do this now this is going to look very similar to our the previous function when when someone creates a new site it's very similar to when they're updating the site so we get the this is all the same the fire file url first we get the site content we have the plumi program we have the select stack now this is all pretty much the same we do stack that up we do stack to up to update it one good thing about updating with pollumi it's going to see what's changed and only update those things i'm not going to just update everything it's going to only update whatever has changed so even though we're putting all this thing all this stuff here it's only going to figure out what changed and update that and then we're going to flash successfully updated we have the error and then it's going to redirect to sites.list sites which was just our slash so not the update the the index but then this is what happens if it's a get request first we're going to get the stack and then the stack that outputs so we can get the website content and then the website content will be used when we render the template because that's what we want the the content of the website to show in the in the update section so users can see what they're updating and there's only one more section to this file which is the delete route so i'm going to paste in this here now this is very straightforward so if the the the route is the id slash delete it's a post and there's not even any get request here that so there's no page for deleting you just click the delete button and it's going to delete so we get the the so we have the stack name we're going to first wait to select the stack then stack dot destroy so previously we just stacked that up to update it but here we're going to destroy and then remove the stack and this is a cool thing about pollumi just doing stack dot destroy it's automatically going to delete the resource on aws so whether it's an s3 bucket whether it's a virtual machine or whatever resource that we create on aws just doing stack dot destroy will delete it so it's not going to charge you any money anymore because it's just completely deleted off of aws and then it's going to flash the message and then there's a few possible exceptions that could happen and then it's just going to redirect to the list of sites okay this file is done and there's really just one more file to create which is kind of similar to this file it's those the same one but for virtual machines so i am going to go up here to new file and this is going to be called virtual machines dot pi now this time i'm just going to paste in the whole thing and they're going to go through it it's a little bit longer but there's so much similarities we're not going to have to go through everything because the automation framework makes working with different types of resources very similar it's not exactly the same because aws is going to require different information when you create different types of resources but the whole top section is basically the same now here we have instance types because when you're creating a virtual machine on aws you have to choose what type of instance you're going to use for your virtual machine and in reality there's way more options on aws than these three but for this example we're going to give the user three different options but you could easily add more to this list here and so here we're going to create the program and right now the only thing that the user will be able to choose is the instance type or you could make it so a user could create could do could choose other options so here this is the pollumi library but all this information is specific to aws so when you're creating a virtual machine you're going to first have to get access to the ami and then we have specific information in here that's specific to aws and we also need the security group and so we specify this and it's going this is how we're going to enable ssh access because we want to build ssh into our virtual machine which we will actually do i'll show you how to do that once we get this all set up now this is going to be something that's different with the virtual machine than the the website hosted on s3 we are going to have a key we're going to have a pry a public private key pair this is going to basically provide authentication when we want to access the virtual machine to make it so only the person who created the virtual machine can access it and not just anybody can get into it when we're creating the virtual machine on aws we must give a public key then in order to access the vm you have to have the private key so what this is doing here is getting the public key information from our local file system so we're getting the the path and it's just accessing this path the home path to access the public key on the file system now this is a file and we're going to actually have to make sure we have created this file so when this goes to access it it's already there now this this directory this directory structure is generally the same on both mac and windows and linux so whatever operating system you have this path is this should work no matter what operating system you have and the way that we're going to create the key value pair it puts it into the same directory basically no matter what operating system you have so this is something that when you're creating the virtual machine through the web interface you're going to have to put in the string of characters which is your public key and then later when you ssh into the virtual machine you have to make sure you have the private key on your computer so it can validate that you are the person who owns this virtual machine and i'll be showing you how to do all that in just a little bit but it's going to strip all the white space from the public key it's going to print the public key remember public keys can be the public knowledge anybody can know your public key but you don't want anybody to know your private key and we're going to create a key pair and this is specific to aws how this is created and then we are going to have to get the the server and you can see we're passing in the security group the key pair the instance type and the ami this is all stuff that we created earlier and then it's going to do a bunch of exports the instance type public key public ip and public dns and this is the information that we're going to be able to use to access it through ssh okay now this was just the function we just have to make the routes to use the function so just like before we have the new route we are going to get the the form data the form that is going to have the id which is just something that a user makes up and it's going to become the stack name someone the user is going to enter the key the public key which is now going to be the key data and then they're going to choose an instance type and remember the instance type is going to be one of these three options that is going to be basically going to be a drop down menu on the front end and that's going to be stored as instance type and then with the creep fluid program it passes in the key data and the instance type and then the rest of this is very similar where we create the stack and then we configure it and then stack that up and then on success on not success then it's going to list the vms again and then this current app.logger this is just going to make sure information is we'll just log this information of the instance types now if someone did a get request it's going to go to the create.html the everything else was the post request and when it does the create the html it's going to pass in some data the instance types because this is going to become a drop down menu on in in the index the create.html file and the current instance type is none and then we have the this is just where it lists all the the vms because it's just slash it's a get request and it's going to be very similar to what we've already looked at uh let's see what's new the only real new thing in this compared to what we already looked yeah in the sites is what's being outputted what i mean what's going to be in the list but you get the dna dns name but everything else is basically the same and then to update well update is going to be very similar to when you're creating something new i guess the only really the only difference when you're updating it is that when this renders update.html it's going to have a current instance type whereas when you're creating a new one there was no current instance type there's also we already have the public key the stack name and the instance types and then we have delete now this is going to be almost exactly the same as the sites one because we just have to get access to the stack and destroy it and it's going to completely destroy the virtual machine from amazon.aws now this can be super helpful because if you've done any work on aws especially if you're just learning you may find out the hard way that if you turn on things on aws and forget to turn them off it can start charging you a lot of money but when you just do stack that destroy well that will just delete everything and you will no longer be charged the money anymore so even with this example it's gonna cost us a little bit of money but just a few cents as long as you destroy it right away okay i'm going to save this and now i'm going to show you how to set up your key value pair there is a program called ssh keygen and this is on both mac and windows so you may already have it on your computer if not you can just look up sss keygen on just search for it and find out how to get it installed but we're just going to run this sss keygen program to create a new key private public key pair so i'm going to type in down to my terminal here ssh key gen and dash m and i'm going to make of the type pim and this is the type that you need to use for aws and i'm just going to press enter and then enter file was to save the key now i'm just going to do the default and you and then you're probably going to want to use a passphrase here [Music] okay now i've created it now we're going to go to that directory just to make sure we have it in there so i'm going to change to the directory [Music] [Music] now this is the file we just created but you're gonna have to make sure it has a a dot pm pem extension i already have this because i already created one with a dot pem extension so you're going to want to rename this now it's different depending on what kind of operating use system you have but one way to to rename it on mac and is just mv you just put in the the name here and then mv means move so i'm moving it from one name to the other name so i'm going to just put rsa.pem so on windows and you could basically do the same thing but instead of doing mv for move you're going to type in rename so rename you're going to put the first file and then what do you what you want to be so this is our public key so if you remember our program we'll try to get that public key file but you can also enter it as your key data so you can either open up that file and copy the key and then paste it into our web interface or if you don't just if you just don't put anything it will try to get that information on its own okay now let's let me just get back into our other directory [Music] and then we're going to run our flask app i'm going to start a little differently so i can put in some environment variables first so see i'm putting in the the port the environment the pluma organization and then i'm going to run okay it's time to test this out okay this is looking good so far except we still need to create our css files so let's go back and make sure we get our our css in there so it looks a little nicer than this but we do know that it is seems to be working so far so actually just pasted in these files here static and this is just bootstrap we're just using basic bootstrap for our css we're just trying to make it simple here so let's go back over and refresh okay this is looking good i'm gonna zoom out a little bit okay so hero cool and we can either create a static website or a virtual machine so let's test to see if everything works i'm going to click get started okay no websites are currently deployed create one to get started so here is where we can create a name and i'm going to just call it hello world and the name there can't be any spaces the way that we created this so the file url well i'm not going to have a file url i'm going to create some content so i'm going to do hello and i'm going to make put in some html here so we can test to see if that works world and then i'm going to click create and look at this successfully create site hello world now this it could actually take a while to create the site especially if it's the first one so it you're just gonna have to kind of wait a while to see just for it to finally kind of pop up like this and so let's test a few things first of all i'm going to just click this and it's going to open the url now let me zoom in so you can see it hello world and we see it has bold and you can see this url it's right on s3 s3 desk website dash us is one amazon ews.com so we have this website on here and if i click view in console well before i do that let's go back to our visual studio code and you can see it's outputted website content website url resources it created four resources so we can see right in here that it actually created the resources and i'm going to try viewing on console here this is opening right on pallumi and then if you're signed in then you can get to here look it's so it's beaucon slash hero hero cool 2 slash hello world let me zoom in a little bit here and then we can see the website content we can see the website url and then we can see more information like configuration secrets management we got some tags here and we can see all this information about our site here and then with resources we can see additional information about the the the bucket is you what bucket is used index the policy and then it's even going to give us information about how to destroy things and change things but we don't need to do any of that because we can do all that from our web interface we're going to actually try editing and deleting this but before i want to show it to you on amazon aws now the great thing about this is you never really would need to check on amazon aws but i would just show you what it looks like on there okay now i'm on my amazon aws account i'm on the s3 section and you can see the buckets and you can see right here here is the bucket we just created it's showing the index file here and it's showing here's the url the url that we were given that go that you can use to access this file if i go and i'm going to just go back over here to show this here now i'm going to go back to our web app our hero cool and i'm going to first let's try a few things i'm going to edit it and then i'm going to delete it so first i'm going to check to see if edit works and we are going to put this all in an h1 tag now just click update and it's successfully updated now i'm going to click here and let me refresh oh no i don't have to refresh this is with the h1 tag so that's why it's all way bigger than before and with h1 bold really doesn't do anything so that's why there's not no difference between hello and world so now i'm going to delete this resource site hello world successfully deleted and then if we go if we go back into the terminal here we can see that oh it's going it's showing what it's doing it's it's going through and deleting all these things it's selling the bucket policy the bucket object the the s3 bucket and the stack it's deleting all of this stuff anything that was associated with it it just deletes and if i go and refresh here on my am s3 page oh this bucket is no longer found it's now no longer in the bucket list it's completely deleted off amazon aws now i'm going to try creating another one this time i'm going to use a file url this is just a game that i found on github so i i'm going to see it's a i just clicked on the raw file and we're just going to put in this url to see if it works i'm going to call it a snake and then i'm going to create successfully created so if i click here and now i'm playing snake i just put in that url and i can play this game cool [Music] so i'm just going to close this for now and let's see what happens if i click edit well now we don't just have the url here we have all the code that it got from the url and now we can make any changes we want like uh what if we want to change the the canvas let's change how big this is instead of 400 by 400 i'm gonna put a thousand by a thousand and update that okay if i click here and now wow this is a really big this game is going to be really easy to not hit myself now [Music] i think maybe the apples still are all going to be in this one little corner [Music] but i can go really far away so i was able to update the code right from there okay and just so you can see what it looks like if you have multiple ones we can call this test and test and i'm just going to hit create so now we have two here and you can see it creates on amazon it creates a bucket for each for each one that we create there's a new bucket for each website and then if i click view and console you can see we can go back here and we can see snake and test and then here we can even see for the snake when we can see all the code okay let's go back to here and now we're gonna create a virtual machine create a virtual machine and this is going to be called potato and then you can choose your instance type i'll just do c3.large and then i can get the text of my public key and paste it here but let's see what happens if i don't even do that if i just click create if i go back into my terminal we can see it actually found my public key automatically and it's now creating it now i could have opened up that public key file in a text editor and copied this and then paste it into that text box but this way is even easier and now it says it's done creating let's go back over here and it successfully created the vm potato now let's find in aws it's not going to be under s3 it should be under ec2 okay so if i go over here we can see that this one is running it's initializing right now and then here we can see more information about our virtual machine but i'm going to get this here and i'm going to try connecting it to it through ssh so i'm going to copy that now i'm back in my terminal that's not in vs code and it's going to paste in this url here and you can see it's accessing our dot pem file are you sure you want to continue yes and then the passphrase that we created that i created when i was creating that file [Music] and i'm in i'm now inside the virtual machine i can uh change directories and you can see that see i can see all these directories right