Google Cloud Storage for Stateless WordPress (P5D72) - Live Coding with Jesse

Key Takeaways

hey everybody welcome to live coding with jesse i'm jesse and today we're going to set up google cloud storage and we're going to get that connected so that it works with wordpress last week we we got set up so that wordpress would work with uh google cloud sql uh so we did that just on a test account and what i what i did uh earlier today was i set up an official account uh for my employer and i created a cloud sql database uh you know under that account and today we're going to set up the storage bucket under that account as well so everything that we had done that's that's all all gone but we worked out a lot of stuff with that i did eventually get that working with uh i think where we left off on thursday we had almost everything working uh so i ended up getting it working the last little bit that didn't work was just the uh the ability for the wordpress installation running on now to connect uh to that my sql database so with now the ip addresses vary so much that you you can't just set an ip and have it access that so i had to end up just allowing any ip just to test it and make sure that it worked and when i did that it did work so what we'll do maybe not in today's stream depending on how much time it is but uh at some point we will set it up so that we can allow different lots of different ip addresses but then also uh we'll have ssl um setup as well so that really like we only allow connections that have the proper keys so it'll still be secure but it will also allow us to use now so that's the plan but today we're going to work on storage we're going to take a break from the sequel stuff um so let me get my headphones on so i forgot to get this set up i don't know if you've ever tried to stream or anything or do videos but there's just a really big difference when you have headphones on and music playing and as opposed to like when you don't i feel way more comfortable talking whenever i have the headphones on and the music playing so i'll get that going i do want to mention to you all well first of all i i want to see i want to say hello because a lot of you are saying hello um so yeah i am home today so christian yeah i'll be home today i'm going to be in the office tomorrow and the next day um so i have meetings and things going on hopefully i'll have enough time to stream though and all right cool got my spotify going oh so one more thing i'd like to announce i'm not gonna make a big deal about this all the time but i'm just gonna announce it maybe the first couple of streams just that everybody knows i started a patreon uh for those of you who don't know what that is it's it's kind of like crowdfunding for people who create content uh so it's like a monthly payment thing a monthly really like a donation so if anybody's interested uh check out my twitter and i i have a pin to tweet that has a link to that i'm not going to put a link to my patreon on these free code camp videos i'll put them on the videos on my own channel uh but basically what i'd like to be able to do is do more things like this so in addition to my live streams maybe do some streams of side projects uh do some tutorial videos and you know maybe even other things so maybe like if more like one-on-one mentoring and and things like that uh so if also like equipment right so the stream when i stream for my house it's not nearly as good a quality as i do for my office it'd be nice to be able to get some better equipment um you know things like that so if you're interested and you have a little bit to spare you know think about you know maybe supporting me through the patreon um but you know what i do now in terms of these live streams is totally free it's always going to be free i'm not trying to charge people especially for those of you who don't have you know a lot of money i know how it is starting out and just learning and not really having that much money so i want to be able to keep doing that and maybe even spend more time doing that so anyway so it's it's there i'm not gonna make a big deal about it uh but if if you can donate um please do and uh even if you can't if you like retweet or just spread the link around whenever you can you know that would be that would be awesome as well uh so that that's it for now i don't want to bug you all with the the patreon stuff so let's get started and i was just just checking real quick to see the uh the chat if there's anything i need to address first okay oh frankie asks about my twitter and my other channel uh i think my a link to my twitter and my other channel is in the description to this video so check that out and also like my i'm i'm most active on youtube twitter and instagram but i'm on like pretty much all the social channels so you can find me wherever you prefer to be and i keep my my dms open and stuff so don't don't worry about you know messaging me and that's totally fine i can't always get back to you immediately but i i try to answer you know all my messages and if you've messaged me and i've never messaged you back just remind me and message me again because it's not on purpose i just i probably just forgot aaron says let's get down to biz all right let me get on this other screen what we need to see i had this there it is i knew i had it up there okay so this is where we're gonna start i'm gonna make it a bit bigger all right so you see i was just working on the uh my sequel stuff so we're gonna switch over to the google cloud stuff and i'm starting my pomodoro timer on my other screen here okay so what i here's what i've done so far all i've done really is just created this uh fus main site project so when you go into my account is franciscan dot university but then within that you can have different projects so everything we do for this main website for this project five is going to be the fus main site uh project okay that'll i mean that helps to keep everything um all together so we're gonna make sure we're in that for everything i have happened it's happened before where i've accidentally been in the wrong project not for franciscan stuff but for like side project stuff and didn't realize it until i'd already set things up so just be careful of that if you are working on on things like this all right so let's navigate to [Music] the storage the storage tab and let's go ahead and take the quick start so it's not really that difficult but it's it's it'll probably be worth it to go step by step so my face is covering this quick start up so i'm going to move myself over to here for now because we won't be on this side of the screen quite as much and i'm gonna make this a bit bigger for you all if i make it too big i the the ui gets a little weird so hopefully that's that's big enough and so this is i it's gonna be pretty simple we're just gonna create the bucket basically um and then set it up for for wordpress all right so we're in the right project let's click continue these quick starts are really handy um for for google cloud platform so if you've never used it you want to get started then you know don't don't be too intimidated all right so let's click create bucket and we're going to call this uh fuswp storage and now we need to decide you know some of our our options here so let's go to this compare storage classes so that we can see you know what what are the options here so looks like they all have 99 99 or more availability these three are all the same in terms of redundancy but the multi-regional uh definitely is better uh for that hmm all right so i think we're we're either going to have to go with regional or multi-regional for this i mean i would say the the bulk of our our visits do come from within a region but we we also get visits all over the world as well let's see all right the costs are are pretty similar there hmm uh let's calculate i'd like to see what monthly costs are all right i don't know what class a and class b operations are creating buckets uploading objects deleting permissions okay all right that makes sense all right let's see oh harsh it says visits that doesn't matter for this well i'm in terms of um the data being access when a user does come to the site the let's say an image will be served directly from this so in terms of how many um how many times like this date is being accessed uh it's i think it is relevant right or from where it's being accessed it is relevant all right let's try i guess estimated cost 6.50 actually that's really cheap let me just uh jack these up a little bit just to get an estimated cost it's still only all right let's see like if we have i don't know a terabyte it's still only 28 all right we're we're fine we're definitely fine i wonder why you know what i suppose regional depends on the region for the cost huh 92 31. yeah there's the difference between mulchy multi-regional and regional is so small in cost i'm definitely going to go with the multi-regional especially thinking ahead for the future uh the university really wants to be able to serve more people in a broader geographic area so i think this would be a better way to go all right cool let's select multi-regional and i'm going to check out the advanced settings don't really think i want to change them though it is encrypted automatically yeah i'm not yeah i'm gonna let google handle that encryption because that's not really my specialty so i think if i mess with it i'd be more likely to mess it up than make it better okay all right cool so that's it like literally we've set up the storage bucket right we could upload files right now uh i'm not gonna do that so what what i'll do is when i'm in the office tomorrow uh i will move over all of the images and pdfs and whatever other uh files are being used for the main site right now as it is the old one i'm gonna move all those over to here and keep the file structure the same um i don't know if you'll remember but the way we're doing it right now is uh because of what most of those assets use relative urls we were able to bring over the markup as is and then we just made uh just a little function uh with i that i believe is irregular uses uh regular expressions in react and it just prepends the correct uh url onto that path so right now it's prepending franciscan.edu because it works for now but once we switch over where the domain name is pointed to it's not going to work anymore so what we're going to end up doing is prepending whatever url uh we have to get access to this stuff okay let's continue see what else yep that's it literally very simple let's close all right i'm very satisfied that was really easy so let's close this tutorial all right so we have a bucket now the next step which i assume will be slightly more difficult is setting this up to work with wordpress so if you've never done anything with wordpress before don't worry i'm gonna go through it so right now [Music] this is still the version that's hosted on digitalocean i didn't quite get far enough this morning i was hoping to have it all moved over to now uh before i started the stream but i i ran out of time uh but it's okay because whatever we do on this when we do migrate to now we're going to migrate everything over as is so it's we're not going to have to duplicate work so i need to go down well first of all let me make this bigger so if you've never seen it before this is the wordpress admin panel let me move my face back over here so this is the wordpress admin panel and there are there's more than one way to uh upload a plug-in to wordpress but we're going to use the the admin panel way so let's add a new plugin and we're going to search for this wp stateless plugin so there's a there's actually a plug-in that does exactly what we want to do already for wordpress so this is going to be super useful and save us a lot of time so really it's it's pretty simple right we can we have different modes we're going to end up going with the stateless mode but you can use this just to have google storage be a backup for your wordpress stuff we can use it as a cdn so it copies media files and then serves them from there or stateless where it actually stores and serves the media file so it's it's basically like a combination of these two so we have no local local meaning like on the same server as wordpress there's no local storage that's what we want because if we're going to serve this with now basically as as if it were like a static site that's what we need we need to take out the database which we're doing and we need to take out the file storage which this will will do so let's install this and activate wonderful and it has a setup assistant so that's great so let's check this out google login all right which one this one hasn't been verified by google yet only proceed yes uh now like normally that warning would mean something but i've already researched this app beforehand for the last few weeks so uh so that's why i clicked go ahead so quickly if you do see a warning like that with something you're not familiar with don't just click okay so essentially we need to give that plug-in permission to access our google storage obviously right if it needs to be able to upload things to there then it we need to give it access all right so default the google cloud projects is fus main site the cloud bucket is fuswp storage great and cool so you see it's already grabbed a lot of the stuff for us which is awesome right when i double clicked i got a drop down and i could see the projects we set up so obviously it is connected um so when you work with wordpress you can make a post like a blog post and you have the option to upload a file or an image right there in the you know in browser editor so normally that upload will just go into a file uh on your wordpress server but what's gonna happen now that we've installed this plugin is when we upload something it's gonna go to our google cloud storage all right so let's do it let's try to upload something all right we're going to select the file actually let me i have my file thing open i'll just drop some stuff in there um i will drop this beautiful image that i took of myself earlier there we go all right so that's uploaded let's verify and go to the media library see that we can actually still see this from wordpress oh yeah look at that handsome guy i'm just joking all right but there's our image we can check it out and see like hey it's it's here all the regular info awesome um oh there's a setting i actually want to see these settings stateless your file url replacement enable yes and there we go bucket folder yeah i do i want it to be wp wp folder all right so you also have part of this private key i'm cool with that though because there's no way you're going to guess the rest of the private key what is the different wordpress enable yep yep so there's this is where uh the urls will actually point uh if we want to we could change the domain i may end up doing that at some point but not today then it'd be cleaner like it could be like i don't know like franciscan dot uh it could be like cdn.franciscan.edu right that that might be something that we'd want to do into year and month based folders yeah so that year in month based folder that's the default wordpress behavior i would like to keep that it's um it's somewhat useful and since that's typical wordpress i i want to keep it like that all right let's save those changes great and check these out that ability yep this what i want to do uh this is one of the reasons why i really wanted this plugin so when you upload a file to wordpress it automatically makes multiple image sizes uh which is very useful uh so what we're gonna do eventually is we will within our react components we'll set it up so that if we're bringing in an image we'll use source set and we'll select different sizes of that image and depending on the screen width we'll serve the image that is most appropriately sized so we will save the user a lot of data like that will get faster load times normally that's a pain if you have to make the image sizes yourself but if wordpress is going to do it for us then we can trust that assuming that an appropriately sized image was uploaded at first we'll have all these different sizes to choose from uh so definitely going to enable that so obviously that first one that we just uploaded it probably won't happen for that uh it shows compatibility with image dropping say this i'm going to enable that force download method that's for several css files yeah i don't think we're gonna have to deal with css so save that all right cool all right now let's check our bucket let's see if we got anything in our bucket yet oh i could refresh right from there wasn't looking we should have something in our bucket although it's possible i needed to do the settings first oh here we go we have a folder now let's click it the folder was 2018 and now we have a folder for the fifth month in 2018 and whoa check that out so here we have look at this this is our original image we have an image now that is 768 pixels by 10.98 we have one that's 716 by 1024 we have one that's 210 by 300 1533 by 1200 we have 150 by 150 and 100 by 100 so all those image sizes have now been created and you can see like this is the original 354 kilobytes well let's say i don't need that one that big let's say i'm on a phone and i'm fine with one that's 210 by 300. now i'm down to 11. that's a huge huge difference right so that's that's the benefit that we get from allowing all these different sizes you know to come in see and they all have their own public links so let's just check this out see we can see that image right i can copy and paste this into the chat and you all should be able to see that image so this link can now be used to serve images directly on our websites i don't know that's pretty cool to me uh i don't know how cool it is if you've never worked with wordpress before um but i i think it's cool enough that even if you've never worked with wordpress as long as you've done something with websites before you should probably be able to appreciate the awesomeness of that all right now i think my timer's about to be up yeah i got about a minute and a half now so i'm not gonna work on the next thing just yet i'm gonna go to the live chat and start answering questions and let me scroll all the way up to the top so you can uh so don't miss any of your questions i should have said so that solution worked that day yeah so i earlier in the stream i talked about how i got the uh sql database that we made last thursday to work with wordpress uh horoshit had the wonderful idea of why don't you just allow all ip addresses and i thought yeah that's a great idea who cares it's a test database anyway like let's just do it uh and that worked so that was all i needed basically i for that test one i just needed to see that it worked and once i saw that it worked i shut down the database and that was that was all i needed uh daniel asks can you use google cloud to host your wordpress uh actually i think you can i think you can do everything right from google we're not gonna do the actual wordpress installation uh oh is that my sorry sorry if that beep was super loud for you that was my timer so let's do the short break now uh for the live chat uh yeah so anyway the answer the question is yes i believe you can host uh wordpress with google cloud i'm not sure exactly how you can figure that but i think it's possible gustavo says got my first invite for a skype interview really excited wow congratulations uh i'm really excited for you as well please let us know how it goes oh frankie uh i just saw your comment about you saw it in the show notes don't worry about it it's so easy to miss that stuff i have so many links in the notes anyway like it's totally understandable don't worry about it okay uh her uh harshit's making a ui library in connection with our javascript.af project so let me throw that up on the screen really quickly i'm gonna have to check i don't remember the link off hand har so i'm gonna go into twitter and grab the link that you um that you gave me uh in a dm okay so while this is loading so slowly i'll read some more questions aaron says pomodoro for the win yeah for sure love pomodoro i need to make a video just about how i use pomodoro because it's just been so helpful uh christian asks why did you choose google cloud platform over the other ones out there oh good question uh good question let me explain my my reasoning uh so last week there were some different options that we're going over so here's why i end up choosing google cloud um i never heard back about whether or not we could get a discount from microsoft for azure um but it seemed like the cheapest between azure aws and google cloud which were the top three that i was considering it seemed like google cloud was going to be the least expensive so given that and also that i already had gone through workshops that was using google cloud stuff and i have uh francisco that works at google cloud i'm able to you know send her a dm and ask questions uh that that was just huge for me that the familiarity that i already have uh you like we already had you know a google account set up for uh for where i work and you know being able to just have that that connection to somebody that actually works there that seemed to me like it kind of just put me a little bit over the top and and choosing that the cool thing about this though is that potentially and with very little work we could switch over to a different platform all we'd have to do is copy over the database and then within wordpress we just change the wp config file to point to that different database uh and of course we'd have to find a plugin that could connect us to that database or modify the current plugin but really it's but because of the way we built this this whole project uh it's purposely very flexible uh and you know each piece could potentially be replaced without that much work so if we end up getting a good deal for microsoft or you know somebody totally new comes in and we like them better then we're we're good uh this is the ui project that harshit is working on so uh basically this is the the ui that we're using for javascript.af and so he's taking it and you know building out a component library from that and what will happen is i don't think it's set up right now but you should be able to click on one of these and then get all the markup that you need to use it you know down here so the actual code will be there and these will be react components so uh just you know basic right now just starting out i i think this is pretty amazing uh you know really simple interface to be able to go through and see the component so check it out i'll paste the link in the chat if any of you want to go to it and uh play with it a little bit you know but definitely let heart should know what you think uh he's been a harshest is harsher worked so hard on on all just so much stuff side projects and on the projects we work on on the stream like i don't i don't know how he does it all but uh yeah but please let him know what you think i think my timer went off yet the timer went off uh let me you know what let me go through the questions the rest of the questions here and then we'll see what time it is and we'll decide whether or not we want to move on now and do some stuff with the sql database or because technically we've accomplished what we want to accomplish it just didn't take that long everything worked out um so let me know what you all think now in the chat if you'd like to keep this short and sweet to the point and then move on tomorrow with another stream or if you'd like to go on a bit longer and maybe branch out do some stuff with sql um either way works for me probably the deciding factor for me is going to be how hungry i am once i finish answering these questions i should ask if there's a three dollar uh option on patreon uh i will join if it is um yeah so there is on my patreon i have different tiers uh of rewards i i really am totally new to patreon so if you have ideas for rewards please let me know there's a poll up right now on my patreon page of like potential awards so vote for that or if you have a different idea just let me know i'm open to anything i just wanted to have a few options there just so that you can see you know what's possible but the the lowest tier is three dollars uh but you can like if you wanted to just donate a dollar sorry you could do that too you know i don't think you're limited to just the the levels of funding that i've set there julio says the sla is very low i don't know what sla stands for could you let me know julio and i'm not i don't remember what i was doing when you said that and what that was related to maybe i was maybe that one out was when i was picking options for the uh for the storage bucket hey bobby says this is awesome thanks bobby ezekiel says hi hey ezekiel how's it going matt duchess says check out jesse's patreon and uh mad duchess thank you for being a patron i really appreciate that javier says is google storage the same as aws um okay so google cloud platform is the same as aws they're comparable uh so google storage would be comparable i think to s3 in aws so they're they're google storage is just a piece of google cloud platform so but yeah basically just with that little distinction i would say yeah they pretty much offer a lot of the same services eric is asking for thoughts on slash experience with magento 2. i have no experience with magento uh so i am sorry about that and i don't i don't know enough about it to even give uh any anything i mean it's a um uh that's what i'm looking for in an e-commerce platform right see i'm not even sure what it is i believe it's an e-commerce platform but that that's where my knowledge stops so i don't want to try to pretend and like i know what i'm talking about there if anybody else has any uh thoughts or experience with magento too please let eric know matt dutchess says i was first to donate because you rock jesse yeah for sure i was super excited when i saw that uh that was awesome so uh thank you i was um yesterday i wasn't at my computer for most of the day because it was memorial day here in the united states it's a national holiday so a lot of people don't have to work that day and so usually we have like picnics so my family i on my mom's side i have a really big family and they all live kind of in the same area so we had a you know outdoor picnic and it was a lot of fun but like i was getting notifications on my phone and trying to answer as best i could um and it was really sunny out so i'm trying to like shade my eyes so i can see my screen and but i saw that and i was just super excited uh so anyway thanks again matt duchess oh so that reminds me if any of you use a different name on youtube and you have a preference let me know whether you want me to call you by your real name or your youtube name i'm fine either way but i just want you to be comfortable with what i with what i say so if you have a preference let me know michael creole says one good thing about my stuttering connection is that i get blackmail blackmail worthy stills of jesse when the buffering occurs yeah um i i it might be fun to see some of those i'm a little bit scared to see someone but that might be funny there we go actually how about this one of my reward tiers on patreon will be you get access to all those uh blackmail worthy stills from the live streams uh cj says i'm new to free code camp and i just created my profile today all right uh congratulations on that and welcome to free code camp so there's so much there's so much to free code camp so definitely the core of free code camp is you know freecodecam.org and those lessons that's where it all started um those are super helpful uh to go through those but then there's so much supplementary material with the medium publication and the youtube videos and what else we have that like wikipedia type thing i can't remember what we call it uh it just has a wealth of information on a ton of different uh coding and tech related topics uh there's a forum i'm sure i'm probably missing something else that we do there's a newsletter uh but there's just so much so you know please take take advantage of all these free resources and uh it's it's definitely helped me to become a better uh better coder javier says lucky you get a sunny day we have a rainy day here uh at nc at nc is that north carolina or somewhere else okay it is north carolina all right cool yeah i thought it was gonna rain it it looked like it was gonna rain for a little bit and then it it cleared up and it was fine it was a really nice day it was warm kids were swimming uh so yeah it ended up being really nice i actually got some some sun you know i as a programmer i rarely get out right that's the stereotype but i was actually out in the sunlight yesterday i mean i got more sun yesterday than i had in like the last two weeks combined um all right cool so i've gotten to the bottom of the chat so let's see what time it is i don't know i'm kind of thinking maybe maybe i'll just we'll finish up here keep this stream on topic for once um and then yeah we'll see maybe i'll maybe we'll work on getting everything combined together like basically production ready uh tomorrow and i'm not sure i said before the launch date is june 4th uh but potentially it might get pushed back i don't really want it to get pushed back but it may be reasonable i had expected to have a little bit more help uh in terms of like data migration and cleaning up data then i did uh so my original estimates were based on that that help which i didn't have so we'll see we'll see how it goes i suppose it is better to launch it and have everything work than to try to rush it so i'm still going to try to do as much as i can before the fourth but we may not launch then either way i still would like to have all the the setup of the database and everything you know squared away all right cool oh harsh it's just back from dinner eating ice cream uh ice cream i've been on a diet for the last like month so ice cream sounds so good right now um all right thank you all so much for watching i really appreciate it i'm actually i'm really happy that everything went perfectly that rarely happens um i'm i'm really gonna try to be back tomorrow for a stream i do have some meetings tomorrow um i can't even remember what time they are i gotta check my calendar so i'll do my best to let everyone know early on in twitter and uh on instagram what time i'm gonna stream hopefully i can get it scheduled early so you all can get the notifications on youtube um yeah so until then uh have a great day and thanks again for watching