File Storage with AWS S3 Buckets Upload | Django (3.0) Crash Course Tutorials (pt 22)

ok so now it's time to host our static files in Amazon Web Services s3 buckets and s3 buckets are just a static file storage system on Amazon Web Services that allow us to host and serve our static files like images directly from there rather than our jingle projects so what I mean by that is if you have a project of this size and you just want to upload this to a Heroku server or a server like that in theory you could just upload it and have your static files served like this but once you start uploading more pictures maybe you have users with profile pictures you're gonna want to serve these outside of Heroku so Heroku wasn't built to serve static files so it's best practices to actually host them elsewhere so if you look at this image right here and you look at the URL path it's actually not taking you to one of these but if you read it right here it's on bucket dot s3 dot Amazon AWS comm and then the rest of the URL so AWS is actually serving this image for us so what we're gonna do in this video is configure that create that s3 bucket and then next time we upload a picture so if I want to upload a new profile picture that'll actually be sent to AWS and then that s3 bucket will actually serve it just like it's doing here so it won't go in here so we're just gonna configure images and any other static files that we may have ok so the first thing we're gonna do is to create an s3 bucket and I'm gonna open up my settings dot py file because this is where I am gonna handle all the configuration so if I open up my browser I actually just went ahead and took away all that configuration so if you look at this that image that was being served from the s3 bucket is no longer being served but because we have this logo in within our static files it's now back to that path so once I configure the s3 bucket and upload the image there it'll change once that configuration is done so let's go ahead and go to AWS so just Google up AWS if you don't have an account yet and go ahead and create one so AWS Amazon calm and go ahead and put a card on file it will require a card but you don't you won't be charged anything until you actually go above a certain usage so ahead and just followed that and once you create the account go ahead and sign in and I'm gonna do a search for s3 so this is the tab that we want but because you haven't been there yet probably go ahead and just do a search make it a easier find there let's go ahead and create that so I'll make this full screen and we're gonna create a bucket so our bucket name needs to be unique so I'm gonna call mine Dennis and this might take a few tries if somebody already has a name that you want so go ahead and test a few things out I'm gonna call mine Dennis IV CRM one - bucket so make sure that's unique and we're gonna go through the default configuration so I'm gonna leave my region two US two West Oregon leave it - whatever you need and go through next next and we'll just let all the defaults run okay so our new buckets creative and what we need to do right now is run some kind of configuration that allows us different access types to our buckets so within permissions go to course configuration and we have a sample policy and this is basically restrictions we can set on it different domains I may be allowed to use our bucket but if you look at my source code I'll actually leave this in the description in the YouTube video go ahead and copy this and paste it in so just to summarize this I left allowed origin which is the domain that we're allowing I left that two-star which means for now just allow anything but once you're looking to secure this go ahead and study this a little bit more so we're gonna set that and hit save and now we need to create a user that can actually manage this bucket so I have one created but for this sake I'm gonna create a new one so let's go back to our main console and let's do a search for I am so this is identity access management I believe user that's what it stands for but from here we're just gonna go - yeah identity access management we're gonna go to users and we're gonna create a new user so I'll just call this Dennis CRM and this is the user's access that we need to actually control that bucket so let's set the access type to programmatic which means this user can make updates and actually access the full bucket and we'll hit next and in attachment policies I believe we're gonna want to look for s3 and we're gonna do Amazon s3 full access so this is gonna give the user all the permissions for now so later on you might want to study what this does but we're just gonna set it to that and give the user full access and we don't need to do anything here and now when we create our user we're actually going to need to get the users access key ID and secret key so if I just go ahead and copy this and go back to settings on P Y so I know the right way is to actually set this up in environment variables but I'll probably make another video for that but for now just don't share your code with anybody make sure they don't see your your access key ID secret key or anything like that so be very careful with this but this is the way we're gonna set this up so I grabbed that key and I set it to the variable of AWS access key ID so go ahead and set that and then the next one we're gonna need is going to be that secret key so we'll go back to our user and run one there and we'll get this secret key so again make sure this stuff is actually hidden you never share it with anyone so we'll copy this and AWS seeker access key so go ahead and set that so this is just giving us access to the user and the last thing we need at this point is access to that bucket name so let's go ahead and get that so our bucket name now that our user is created we can go back and search s3 go back to our bucket and the bucket name was Dennis IV CRM one - bucket so let's go ahead and grab this name and throw that into the bucket name so our user permissions our bucket name and now we can access this bucket so now we need to add a few more libraries to finish up this configuration so we need to finish up this setup here and this is a where I'm getting this is from Django storages so that's a documentation that lets us know how to actually finish up this configuration so let's go ahead and just look that up so we're gonna do a Google search for Django storages and I'm gonna open up these Doc's right here and we need to run this pip install and if you look through storages we're gonna select Amazon s3 and again this just lets us work with the backend and actually set up those static files but first let's go ahead and run that pip install so I'll turn off my server and we'll just do pip installed Django - storages and storages also requires one more library so if you read through this we also need something called boto 3 and I'll just drag in this into my browser so this is boto 3 and we need to run this pip install so if you look through this description boto 3 is an Amazon Web Services software development kit for python which allows Python developers long story short to work with s3 buckets I won't go into details so let's go ahead and just install that so pip install boto 3 and once we have those 2 installed what we need to do now is actually include storages into our installed apps so let's go ahead and before we finish up this which is all from Genco storages let's go to installed apps and add that so we'll just add that as storages and add a comma there so that just lets us know that we're working with this so it's not Django storages it's just storages and to finish up this configuration to show you we're actually get this let's go ahead and just copy that and go into Django storages and there's some minimal defaults that we need so AWS s3 file overwrite we're gonna set that to false so the default is true and what that means is that when we upload a new file if there's a file with that same name do we want to overwrite that or do we want to just add it and give it a different name so I'm gonna set that to false because I don't want files to be overwritten and we'll just set default ACL to none so I won't go into too much detail but this is the minimal defaults that you need for at this point so let's go ahead and set the file default storage too so if I look this up we'll pull this directly from right here so this is going to be storages backends down s3 boto 3 the storage so we'll just paste that in as a string and we'll remove that so this should get most of what we need set up and there's a few things I want to take care of here but if I go to my actual Jing go for my s3 buckets here let's go ahead and actually upload our files so let's go into our project and I'll just move some of this here and let's go to our CRM project and go to static I'm actually just going to grab all of this and upload it into my s3 bucket so let's move that to the right here and let's just hit upload and I can just drag all of these and push them here so once I upload them what I'm actually going to do is change it to where we're no longer relying on Jango static files in the way that we have them set up so what's happening here is if I go into my project here let's go ahead and turn on our server so we'll just go ahead and start that so if I turn on my server and go to this account now and right now we currently don't have a profile picture because there's no path to it but if we just go in and upload some random image here let's go ahead and just grab something like this and submit that based on the configuration we're seeing here and the bucket that we're working with and how we set everything up now Django is not going to send our image so there's an image and no longer sends it here anymore so you're not going to see that image it's actually sending it to our bucket so if we look at the path and you see this it's actually on AWS s3 so if we now open up our bucket and refresh we'll actually see the image appear here so we need to configure it later to actually go into this images folder but that image was directly uploaded to our bucket and based on what we did here Django now knows to service so the last thing I want to do in this video is actually going to be to change up all of our static files so if I go to this logo this is actually still being served locally and if I actually go into just to give you a better example I'll go into the master user Django is still prioritizing these static files over the ones in our s3 bucket so we have this logo in our s3 bucket but right now Django is still prioritizing that localized one so what I want to do is add one more thing in right here one more parameter that's actually going to tell us to look into those s3 buckets first so let's go ahead and open up Amazon s3 or the storages and find that so it wasn't in default storages but it was in static file storage so this should override it so if I go ahead and throw that in here but before I do that I am actually gonna remove all of those static files so I'll show you what's gonna happen so if I go ahead and open this up and let's just say I'm gonna move this out here so it's gonna be outside of our project so I'll put those back in when I put up the source code if I look in a static we have nothing here and that's uncommented so if I open up the project my static files include JavaScript CSS and images so if I go ahead and refresh that and that should stop serving them in a second okay so all of that just broke and Static CSS isn't working but once I go ahead and throw that in into static file storages right here what's gonna happen now is this this project is gonna look up into AWS s3 buckets so those are actually if I go ahead and look in here we actually have all of that CSS right here and that logo so now if i refresh it because we added this we can now have those being served from there so let's go ahead and test this okay so now if I look into this logo if I look at that URL path that's now being served from the s3 bucket so that's it for this video in the next video we're actually gonna start putting this up on a server so I'm actually gonna start with a completely blank project and throw that up on a Heroku server and then we'll finish it up with throwing this site up there so I'm trying to keep this as simple as possible

Channel: Dennis Ivy

Views: 51,171

Rating: 4.9776535 out of 5

Keywords: Programming, Software Developer, Dennis Ivy, Dennis Ivanov, Django, Python, Webdevelopment, AWS, Amazon web services, S3 buckets

Id: inQyZ7zFMHM

Length: 13min 27sec (807 seconds)

Published: Thu Jan 23 2020