Website Coding Day 7, Engineers Week 2021
Video
Links
Transcript (Unedited)
continuing with the next step in the process what i'm going to be working on is to do the automated deployment now what i'm going to actually do is leverage the existing automated deployment setup that i have for my website and pretty much copy it tweak it as navy for this website that i'm building let's get into this after this intro all right what i have here is i've already set up the host name the private key and the username for this particular repository the credentials that you'll need are the credentials that you would normally use to ssh into a server the private key is what you will need to create you use the command on linux servers called ssh keygen and it will ask you a series of questions such as where you want to save the file and if you want to put a passcode with that and what you will get is two files you get a public key and a private key the public key is what will need to go on the github side and excuse me the private key is what needs to go on github which is this here the public key will need to go into your authorized keys file on the server so i've already done the step because these keys have confidential information in them you know if you're able to see the key then you can log in i did not do that step on camera if you're interested in learning how to do that uh drop a comment down below to let me know that you're interested and i could probably do that in a future video that is not as critical so that you can see the entire process from beginning to end that being said so i have all of this information here so what i'm going to do is i'm coming to the repository of my personal website and i'm just going to copy the yaml file that is in here and come over to the repository uh for this particular project and create a new folder first i need to create a folder and the way github actions work is you have to create a github folder and then underneath that folder you have to create another folder called workflows and then underneath that you will create a file that does the actual actions and you can name this file whatever you want and so i'm going to do uh let's see we'll go with uh deploy to production that's the name of the file and the file needs to end with the yml extension so i'm going to go ahead and remove the stuff that i know i don't need i also need a port number i forgot about that because the production web host does have a particular port number that is not the default port number that has to be used so i'll have to go back and add that key to add this secret to the repository and then so add that secret here and then this will work but right now it almost works it's just that part is missing okay that being said um the branch so we're going to stick with master on this one right now we're the at the time of the release of or the recording of this video uh ubuntu 20.04 is available but 18.04 is what i am using and i know works with my website as far as this script goes so i'm not going to change that you know in the future i may change it to uh when you know 1804 is not the i guess the main thing that's being used also just remove the spelling because i'm not going to do spell check on this content i want it to be able to go through if it has spelling errors uh they'll just have to be fixed when they're fixed all right and uh pretty much everything else in here is correct as is so you do a checkout of the repository you do a install of the various python 3 modules then you do a fetch so you get all of the branches that are available in the repository and then deploy do a build of the repository to the website branch and then after that you'll do a uh you'll do a log into production and then have production do a pull of the website branch and so before i do that though i'm going to have to make some adjustments on the server because right now it is looking at the main branch i believe and there are some files that have been updated so if i try to do this right now is not going to work it's going to complain that there are some issues because i saw in the logs on the server that it was complaining about trying to commit something and it did not know what commit was and it wasn't pretty error messages all right so i have my file here set up and i want this to pretty much deploy on when any branch well i only want this to deploy when the master is touched and so uh right now everything is not ready to go so i still would like it to potentially even try to build though at least just not necessarily deploy so i may create another workflow that only does build without the deploy but i only wanted to deploy from master and that's it okay so let me go over here to the commit or the version control screen and so i do need to add this particular file here and let me pull up another window that shows the commits for automating deployment to production so that it looks like i created two of the same thing all right so items 22 and item 20 the workflow file has been created okay and we'll do enter on that and the rest of that is doesn't need to be touched so we go ahead and push this up to the repository and it doesn't like that so i'm gonna have to go to the terminal and do this and that's for some reason in visual studio code sometimes i have issues with pushing up to the repository and so i have to go over to the terminal and mainly push like the ubuntu terminal not the visual studio code terminal because of the credentials that it's using it will still try to use those same credentials if i use the visual studio code terminal all right next thing up is like i mentioned i need to fix that port number so i'm going to do that off camera i have now added the port number and again i wanted to do that off camera so that you know i don't have the site being hacked and so i have all four of the secrets that i need to use and so just to talk a little bit about the secrets files if you want to have like secrets or environment variables in here uh basically you code a variable name or if you will in your github workflow and when your workflow encounters this it knows to go over to the secrets and pull that secret out and you can't see what once you put the secret in you can't see it like you need to update it or remove it but you can't do and edit so just keep that in mind that like if you're doing like a private key or something like that nature make sure you have it already staged and everything before you drop it in here because once you drop it in here it will not allow you to visualize it any further you know not be able to see it again so just keep that in mind the as far as the actions to build this site and ubuntu 18.04 it does not have the necessary packages for python 3 and thus why i'm having to run each of these python commands so i want to do the upgrade of pip but sometimes pip the depending on the docker worker that you get pip may or may not be up to date so update pip and then for mk docs you need to also have setup tools you then obviously install mk docs and install the manify plugin come to find out i don't really need the rss plug-in because i'm not using this for vlogs so i can remove that out and then i'll commit that on the next go-round the next part is that i want to do a fetch and i'm just going to uh put a name with this as well and stated that it is fetching all of the branches there we go and then going to deploy to the website branch which is doing python 3 mk docs with github deploy after that you're going to do the deploy step so if any of these steps here fail then the deploy step will not run and the way that is set up is all of these steps have to succeed before this group of steps can run and use the needs attribute for that and so i say needs mk dots and i group this set of steps as the mk docs so that's how it knows hey if this doesn't fail don't run this one uh the same set of commands are going to run you on ubuntu 18.04 and then i have a github action by fifth sky i assume that's or f if sky i don't know how you say that username um but he has a ssh action that will run a set of commands that you specify so what i have it doing is going so once it logs in it will cd and then change to the www directory and then do a get pull of the origin website branch and that is it and then it'll log out and so let me go ahead and go to the server now i need to go to the web boot directory and remember i mentioned that there's an issue with the get repository because it says something i saw in some of the logs about the commit message and i'm not sure how long this is going to take to run i see it says refreshing the index all right so i have some civic crm files and there's some other files in here that it is complaining about that i'm not too really particular of so what i'm going to do is to copy the so i'm going to go ahead and stage the existing files that is talking about and then do commit on those files all right and there we go and these additional files i believe they could also be staged as well so i'm going to do get add sites all modules cbcrm there we go i don't want to commit the settings file or that other directory because they have some database credentials and other things that i don't want out there on the open internet so i'm not going to do that added civi crm files all right and we don't we have civic crm installed but we don't use it so i like i say it's still installed here but it's not used all right so if i do a git pool like it's mentioning because my origin and master have diverged like first i'm doing get fetch and it should refresh a whole lot of stuff which it did all right now i can do a get cool well gift status and so i am on the master branch get cool and i'm going to go ahead with that merge exit get push and it sends all that back up and i don't believe there's a lot of files that it needs to push but there may be a lot of files that it needs to push uh like i said i haven't updated this site in a while because i knew that this update was going to be coming and drupal 7 which is what the site is currently running on is slated to be retired and so it's like why bother updating it if i know it's going to be retired really soon all right so for the sake of in case something goes wrong i'm going to make a backup directory and then i'm going to move the well go ahead and make a copy of sites and connect as well as sites default cbcrm over to that backup directory all right and so if i do a ls of the backup directory [Music] uh no ls of backup there we go so i have it should be two in there i think i need to la yes there we go so we have a backup of those files that i did not commit now if i do a i believe it will work now so if i go ahead and do a pull request for this repository uh in the worst case scenario i'm gonna have to come back and save some of the files but i think i have all of that covered so i'm gonna do uh not sure why it's not letting me go ahead and do that because i base that branch off of the master so the entire version history is there if i did do some enhancements and some bug fixes so we'll just go ahead and mark those two create the pull request and let's see what it does not like about this pull request so there are some conflicting files i need to [Music] all right resolve the conflicts why are there conflicting files because what i recall i deleted those files or maybe because it when i did it i probably just because i committed those files just now that might be the problem with that all right so let's follow the command line instructions and i'm going to come back to my local and do a get fetch as it's suggesting and so it really said get fetch origin but i'm already set up on the origin so there's nothing else to fetch and then get check out some already so do well i already have good status um all right so let me go ahead and whoops all right so let me go ahead and do get at this existing file uh i think that was item 20 believe it was item 20 yes items 20 and 22 and 20 pound 20 added updated workflow config gotta type it correctly work flow config all right and then do a push of that all right so that has been pushed up and it's checking obviously that issue still exists and so now we'll do uh get status to see which branch i'm on and i really i don't know if it's going to make me move these files but i don't need to necessarily commit those files so since i already have the mk dot branch checked out i can do a get so let's do get merge master um okay i already have it why didn't it not okay so get fetch all right get uh let's do get check out get check out master and be more specific get cool origin master all right get check out mk docs which is the where i put the thing is now if i do get merge master all right now i have my conflicts and so i can do get status and see the two conflicts so deleted by us so i still want to remove those files so get rm includes common and includes uh includes form dot inc all right get status and so those files have been new changes to be committed so i also want to go ahead and remove these out and so if i do [Music] a um so to get rm sites all i guess those files can go ahead and be staged and then i'll probably have to come back and uh remove those again forget status get commit without a message and it's going to automatically create a message and then you can look into the history of what it's going to do so it's going to add these files that i just recently submitted but i can come back and remove those later so that's fine with me all right so master has been merged into mk dots get status not sure why maybe do it that way um all right so now it says for step two check out master get merge dash dash no ff mk docs all right that is done get push origin master and provide my credentials all right so that has been updated should see it refresh and now that has been addressed and i can delete the mk docs branch i'm not going to do that just yet so let me go over here and check my github actions and i do have my deployment action running and so if we come over here i probably don't want to show this while it's running so wait till it gets done so come over here to the master branch and all right so i do have my mk docs branch i do have another branch in here that i attempted to redesign the website and uh i never used so while we're waiting on that action to complete i can go ahead and remove this unused branch so bye bye to that all right still waiting on a github action to complete as you see that's indicated by this yellow arrow here and if i come back over to actions um i'm not sure what all is going to output onto the screen that's why i don't want to show that right now uh but i can't show you that everything in here so i added a readme file to this particular project and also since i'm from switching technologies i guess i can go ahead and update the tags that are over here so we are no longer let's see so this site is no longer using drupal so i'm going to go ahead and remove drupal here it is non-profit we'll do a static um what was that tag let's see stem non-profit a non-profit website from google seven okay so static and static sites also static sites static site generator and then um static maybe website yep static website generation um got nsbe that is a tag or uh engineering engineering organization we'll put that there okay and so the reason i am doing it this way uh of adding these topics here is because that helps you know with this repository being able to be found and we don't have any packages we don't have releases and i'm gonna uncheck the environments too because it's designed in a way that the environments will work uh without any issues so the deployment failed and i'm sure it has something to do with the ssh keys no okay so there's a refusal to emerge unrelated histories cool all right so if i come back to the production and go to the web root directory to get status and i might have to mainly do a get check out uh no i'm sorry do get fetch uh there we go all right and it should update this master branch and maybe i need to go and update the commands that is executing on the server as well all right so now if i do a get pool and then it should update everything now there we go all right so now if i go to the website i should see the new website up and running which i don't or oh three that is never a good thing that you want to get is a 403 and just to make sure all right so it checked out the master branch which you should not have so get check out website and then from origin slash website get fetch let me see hold on this is not auto completing so that's slightly concerning get branch dash a not double a single a all right so get checkout i guess this won't do it website origin slash website [Music] that should work here shortly might take a second what i missed was the dash b command because this branch has never existed in this particular server it when it tried to do that automated deployment it failed because you can't check out a new branch and so forth and so uh yeah that made sense why it didn't work all right so now i do see my files and so if i do a refresh i should get a page yes so this site is now working in production um from the last set of videos there you probably noticed there is some changes here i did a lot of minor tweaking such as getting this carousel to not stretch the image and a number of other things on here off camera because it took it took me a while to get all that done but if you want to see all of those minor changes or how they're implemented you can easily go check the repository that contains this information and you know all of that there so now what i'm going to do is to actually go through and check to make sure that everything looks correct and so far so good there may be some minor changes that i may need to make at a later point as i can you know continue to do a deep dive but for the most part it looks like all of the links are working like they should be working and so there are no concerns with that so if you come back to the github repository i mean excuse me you come back to my local setup and i do a pool uh excuse me do a fetch not a pool all right so the 960 branch got deleted and we now have a new branch called website so at no point should you ever have to update this website branch this branch is specifically for the deployment and the static html css and javascript files what i do want to check though i think i need to check a couple of other things such as the make sure that i am using minified css and javascript files i believe i did put the minifi for well nope so it looks like i missed one here so let's reference that and then while i'm at it go ahead and open that file and do the minification on it as well as go ahead and trim this one do the arrow trim there we go to make sure and i'm also going to come back and format this uh format document there we go and trim volumetic two all right so all of that looks good all of that looks good and so if i come back over to the terminal and do a get status i do have my base html and css files that have been updated in particular the minified file and let me see just one more thing before i do a commit and push this up because this commit when i push it up will actually deploy up to the production automatically it should not have any issues so this will be another test of that before everything uh before i call this a close to the project um all right so yeah we have all the css files minified if we go down here there's a script so that's also minified so should be good to go so if you do get status status all right hit commit and we'll do i'll go ahead and close out the issue that i have open here so let me go back to the repository and so i still have open 24 and 22 and 20 23 is i'm still waiting on some more information for that one so i won't be doing that right now but that's simple when you for payment buttons you can uh depend on the platform that you're using you can get those if you're using platform like we use uh you can just go into clap paypal and request those buttons to be created enter the necessary details for those and it gives you the html code and all you gotta do is copy and paste html code into the website all right so updates completed all right get status and do get push and then i'm gonna remove these images that i did not commit to the repository out of here and that way these errors this red uh set of files so these untrack files will be removed all right so that branch has been updated so if we uh come back to the code you should see the automated deployment running which it is and so it is preparing that push and um there are some other minor tweaks that i'm probably going to have to do such as the hd access files uh get those staged in the appropriate places because one thing that i've noticed with mk docs is the mk the hidden files usually it will not deploy those to it will not consider those when you do your deployment and so what you have to do is you have to stage that file make the necessary updates stage it manually um since it won't automatically stage it for you and then just have an exclusion rule and uh on the server i believe where it ignores that if it you know encounters it or anything of that nature one other thing i'm going to also have to do i did not test this locally because i do not have php set up on this particular computer but i want to set up the uh confirm that the email setup is working correctly and that the php script that i have is working i need to implement those variables here so i will do that off camera pretty much i have the help desk email so where is it going to email this form to and i think that's pretty much it because everything else in this form because i've copied it from what i currently use is pretty much straightforward so keep in mind like i've mentioned this before but i'll mention it again when you write code especially code that you're writing on projects that you are doing for whatever personal purposes then keep in mind you know be able to reuse that code if you're building code at work you know you're not necessarily going to be able to do those things but you can kind of reference what you've already done and use that to your advantage so it's kind of a similar system scenario but you is you probably won't be able to copy your code that you're doing at your job to your personal projects but you can kind of structure it in a similar manner for that you know site to be able to achieve that same goal all right so the automated deployment did complete successfully as you see there is a green check mark here as denoted by the uh for the action that it did perform so all of those are good and so um there's no i don't think i made a significant change on here that you would actually be able to see it one thing i have considered doing is to make sure that my deployments are making making it to production without actually having to log into production and check the date and time stamps is to be able to check have a bill date somewhere in the either in the bottom of the footer or somewhere in the source code of the webpage and that way i can look at that as well as a kind of a confirmation because github will report success but sometimes that success may not actually be successful depending on if you type the wrong commands in or something of that nature so having that bill date in here would help with that confirmation but i'm not too concerned with that like if i see something that's just like really really far off then i know something's probably going array or not quite right all right that will believe we'll cover this part of the video series where we i set up the automated deployment again it's very straightforward if you want to you can copy this particular workflow file i have a link to all of this information for this entire week series of videos down in the description that way you can reference everything that you need from the description so again links in the description if you've learned something please give this video a thumbs up and if you have not already please be sure to subscribe each week new videos this week is a special week because of the fact it's engineering week but new week new videos every week especially on tuesdays