Setting up active storage to use AWS S3 with Rails on Heroku

all right so in the last episode we set up our screen recording tool in this episode we're going to set up an aws bucket and deploy to heroku so that when we upload these recordings they get saved into aws s3 so i have not done this process before we're gonna go through it uh from scratch so bear with me so um uh we need to find the amazon web services tool so i'm gonna drill into aws.amazon.com here and i think that i might need to log in i might already be logged in let's see we're going to go to the aws management console okay so oh gosh captcha security check x g f w x w t what would you call this is this x and that x i don't know they're on top of each other they're not next to each other okay so now we're logging into the aws console the services we want to look for is s3 so we're going to just i usually just command fs3 on this page because it's hard to find they have so many different storage tools or so many different tools inside of aws that it can be a little intimidating all right now we want to create a new bucket we're going to say create bucket i think you can technically do like mirroring also so bucket name here this is going to be like record my screen and i'm based in the west coast so i'm just going to pick us west one and copy from an existing i don't think so block all public access um i actually don't know the settings here so we'll just leave it we don't need bucket versioning we don't need any tags we don't need any encryption um yeah this is we're just doing like basic stuff for now and then if we need to we can come back and update all right so we've got this new record my screen bucket the first thing we need to do is go into our config storage.yml so let's go to config storage.yaml and the um yeah so we want to use amazon so we can actually just uncomment this and then let's see so this is expecting that we're using rails application credentials and passing the access key id and secret and then our bucket is called um record my screen and we're in us west one okay and so now we need to go update the credentials to add our access key id and act and secret access key rails credentials call in edit this will open up the credentials editor okay and conveniently in the template it has aws and it uh already has those um sort of pre-filled for us so now we need to get our access key and secret all right so i'm going to go into users and create a new user this is from my iam settings and the username is going to be record my screen and we're going to give it programmatic access and that's it so we're going to go to permissions now and this is going to be in the devs group we don't have any tags we're just going to review this programmatic access with an access key we're going to create the user all right so now this this is going to be the access key id that we're going to copy and paste into this part of our credentials the next part is to paste our secret access key so i'm going to say show i'm going to copy that i'm going to say hide and i'm going to paste it here and then i'm closing my credentials so let's go over here and add everything to our to get i believe we also need when we're using s3 i think we also need a gem yeah so we need this aws sdk rubygem um so we're going to add that aws sdk s3 bundle install so now i'm going to create a new heroku app and push up to it so heroku apps create record my screen let's see if this is taken oh it's apps create all right so that worked and now i'm going to say get push heroku master so in order to use the ruby version that i'm using i need to set the stack to heroku 18 so i can do heroku stack colon set and then heroku 18. and then i need to try pushing again push heroku master okay excellent so now we should be able to go directly to recordmyscreen.rokua.com and initially something is broken because we need to um we need to run the migration so heroku run rake db migrate we also need to set our config key up on heroku oh it's just just a config master key okay i'm going to blur that out alright now if we refresh the page again we should see something all right we've got record my screen so this is cool let's open the terminal and say start so this should start recording we're gonna say screen two share and we want to allow our microphone for this new domain record my screen.heroquap.com and um i guess what we want to do is then say stop for the recording and then save and that should save the recording and we should get back this id so now if we go to like slash r slash that id i would expect to see the recording here wow okay and where is this saved so inspect um we just want to make sure this is coming from s3 and not from um okay so this looks like it's actually being stored locally on rails which won't work because heroku is going to be ephemeral and so uh anything that's not like committed to git is gonna get wiped out so this this storage is not to work so instead of storing it locally like that we need to make sure that it's being stored on s3 so let's open up production.rb this is in the environment and we want to find our storage service okay so this instead of using local for our storage service on production we want to use amazon all right so that is the change we want to make there switch production storage to amazon and then we wait again all right now it's redeployed let's go back to the root and try to make another recording say start pick our screen share and now we're recording change the size of that so we know something happened hit stop and then hit save all right now we've got another key i should really make this automatically redirect to slash r slash the key and this looks like it's still stored locally so huh i am confused like um if we were to say uh let's see is this just a path to s3 or something let's see curl dash um dash v that thing and then we want to go to like uh https recordmyscreen.heroku app.com um and okay great it actually is stored on amazon all right so that is being stored on amazon it's just being redirected through active storage so maybe that was working all along okay [Music] yeah so you can you can hear the audio and it's uploaded and now we could technically like share this link out um and so yeah let's make one little tweak here so that we don't have to like actually [Music] um manually redirect anymore well let's let's deconstruct this just pull out the key and we'll say window dot location dot href is equal to slash r slash the key and that should automatically redirect us and that will make it a little bit easier to use let's also add a button on the show page to say like make another recording like a go back to slash and say like new recording all right so that's it so we got it we went through the process of setting up a bucket on s3 and setting up an iam user so that we had an access key so we have some access keys for working with s3 and then we just set them in storage.yaml and started using them with rails and now that we are deployed to heroku as we record our screen and our audio that is being uploaded to uh that's being uploaded to amazon s3 served from s3 and then is available here so now we can take screen recordings and share out links directly so hopefully this has been useful and interesting thank you so much for watching and we'll see in the next one

Channel: CJ Avilla

Views: 598

Keywords:

Id: y1Ks3ET0A40

Length: 10min 17sec (617 seconds)

Published: Mon Jun 21 2021