Automated WordPress Deployments With Bitbucket Pipelines

what's up everybody it's travis here from travis.media so here's the context for today's video you're a wordpress developer you're doing work on your theme you're writing code you're making changes and when you're done you push it up to your code repository so you've made your changes to your theme you push the code up at that point your process is probably like this you open up the ftp client something like cyberduck or filezilla or maybe even cpanel maybe you upload files like that but it's a manual process you open that up you drag and drop your theme files and you copy them up to your server for the changes to be applied i don't know about you but that's a pretty manual process so in this video i'm going to show you how you can automate that using simple cd or continuous delivery pipelines and specifically in this video we're going to be using bitbucket because it's a popular code repository but you could use github you could use gitlab azure devops code commit whatever you want they all have pipelines and what we're going to do is we're going to set it up so that whenever your code is pushed up to master or merged into master it's going to automatically kick off a build and push your files up to your server and make the changes automatically now we're going to be doing this for wordpress sites but if you watch the video i'm going to show you some other things you can do with the pipelines and i'm sure you'll find a way to apply it to your situation so let's get started and hey if you find this video useful do me a favor and click the like button and consider subscribing to the channel lots of great videos planned for 2021. okay so here's the plan so we're going to use my learn to code blueprint course staging site as the guinea pig in this video so we have the staging site and here in bitbucket we have the current code for that staging site what we want to do by the end of this video is we want to make it so someone's developing on this website they create a branch they do a bunch of work and then they create a pull request to merge that branch into master what we want is when that code is merged into master it needs to kick off a build a pipeline that will take all of those changes and push it via sftp up to our server so that every time things are merged to master a website automatically updates we don't have to go open up a ftp client and drag and drop and all that stuff we want to create a pipeline to do this automatically so to do that in bitbucket you go to your repo i have my repo open here i'm going to go to repository settings i'm going to scroll down to settings and you need to enable bitbucket pipelines for this repository so enable pipelines move that over until it shows a check mark then go to configure bitbucketpipelines.yaml and it says hooray you've successfully set up pipelines but you haven't you haven't set one up yet i don't know why they do that but anyway let's go to our code so what we want to do is we want to create that bitbuckets pipelines.yaml file this is going to control our pipeline so we just need to create a new file called bitbucket dash pipelines dot yml and this is where you're going to define your pipeline now if you haven't created a cd pipeline before or a yaml pipeline before it's pretty simple i'm going to go ahead and write it first and then afterwards we can talk about what's going on and actually i'm going to pull up here if you go if you type in like configure bitbucket pipelines they have a great web page that you should read through on how to create these things and they give some great examples on this page like you can create your pipeline around branches or tags or pull requests and here's an example right here we can look at so here's a pipeline that says hey for pull requests if you have a pull request and that branch has a feature prefix like feature slash whatever run the script otherwise we're going to run this script that's for pull requests any pull requests that happen you can also do it by branches you can say i have a staging branch and maybe a dev branch maybe of course a master but um you could have branches for whatever and depending on what branch is being committed to it'll kick off different builds so yeah check out this page it's really good you can get you know pretty deep into it by tags and branches and here's some advanced stuff where you can do some builds like right here you do an npm run build and then you have your artifacts here you can like push that to s3 or you can you can scp up that to your site you can do a lot of stuff with these pipelines but anyway let's get back to this i'm going to explain it as i write it so what i'm actually going to do here is i'm just going to paste in my pipeline and then i'm going to explain to you what's going on i think that's the easiest way to do it let me paste this in all right so here's my pipeline all i'm worried about is the master branch when something is pushed to master or something is merged into master i want to i'm going to kick off this pipeline and push all these new files up to my server so let's explain this a quick note here this image php 7.4 you don't need to pull in this image it just wasn't removed as i intended so just ignore this completely in the following video i got pipelines we're worried about branches we're not going to be doing any other fancy stuff we're going to keep this simple and i'm only worried about the master branch so here's my first step actually my first and only step i'm going to name it deploy to production actually i'm going to say deploy to staging deployment i'm going to put staging and i'm going to run a script this is going to be my script now bitbucket has this thing called pipe it's really really neat i'm going to take a minute to show you this big bucket pipe pipelines i think it's integrations or something you can google this bitbucket pipeline integrations and they have lots and lots of great things you can do here watch this so if you scroll down a little bit you see all of these categories and what this pipe is doing is it's grabbing these third-party images well actually this one's atlassian so it's not third-party but it's it's grabbing these images that are already put together for you right you got these docker images that do all of these things connect you to amazon and slack and jira and all these different things and you just fill in the variables hey here's the variables i want it'll pull this image set up the variables and do the work for you so bitbucket has a lot of these there's a lot with aws you can do as far as security you can do like a get secret scan where it's going to scan all of your code to look for hard-coded sensitive data that you don't want in there deployment is really really good lots of good stuff in here we're actually going to use one from that today but here's aws stuff azure stuff firebase deploy if you want to deploy your code out to firebase um google apps cube ctl what we're going to be using is actually sftp deploy which is copying files to a remote server using sftp so we're going to be using this package and by using pipe we can grab this image and it'll do all the work for us but there's also like a heroku deploy scp deploy so you can copy your files wherever you need just to look at a few more here uh utilities workflow automation so yeah jira create issue if you want your pipeline to create issues artifact management so bitbucket upload file maybe you're compiling some code and maybe you're compiling some code and you want to push your artifacts up to bitbucket somewhere or npm publish you can do a sonar cloud scan which detects bugs and vulnerabilities in your code pretty cool you can send a notification a slack i was with the job a couple years ago where every time we pushed a master we had a pipeline that kicked off and it would send a notification to slack saying pipeline running so nobody would push or or mess with it at all you can send an email and things like that anyway i just wanted to show you this real quick there's lots of already kind of pre-set up stuff that you can put in your pipeline so back to what we were doing so i'm going to use that pipe atlassian sftp deploy and there's a couple variables that we need to use now let me pull that one up sftp deploy atlassian and i'll show you where i got these from all right so here's the source files for that package i'm going to come down here and it gives you the variables and it gives you a bunch of examples so here's a basic example here's the pipe your user your server your remote path your local path if you need a password here's your password so that's what i'm going to do that's where i'm going to start out with this pipeline so user is going to be and we're going to define these variables in a minute so ftp username this is going to be your ftp username if it's like you're pulling up cyberduck or filezilla or something and ftping into your site it's going to be those same credentials so we're going to create a variable for that so we don't put it in our code at my server is going to be sftp.flywheelsites.com in the remote path is going to be the path to my wordpress theme that's all i'm worried about is the theme so travis.media learn to code blueprint staging slash wp content themes tm starter and that's my path for flywheel if you're in cpanel it's probably going to be something like slash public underscore html slash your website whatever that is but it's your path to your files that you're going to be replacing and finally password my ftp password i should have put sf let's put sftp sftp username and password so let's go and define these variables first so if i come back to my repo here and i go to repository settings i can come down to repository variables and i'm going to add them here so sftp username so you can put secured so it doesn't show your value or you can uncheck that whatever i'm going to leave it secured it's going to be my username and i'm going to add that then i'm going to do sftp password i'm going to put my password and i'm going to add that so we're good for the variables so let's click back pipelines and now we're going to push up this pipeline as soon as we do it's going to start building because we're going to push it to master so i think we're good here and so i'm going to do git add dot git commit adding bb pipeline get push origin master enter now that this is being pushed you should see it pop up here on pipelines because we just push the pipeline yaml file so that's automatically going to register us for pipelines when things are pushed to master so here's the pipeline in progress you can click on it to get more details so we have the build setup going on next it's going to pull that sftp deploy image here it is docker container run actually unable to find image so it's going to pull it so i tried to run it first and it couldn't find that image so it actually pulled the image and then down here it says using password started sftp deployment and then host key verification failed so deployment failed why is that well because this is sftp not ftp so sftp is just like ssh it requires a key same thing with ssh or scp anything like that it requires a key that's a good thing and it's really easy to set up here with bitbucket so let's go to repository settings and down here you'll see ssh keys and what i want to do is i want to basically have a private key here and then on my flywheel site my server i want to put my public key and so uh bitbucket makes this easy i can just click generate keys and it's going to generate me a private and a public key so i'm going to copy that public key go back to flywheel go to account which i'm actually already there go to ssh and i'm going to add a new key add another ssh key give this key a name let's call it um bitbucketdeploy and i'm going to paste my public key here and click add key so i have my public key on my server that i'm sending it to and i have my private key here on my repo now one other thing you can do down here at known hosts if you want to add that to your known hosts you can put in here in the host address i think it's sftp.flywheelsites.com and you can click fetch and it should bring back that host fingerprint and i can add that to my known hosts and click add host boom so now it's added to my known host and finally the last thing i want to do is i want to update my pipeline here to include that key now i don't remember exactly what that is let's go back to sftp deploy look at the documentation and it is uh ssh key and then your key ssh underscore key i'm just gonna put that down here ssh key and what where is that key at well i had to do a little digging for this because i don't know the path i guess i could paste my key in here but i don't really want to do that what i ended up doing was i checked this out earlier and i did a cat which in on linux lists out stuff in your terminal i did a cat to the ssh config so if we go back to our so if we go back to let me see yeah go back here and it says this private key will be added as a default identity in ssh config so what i did was i did in this build pipeline like you can come up here and i can since it's a script i can say something like cat [Music] cat ssh config and i need to pull this in so you can say cat ssh config and what that did was it listed out the folder path to that private key and so i don't know if that's the right thing to do it worked for me but there may be another way maybe there's a a maybe there's a bitbucket variable or something that handles that better but i just did i just spit out the path to the private key and that ended up being this and i'm going to put single quotes here ended up being opt atlassian pipelines agent ssh id rsa that's the path to the key again there might be a better way let me know in the comments if so but this is the way i'm going with so i've added my private key it's going to push this up and it's going to find that public key in flywheel and all will be well so let me try this out so i'm going to save this i'm going to push it up push up my changes and let's see if it works actually i'm going to make a change first just so we want to do this twice so i'm going to go to the front page i want to find something so if you look at our page here and you scroll down there's this part that says um five mistakes you're probably making learning to code so i'm going to change that to like six mistakes just to show you that hey it's uploading my files so here it is five mistakes you're probably making i'm gonna change this to six actually i'm gonna change it to ten to be a little more drastic ten mistakes you're probably making and save that so i got two changes i changed my yaml file so this is going to update it's going to run the new new file or new pipeline and hopefully it updates that front page if this works so let's try that git add dot git commit let's put um updating bit bucket pipeline get push origin master all right so now it should have kicked off another build so let's go over here and back to pipelines so settings actually we gotta go back and pipelines there should be a build running now yeah updating bb pipeline let's click this and see what's going on so we're currently in the build setup all right then it's going to try to run that container it can't find it so they're pulling from bitbucket pipelines and pulling the image and it says using password and now it says starting sftp deployment permanently adding our a host key good connected to sftp flywheel sites so it connected fine it changed to the folder my tm starter theme folder and here it is uploading files now while this is going on another popular solution is git ftp so git slash ftp let me pull it up here while that's running get ftp this is what i originally wanted to do because i didn't really want to copy all the files every time i wanted to only copy the files that have changed it's not a big deal because you don't run this all the time but i wanted to use this this is really popular too and it's really easy to set up it's ftp but if you look at the documentation you're supposed to be able to use ft sftp pretty easily so i'm going to come down here and it says um you're light you're less likely to face connection problems with sftp and you're supposed to just be able to do this get ftp init username your private key and the repo you're supposed to be but i tried like a hundred things and it just didn't work i tried the password i tried the private key fixed all the key and you know i did a bunch of things it wouldn't work the only way it'll work is with this insecure flag so there's this i don't know if they have this listed here but there's this dash dash insecure right here so what that does is it makes it so you don't verify servers certificates and to be honest an insecure sftp is way better than ftp you're not verifying the server certificate but it is secure it is encrypted like that's the main thing it's encrypted but i still don't like running this insecure i mean it works for you know your own hobby stuff but when you get into doing production stuff for clients you don't want to be putting in an insecure flag so totally ditch this and i'm going with atlassian's sftp deploy which works great so let's go back to that all right it's still uploading files and it's done actually yeah deployment finished so if you go back to pipelines you'll see that the second one ran fine it says successful it took two minutes and 30 seconds to run not bad and if i go back to my site and it says five mistakes let's update this page and see if it says six or ten yeah ten mistakes you're probably making and learning the code so what we did there and actually let me do one more thing just to just to give you the full picture let's go back here let's make the change back to 5. so instead of 10 mistakes let's change it to 5 mistakes and what i want to do is i want to do git checkout b let's check out another branch because this is how you're really supposed to be doing it in production so let's check out a branch how about feature slash yeah update home page let's check out a branch called that and let's say we're working on the branch we make a couple of changes do some things to it which we only really change this number but uh so we're done let's do git add and then git commit um updating pi it could be whatever so i'm going to hit return and git push origin feature update home page so i'm going to push this to a new branch in bitbucket and this is kind of how you do it you've been working on this other branch you've been doing all this stuff and then you're going to push your branch up and then somebody's going to take that branch review it and then merge it into master when they do that and only when they do that should it push those new files up to your server so let's go back here and we should be able now to go to pull requests and create a new pull request and it's going to be from that branch that code from the branch we just pushed so feature slash update homepage we're going to go from that branch and merge it into master so i'm going to say merging home page changes and actually if we go back to the repo let me show you something before that we just need to make sure that that pipeline didn't fire when we pushed up code to another branch other than master all right so yeah it did not create a new pipeline see five minutes ago but once we merge this into master it should because it's going to master push our new new code up to our server and we want that to happen when we go to master right because we've made our changes people have signed off that hey this looks good and actually you're probably going to want to have a more in-depth you know staging site maybe a dev site where people can check out the changes and that's when you make your pipeline a little more complicated so instead of saying master only you want to make a script for dev and a script for staging and then finally to master but for simplicity sake we're going to leave it like this i do want to delete that branch when we're done and i don't need a description so uh yeah so we'll just create pull requests okay so here's my pull request i made the change from 10 back to five so let's say mr senior developer comes in here he approves it yeah that looks good and he clicks merge now when he clicks merge it's going to merge this branch into master and fire off that pipeline so let's click merge close source branch good merge that commit and let's go over to our pipeline and it should be a new one starting up there it is in progress so what's happening here is everything was good let's push those changes up to our staging site or production site or whatever you've defined in your yaml all right so again the same thing again we did the build we're pulling this sftp deploy image and we're going to start pushing all of our files and while that's going since we built this pipeline this may make more sense to you now all of these different nice things you can do here so be sure to check out this page and you'll realize how easy it is but the main thing is that you want to define how you want to do it before you create the template right so if you do have a dev branch in a staging branch or environments a dev and a staging environment a production environment then you do want a build pipeline for each one so people may create branches and then merge them into dev you want it to build for your dev site and then from there you can take that and build it into your staging or something like that it just depends on your setup but let's go back and make sure this did fine and you can do your whole ci cd here in bitbucket because you can push your code and have it run tests or check for vulnerabilities things like that you can compile your code do things with artifacts when all that's done you can deploy it out to your server it's really great and very easy to set up in bitbucket all right so looks like we're done here see how it's green it has a checkmark go back to pipelines i should have a third build that's successful and if i go back to my site should be able to refresh and have it set back to five boom there it is so this is a great way to not have to manually ftp or sftp all your files out to your server every time you push to master or merge into master hope you enjoyed this tutorial if you want to know more about bitbucket pipelines or you want me to do pipelines or any ci cd stuff in other environments like aws gitlab something like that let me know down in the comments and if this video was helpful click that like button and i'll see you in the next video

Channel: Travis Media

Views: 724

Rating: 5 out of 5

Keywords: devops, travis media, bitbucket, bitbucket pipelines, deploy wordpress, wordpress deployment, wordpress automation, wordpress ci/cd, wordpress continuous delivery, wordpress devops, wordpress code deploy, wordpress build pipeline

Id: OCA_jB1Dw0I

Length: 25min 23sec (1523 seconds)

Published: Tue Jul 13 2021